forked from easysIT/doit_HTML-CSS-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathps-3.html
More file actions
84 lines (75 loc) · 2.27 KB
/
ps-3.html
File metadata and controls
84 lines (75 loc) · 2.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상 선택자</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.navi ul{
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline-block;
width: 150px;
padding: 10px;
}
.navi a:link, .navi a:visited {
font-size: 14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color: #222; /* 배경 색 */
color: #fff; /* 글자 색 */
}
.navi a:active {
background-color :#f00; /* 배경 색 */
}
.contents {
margin: 30px auto;
width: 400px;
padding: 20px;
border: 1px solid #222;
border-radius: 5px;
}
.contents :nth-child(3) {
background-color: #ffff00;
}
.contents p:nth-of-type(3) {
background-color: #00b900;
}
</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>
<div class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
<h2>객실 소개</h2>
<p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
</html>