[토토로 페이지 메뉴만들기 : 선생님코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.wrap {
width: 900px;
height: 1000px;
margin: 0 auto;
background: gray;
}
header {
width: 900px;
height: 80px;
background-image: url("./images/common/totoro_2.png");
margin: 0 auto;
}
#topLogo {
width: 100px;
height: 80px;
margin-left: 10px;
float: left;
}
#topLogo > img {
width: 100%;
height: 100%;
}
#gnb {
width: 400px;
height: 80px;
margin-left: 140px;
float: left;
}
#gnb li {
list-style: none;
height: 80px;
line-height: 80px;
float: left;
margin-left: 20px;
color: white;
border-right: 1px solid white;
}
#gnb li:last-child {
border: none;
}
#gnb li:nth-child(2n) {
background-color: yellow;
}
#gnb li:nth-child(2n+1) {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div id="topLogo"><img src="./images/common/top_logo.png"></div>
<nav id ="gnb">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
*********************************************************************
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Insert title here</title> | |
| <style type="text/css"> | |
| * { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| /***************** wrap ****************/ | |
| .wrap { | |
| width: 900px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| width: 900px; | |
| height: 80px; | |
| background-image: url("./images/common/totoro_2.png"); | |
| margin: 0 auto; | |
| } | |
| #topLogo { | |
| width: 100px; | |
| height: 80px; | |
| margin-left: 10px; | |
| float: left; | |
| } | |
| #topLogo > img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #gnb { | |
| width: 400px; | |
| height: 80px; | |
| margin-left: 140px; | |
| float: left; | |
| } | |
| #gnb li { | |
| list-style: none; | |
| width: 100px; | |
| height: 80px; | |
| line-height: 80px; | |
| letter-spacing: 2px; | |
| float: left; | |
| color: white; | |
| } | |
| #gnb2 { | |
| width: 140px; | |
| height: 80px; | |
| margin-left: 50px; | |
| float: left; | |
| } | |
| #gnb2 li { | |
| list-style: none; | |
| height: 80px; | |
| line-height: 80px; | |
| float: left; | |
| margin-left: 20px; | |
| color: white; | |
| } | |
| #s { | |
| clear: both; | |
| width: 900px; | |
| margin: 0 auto; | |
| } | |
| #s img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 전체 랩 --> | |
| <div class="wrap"></div> | |
| <!-- header --> | |
| <header> | |
| <div id="topLogo"> | |
| <img src="./images/common/top_logo.png"> | |
| </div> | |
| <nav id="gnb"> | |
| <ul> | |
| <li>menu1</li> | |
| <li>menu2</li> | |
| <li>menu3</li> | |
| <li>menu4</li> | |
| </ul> | |
| </nav> | |
| <nav id="gnb2"> | |
| <ul> | |
| <li>Login</li> | |
| <li>Join</li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- 전체 section --> | |
| <section id="s"> | |
| <section> | |
| <img src="./images/common/main.jpg"> | |
| </section> | |
| <section></section> | |
| </section> | |
| <!-- footer --> | |
| <footer></footer> | |
| </body> | |
| </html> |
************************************************************************************
자손선택자, 후손선택자를 이용하면 id, class 지정을 줄일 수 있다.
**************************************************************************8
카페참고
http://cafe.naver.com/0100100101010101
'프로그래밍, 통계학 > CSS' 카테고리의 다른 글
| [30일차]2015.08.19.수, 자손선택자, 후손선택자 (0) | 2015.08.19 |
|---|---|
| [29일차]2015.08.18.화, HTML/CSS 연습연습 ,페이지 만들기 (0) | 2015.08.18 |
| [28일차]2015.08.17.월, HTML, CSS 연습 (0) | 2015.08.17 |
| [27일차]2015.08.14.금,CSS (0) | 2015.08.14 |
테시리