[CSS] 16. 실습: 재능교육

in Web on CSS


실습: 재능교육



/*------------- 재능.css --------------*/


.header{ width:80%; min-width:670px; height:200px; margin:auto;}
.global{height:150px; line-height:150px;overflow:hidden;}
.global img{float:left; padding-top:50px;}
.head-nav{float:right; overflow:hidden;}
.search{float:left;}
.head-nav ul{float:left;}
.head-nav ul li{float: left; font-size:14px; margin-left:25px;
	font-weight:700; }
.main-nav a{display:block;}
.main-nav{margin:auto;}
.main-nav ul li.level1{width:23%; float:left; position:relative; border-top:1px solid #000;}
.main-nav ul li.level1>a{text-align:center;}
li.level1:hover .level2{display:block;} 
li.level1:hover #green{background: #bfff00;}
li.level1:hover #pink{background: pink;}
li.level1:hover #blue{background: #00bfff;}
li.level1:hover #yellow{background:  #ffff66;}
.level2{width:100%; position:absolute; padding-top:30px; display:none;}
.content{width:100%; margin:auto;} 
.content img{width:100%;}





/*------------- 재능.html --------------*/


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="재능.css">
	<title>재능교육</title>
</head>
<body>
	<div class="header">
		<div class="global">
			<h1><img src="재능_logo.png" alt=""></h1>
			<div class="head-nav">
				<div class="search">
					<input type="text" placeholder="도서검색">
					<input type="image" src="재능_search_btn.png">
				</div>
				
				<ul>
					<li><a href="">회원가입</a></li>
					<li><a href="">로그인</a></li>
				</ul>
			</div>
		</div>
		<div class="main-nav">
			<ul>
				<li class="level1 " ><a href="" id="green">출판소개</a>
					<ul class="level2" id="green">
						<li><a href="" >출판소개</a></li>
						<li><a href="" >도서 구입처 안내</a></li>
					</ul>
				</li>
				<li class="level1"><a href="" id="pink">도서쇼핑</a>
					<ul class="level2" id="pink">
						<li><a href="">도서전체</a>
							<ul>
								<li><a href="">그림책</a></li>
								<li><a href="">어린이 교양</a></li>
								<li><a href="">학습</a></li>
								<li><a href="">일반 교양</a></li>
								<li><a href="">재능스스로펜</a></li>
							</ul>
						</li>
						<li><a href="" >추천신간</a></li>
						<li>베스트 도서</li>
						<li>수상, 추천 도서</li>
						<li>작가보기</li>
					</ul>
				</li>
				<li class="level1" ><a href="" id="blue">뉴스&이벤트</a>
					<ul class="level2" id="blue">
						<li><a href="">공지 사항</a></li>
						<li><a href="">이벤트 소식</a></li>
						<li><a href="">온라인 소식받기</a></li>
					</ul>
				</li>
				<li class="level1"><a href="" id="yellow">커뮤니티</a>
					<ul class="level2" id="yellow">
						<li><a href="">북트레일러</a></li>
						<li><a href="">웹진</a></li>
						<li><a href="">자료 받기</a></li>
						<li><a href="">1:1 문의</a></li>
						<li><a href="">원고 투고</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="content">
		<img src="재능_visual4.jpg" alt="">
	</div>
	<div class="footer">
	</div>
</body>
</html>




실행결과