728x90
반응형
10_pseudo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/10_pseudo.css";
</style>
</head>
<body>
<div class="container">
<header> </header>
<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>
</div>
</body>
</html>
10_pseudo.css
@CHARSET "UTF-8";/*should select*/
.container {
width: 960px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #E7E7E7;
}
header {
height: 280px;
margin-top: 0;
background-image: url(../img/10_bg.png); /*이미지 URL*/
background-repeat: no-repeat; /*이미지 사이즈 조정*/
background-position: left top; /*왼쪽삳단에 백그라운드를 위치 시키겠다.*/
}
.navi {
background: #003E00; /*(==)background-color: */
margin-top: -15px;
width: 960px;
height: 60px;
}
.navi ul {
list-style: none;
height: 40px;
padding-top: 10px; /*안쪽에서 위쪽 여백*/
padding-bottom: 5px; /*안쪽에서 아래쪽 여백*/
}
.navi ul li {
display: inline; /*가로메뉴 구현*/
float: left; /*가로메뉴 구현*/
font-size: 15px;
}
.navi a, .navi a:visited { /* a 객체 중에 방문할때*/
padding: 10px 5px 5px 35px; /*블럭 여백*/ /*12시부터 시계방향 북동남서*/
display: block;
color: #fff; /*글자색 흰색*/
width: 150px; /*너비 150px*/
text-decoration: none; /*밑줄 없음*/
}
.navi a:hover, .navi a:focus{ /*hover: 마우스를 올린상태 focus:메뉴를 선택했을때*/
text-shadow: 0px 2px 2px #000; /*글자에 검은색 그림자//x축,y축,퍼지는정도,색깔*/
color: #FC0; /*글자가 노랑 계열로*/
}
.navi a:active{/*마우스를 누른상태*/
color: red; /* 글자색이 빨강으로*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch02-01. font (폰트) (0) | 2017.08.23 |
|---|---|
| [CSS] ch01-11. navigation (0) | 2017.08.23 |
| [CSS] ch01-09. attr (0) | 2017.08.22 |
| [CSS] ch01-08. group (0) | 2017.08.22 |
| [CSS] ch01-07.child (0) | 2017.08.22 |