/* banner */
#banner{}
#banner .list{width: 100%; height: 350px; background-color: azure;
position: relative;
}
#banner .list>imgs{width: 100%; height: 350px; background-color: azure;
position: absolute;
}
#banner .list>imgs>img{display: block;}
더보기
<!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>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<div id="wrap" class="clearfix">
<header id="header">
<h1 class="logo">
<a href="#"><img src="./img_Fireworks festival/logo.png" alt="logo"></a>
</h1>
<nav class="nav">
<ul>
<li><a href="#">이용안내</a>
<ul class="sub">
<li><a href="#">이용방법</a></li>
<li><a href="#">이용시간</a></li>
<li><a href="#">이용요금</a></li>
</ul>
</li>
<li><a href="#">이벤트정보</a>
<ul class="sub">
<li><a href="#">현장이벤트</a></li>
<li><a href="#">온라인이벤트</a></li>
<li><a href="#">이벤트예약</a></li>
</ul>
</li>
<li><a href="#">프로그램</a>
<ul class="sub">
<li><a href="#">프로그램안내</a></li>
<li><a href="#">온라인예약</a></li>
<li><a href="#">단체예약상담</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul class="sub">
<li><a href="#">공지사항</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</nav>
<div class="bgnav"></div>
</header>
<section id="box">
<section id="banner">
<ul class="list">
<imgs><img src="./img_Fireworks festival/slide1.png" alt=""></imgs>
<imgs><img src="./img_Fireworks festival/slide2.png" alt=""></imgs>
<limgsi><img src="./img_Fireworks festival/slide3.png" alt=""></imgs>
</ul>
</section>
<section id="contents">
<div class="notice">
<h3>공지사항</h3>
<ul>
<li><a href="#">동부올림픽 타운 관리동 2층 초등생 누구나 사용가능하다고 합니다. </a></li>
<li><a href="#">광안대교 접속도로 기공 - 센터럴파크</a></li>
<li><a href="#">부산대표 해수욕장, 해운대 돌풍으로 파문일어.. 부산시민들 불안에..</a></li>
<li><a href="#">맑은 바닷물과 백사장으로 가득한 해운대 해수욕장 </a></li>
<li><a href="#">방과후 돌봄 다함께 돌봄센터 프로젝트 시행</a></li>
</ul>
</div>
<div class="gallery">
<h3>갤러리</h3>
<ul>
<li><img src="./img_Fireworks festival/gallery01.png" alt=""></li>
<li><img src="./img_Fireworks festival/gallery02.png" alt=""></li>
<li><img src="./img_Fireworks festival/gallery03.png" alt=""></li>
</ul>
</div>
<div class="link">
<h3>바로가기</h3>
<ul>
<img src="./img_Fireworks festival/link.png" alt="">
</ul>
</div>
</section>
<footer id="footer">
<div class="f_logo">
<a href="index.html">
<img src="./img_Fireworks festival/logo.png" alt="">
</a>
</div>
<div class="f_menu">
<a href="#">전화번호안내</a>
<a href="#">개인정보처리방침</a>
<a href="#">저작권보호정책</a>
<a href="#">찾아오시는길</a>
</div>
<div class="f_cl">
<address>
(우)48095 부산광역시 해운대구 중동 2로11(중동) <br> 대표전화 : (051) 749-4000 팩스 : (051)749-444
</address>
<p>
Copylight ⓒ 2019 Haeundae-gu. All rights reserved.
</p>
</div>
</footer>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav>ul>li").mouseover(function(){
$(this).find(".sub").stop().slideDown(200)
// $(this).find(".sub").stop().slideDown(200)
})
$(".nav>ul>li").mouseout(function(){
$(this).find(".sub").stop().slideUp(200)
// $(this).find(".sub").stop().slideUp(200)
})
</script>
</body>
</html>@charset "utf-8";
/* reset */
*{margin: 0;padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color: white;}
.clearfix::after, .clearfix::before{content: "";display: block;clear: both;}
body{background-color: aliceblue;}
#wrap{width: 1000px; background-color: white; margin: 0 auto;}
/* header */
#header{width: 200px; height: 650px;
float: left;
}
/* #h.logo */
#header .logo{}
#header .logo>a{}
#header .logo>a>img{padding-top: 30px;}
/* #h.nav */
#header .nav{margin-left: 25px; margin-top: 30px;}
#header .nav>ul{}
#header .nav>ul>li{width: 150px; height: 50px; background-color: #1B079C;
position: relative;
}
#header .nav>ul>li:hover{background-color: #4733C2;}
#header .nav>ul>li>a{display: block; text-align: center; line-height: 50px;}
/* nav.sub */
#header .nav>ul>li> .sub{position: absolute; display: none;
left: 175px; top: 0; z-index: 10;
}
#header .nav>ul>li> .sub>li{width: 150px; height: 40px; background-color: #8C65FA;}
#header .nav>ul>li> .sub>:hover{background-color: #2E0D8C;}
#header .nav>ul>li> .sub>li>a{display: block;
line-height: 40px; padding-left: 20px;
}
/* //header */
#box{width: 800px;height: 650px; background-color: aquamarine;
float: left;
}
/* banner */
#banner{z-index: 9;}
#banner .list{width: 100%; height: 350px; background-color: azure;
position: relative;
}
#banner .list>imgs{width: 100%; height: 350px; background-color: azure;
position: absolute;
}
#banner .list>imgs>img{display: block;}
/* contents */
#contents{width: 100%; height: 200px; background-color: beige;}
#contents div{width: 33.33%; height: 200px; background-color: aliceblue;
float: left; padding: 10px;
}
#contents div>h3{display: block; width: 100px; height: 40px; color: white;
background-color: #1B079C; text-align: center; line-height: 40px;
}
#contents div>ul{border-top: 2px solid #1B079C;padding-top: 10px;}
/* .notice */
#contents .notice{}
#contents .notice>ul{
padding-top: 5px; padding-left: 10px;
}
#contents .notice>ul>li{ padding-top: 5px; position: relative;
}
#contents .notice>ul>li>a{color: #000; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contents .notice>ul>li::before{
position: absolute; content: ""; background-color: #1B079C;
width: 3px; height: 3px; left: -10px; top: 17px;
}
/* .gallery */
#contents .gallery{background-color: white;}
#contents .gallery>ul{}
#contents .gallery>ul>li{padding-right: 10px; float: left;}
#contents .gallery>ul>li:last-child{padding-right: 0;}
/* link */
#contents .link{}
#contents .link>ul{padding-left: 3px;}
/* footer */
#footer{width: 100%; height: 100px; background-color: white;}
#footer div{width: 600px; height: 50px; float: left;}
#footer .f_logo{width: 200px;height: 100px; line-height: 125px;}
#footer .f_logo>a>img{filter: grayscale();}
#footer .f_menu{height: 30px; text-align: center; line-height: 30px;}
#footer .f_menu>a{position: relative; color: #000; margin-top: 10px; font-weight: bold;}
#footer .f_menu>a:first-child{width: 0;}
#footer .f_menu>a::before{content: "";
position: absolute;
background-color: #000;
width: 1px; height: 15px; left: -3px; top: 4px;
}
#footer .f_cl{height: 70px; background-color: lightgrey;
font-size: 14px;
padding: 6px;
}
#footer .f_cl address{
letter-spacing: -1px; padding-left: 15px;
}
#footer .f_cl p{padding-top: 3px; text-align: center;}'2023 > HTML' 카테고리의 다른 글
| [HTML] 필터 (0) | 2023.04.14 |
|---|---|
| [HTML] (0) | 2023.04.14 |
| [html] 웹페이지 구상 (0) | 2023.04.11 |
| [HTML] 유진건설 홈페이지 기본적인 틀 만들기 (0) | 2023.04.11 |
| [HTML] 스크립트&폰트 설정 (0) | 2023.04.11 |
