목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응 선택자</title>
<style>
.container {
width: 960px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #E7E7E7;
}
header {
height: 280px;
width: 100%;
margin: 0;
background-image: url(images/img.jpg);
/* background-position: left top; */
background-position: center;
}
.navi {
background-color: #031a41;
width: 960px;
height: 60px;
margin-top: -20px;
}
.navi ul {
list-style-type: none;
height: 40px;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline;
float: left;
text-align: center;
}
/* link라는 반응 선택자는 방문을 하지 않은 링크에다가 스타일 적용
visited라는 반응선택자는 방문한 링크에 스타일을 적용 */
/* 1번이상 방문한 링크에 대해서 적용하는 속성 */
.navi a:link, .navi a:visited {
padding: 10px 5px 5px 35px;
display: block;
color: #fff;
width: 150px;
text-decoration: none;
}
.navi a:hover {
text-decoration: 0px 2px 2px #000;
color: #FC0;
}
.navi a:active {
color: red;
}
</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>728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| input 속성(pattern, type) (0) | 2021.06.08 |
|---|---|
| 상태 선택자 (0) | 2021.06.03 |
| table 하위 선택자 사용법 (0) | 2021.06.03 |
| 가장 인접한 형제 찾아서 CSS 적용시키기 (0) | 2021.06.02 |
| *= 속성 선택자 사용법 (0) | 2021.06.02 |