728x90
<!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 {text-align: center;}
#header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
#header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
/* banner */
#banner {text-align: center; height: 400px; line-height: 400px; background: #9575cd;}
/* contents */
#contents {text-align: center;}
#contents > div {float: left; width: 33.333333%; }
#contents > div.cont1 {background: #7e57c2; height: 247px;}
#contents > div.cont2 {background: #673ab7; height: 247px; line-height: 247px;}
#contents > div.cont3 {background: #5e35b1; height: 247px; line-height: 247px;}
/* tab-menu */
.tab-menu {padding: 10px;}
.tab-menu .tab-btn ul {overflow: hidden;}
.tab-menu .tab-btn li {float: left; width: 160px; background: #9575cd; text-align: center;}
.tab-menu .tab-btn li.active {text-decoration: underline;}
.tab-menu .tab-btn li a {padding: 10px; display: block; color: #fff;}
.tab-menu .tab-cont {padding: 20px; background: #512da8; text-align: left;}
/* 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">메뉴</nav>
</header>
<!-- //header -->
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1">
<div class="tab-menu">
<div class="tab-btn">
<ul>
<li class="active"><a href="#"></a>공지사항1</li>
<li><a href="#"></a>공지사항2</li>
</ul>
</div>
<div class="tab-cont">
<div>
1. Tab Menu DESC<br>1. Tab Menu DESC <br> 1. Tab Menu DESC<br>
</div>
<div>
2. Tab Menu DESC <br>2. Tab Menu DESC <br>2. Tab Menu DESC <br>
</div>
</div>
</div>
</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>
var tabBtn = $(".tab-btn > ul > li");
var tabCont = $(".tab-cont > div");
tabCont.hide().eq(0).show();
tabBtn.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
// alert(index)
tabBtn.removeClass("active");
target.addClass("active");
tabCont.css("display","none");
tabCont.eq(index).css("display","block");
})
</script>
</body>
</html>
'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| HTML 이미지 슬라이드 유형(위아래) (0) | 2022.03.01 |
|---|---|
| HTML 레이어팝업 유형 (0) | 2022.02.27 |
| HTML 세로유형2 (0) | 2022.02.27 |
| HTML 세로유형 (0) | 2022.02.27 |
| HTML 가로유형 예제3 (0) | 2022.02.23 |