728x90
화면 기록 2022-03-13 오후 11.29.10.mov
0.58MB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>롯데월드 연습</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<header id="header" class="clearfix">
<h1><a href="#"><img src="images/logo.jpeg" alt="롯데월드"></a></h1>
<nav class="nav">
<ul class="clearfix">
<li><a href="#">즐길거리</a>
<ul class="submenu">
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
</ul>
</li>
<li><a href="#">요금/우대혜택</a>
<ul class="submenu">
<li><a href="#">submenu-2</a></li>
<li><a href="#">submenu-2</a></li>
<li><a href="#">submenu-2</a></li>
<li><a href="#">submenu-2</a></li>
</ul>
</li>
<li><a href="#">참여프로그램</a>
<ul class="submenu">
<li><a href="#">submenu-3</a></li>
<li><a href="#">submenu-3</a></li>
<li><a href="#">submenu-3</a></li>
<li><a href="#">submenu-3</a></li>
</ul>
</li>
<li><a href="#">이용가이드</a>
<ul class="submenu">
<li><a href="#">submenu-4</a></li>
<li><a href="#">submenu-4</a></li>
<li><a href="#">submenu-4</a></li>
<li><a href="#">submenu-4</a></li>
</ul>
</li>
<li><a href="#">소통서비스</a>
<ul class="submenu">
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
<li><a href="#">submenu-1</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- //header -->
<section id="banner">
</section>
<!-- //banner -->
<section id="content1">
</section>
<!-- //content1 -->
<section id="content2">
</section>
<!-- //content2 -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script/jquery.min_1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>/* reset */
*{margin: 0; padding: 0;}
li {list-style: none;}
a {color: #111; text-decoration: none;}
.clearfix::before, .clearfix::after {content: ''; display: block; clear: both;}
/* 레이아웃 */
#wrap {width: 1000px;height: 1000px;margin: 0 auto; background: ;}
#header {}
#banner {}
#content1 {}
#content2 {}
#footer {}
/* header */
#header {height: 100px; background: ;}
#header h1 {float: left;}
#header h1 img {width: 150px;padding-top: 5px;}
#header nav {position: relative;float: right; z-index: 100; margin-top: 30px;}
#header nav ul {}
#header nav ul li {position: relative;float: left;width: 150px;text-align: center;}
#header nav ul li:hover {background: #888;}
#header nav ul li a {font-size: 20px;display: block; padding: 20px 15px;}
#header nav ul li ul.submenu {display: none ; position: absolute; left: 0; top: 60px;}
#header nav ul li ul.submenu li {float: left; width: 100%;}
#header nav ul li ul.submenu li a {font-size: 15px;padding: 10px;}
#header nav ul li ul.submenu li a:hover {background: #888;}//메뉴
$(".nav > ul > li").hover(function(){
$(this).find(".submenu").stop().slideDown();
}, function(){
$(this).find(".submenu").stop().slideUp();
});'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| 웹디자인연습 - 컨텐츠영역(레이어팝업,탭메뉴) (0) | 2022.03.15 |
|---|---|
| 웹디자인 연습 - 이미지슬라이드 (0) | 2022.03.14 |
| 웹디자인 연습 예제 (0) | 2022.03.09 |
| HTML 이미지슬라이드 유형(좌우) (0) | 2022.03.01 |
| HTML 이미지슬라이드 유형(페이드 효과) (0) | 2022.03.01 |