CSS 속성 종류 _float_nav 만들기_CSS
2021. 12. 15. 11:59ㆍksmart_html_css_js/css
728x90
<style type="text/css">
body {
margin:0;
color: #2e2e2e;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #F00;
}
a:hover {
color: #0f0;
}
#header {
border-bottom: 1px solid #2e2e2e;
padding: 15px;
height: 100px;
}
/* hearder 왼쪽 */
#headerLogo {
float: left;
padding-top: 30px;
}
/* hearder 오른쪽 */
#headerMenu {
float: right;
}
/* 서브메뉴 */
#topSubMenu {
margin-bottom: 15px;
overflow: hidden;
}
#topSubMenu ul {
overflow: hidden;
float: right;
}
#topSubMenu li {
float: left;
}
#topSubMenu a{
padding: 5px 10px;
}
/* 메뉴 */
#topMenu {
clear: both;
overflow: hidden;
}
#topMenu ul {
}
#topMenu li {
float: left;
}
#topMenu a {
padding: 5px 10px;
font-size: 25px;
}
</style><body>
<h1>nav 만들기</h1>
<header id="header">
<div id="headerLogo">
<img alt="한국스마트정보교육원" src="logoImage.png">
</div>
<div id="headerMenu">
<nav id="topSubMenu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">login</a></li>
</ul>
</nav>
<nav id="topMenu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
</div>
</header>
<section>컨텐츠</section>
</body>728x90
'ksmart_html_css_js > css' 카테고리의 다른 글
| CSS 가상 선택자 활용 예제_CSS (0) | 2021.12.15 |
|---|---|
| CSS 가상 선택자_CSS (0) | 2021.12.15 |
| CSS 속성 종류 5_CSS (0) | 2021.12.15 |
| CSS 속성 종류 4_CSS (0) | 2021.12.15 |
| CSS 속성종류 3_CSS (0) | 2021.12.15 |