728x90
반응형
08_list.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/08_list.css";
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<section class="content">
<h2>예약 방법 및 요금</h2>
<article>
<h3>¤ 요금</h3>
<ul>
<li>1인: 40,000원</li>
<li>2인: 60,000원</li>
<li>3인: 80,000원</li>
<li>4인: 100,000원</li>
<li>5인: 120,000원</li>
<li>6인: 140,000원</li>
</ul>
<p>
6인 이상이 머무르게 되면 2층 침대가 이닌 방바닥에 주무시거나<br> 앞뜰에 텐트를 치고 주무실 수 있습니다.<br>
침낭이나 텐트는 직접 가져오셔야 합니다.<br> 이 경우 숙박 요금은 저희와 별도로 상의해 주세요.
</p>
<p> </p>
</article>
</section>
</div>
</body>
</html>08_list.css
@CHARSET "UTF-8";
.navi{
margin-top: -15px;
width: 100%;
height: 60px;
}
.navi ul{
height: 40px;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
list-style-type: none;
float: left; /*위로 정렬된 후 왼쪽으로 정렬된다.*/
font-size: 15px;
}
article ul li {
list-style-type: square;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch03.01. rgba (0) | 2017.08.23 |
|---|---|
| [CSS] ch02-09. list 2 (0) | 2017.08.23 |
| [CSS] ch02-07. spacing (0) | 2017.08.23 |
| [CSS] ch02-06. indent (0) | 2017.08.23 |
| [CSS] ch02-05. decoration (0) | 2017.08.23 |