-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathwebd04-1.html
122 lines (109 loc) · 5 KB
/
webd04-1.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 디자인 기능사</title>
<style>
/* reset */
* {margin: 0; padding: 0; font-size: 24px; color: #fff;}
a {color: #333; text-decoration: none;}
li {list-style: none;}
table {border-spacing: 0;}
.clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
#wrap {width: 1200px; margin: 0px auto;}
/* header */
#header {position: relative; text-align: center; background: #7e57c2;}
#header .logo {position: absolute; left: 0; top: 0; z-index: 10; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
#header .nav {position: relative; float: right; width:100%; margin-top: 56px;}
#header .nav ul {padding-left: 40%; }
#header .nav ul li {position: relative; float: left; width: 25%; text-align: center; }
#header .nav ul li a {padding: 10px; display: block; font-size: 20px; color: #fff; background: #b39ddb; }
#header .nav ul li a:hover {background: rgba(0,0,0,0.4);}
#header .nav ul li ul {padding-left: 0;}
#header .nav ul li ul.submenu {display: none; position: absolute; left: 0; top: 44px; background: #b39ddb; height: 176px;}
#header .nav ul li:first-child ul.submenu:after {content: ''; position: absolute; left: -480px; top: 0; width: 480px; height: 176px; background: #b39ddb;}
#header .nav ul li ul.submenu li {width: 100%; border-right: 0;}
#header .nav ul li ul.submenu li a:hover{background: rgba(0,0,0,0.4);}
/* banner */
#banner {text-align: center; height: 400px; line-height: 400px; background: #9575cd;}
/* contents */
#contents {text-align: center;}
#contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
#contents > div.cont1 {background: #7e57c2;}
#contents > div.cont2 {background: #673ab7;}
#contents > div.cont3 {background: #5e35b1 ;}
/* footer */
#footer {height: 100px; line-height: 100px; text-align: center; }
#footer .foot1 {float: left; width: 200px; background: #5e35b1;}
#footer .foot2 {float: left; width: 800px; background: #512da8;}
#footer .foot3 {float: left; width: 200px; background: #4527a0;}
</style>
</head>
<body>
<div id="wrap">
<header id="header" class="clearfix">
<h1 class="logo">로고</h1>
<nav class="nav">
<ul>
<li><a href="#">MENU-1</a>
<ul class="submenu">
<li><a href="#">subMenu-1</a></li>
<li><a href="#">subMenu-2</a></li>
<li><a href="#">subMenu-3</a></li>
<li><a href="#">subMenu-4</a></li>
</ul>
</li>
<li><a href="#">MENU-2</a>
<ul class="submenu">
<li><a href="#">subMenu-1</a></li>
<li><a href="#">subMenu-2</a></li>
<li><a href="#">subMenu-3</a></li>
<li><a href="#">subMenu-4</a></li>
</ul>
</li>
<li><a href="#">MENU-3</a>
<ul class="submenu">
<li><a href="#">subMenu-1</a></li>
<li><a href="#">subMenu-2</a></li>
<li><a href="#">subMenu-3</a></li>
</ul>
</li>
<li><a href="#">MENU-4</a>
<ul class="submenu">
<li><a href="#">subMenu-1</a></li>
<li><a href="#">subMenu-2</a></li>
<li><a href="#">subMenu-3</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>Copyright</h3></div>
<div class="foot3"><h3>SNS</h3></div>
</footer>
<!-- //footer -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").mouseenter(function(){
$(".nav > ul > li > ul").show();
});
$(".nav > ul > li").mouseleave(function(){
$(".nav > ul > li > ul").hide();
});
</script>
</body>
</html>