반응형
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout1</title>
<link rel="stylesheet" href="2020-12-31.css";>
</head>
<body>
<div class="container">
<header>
<h1>logo</h1>
<p><u>Log in</u> or <u>Create Account</u></p>
<ul>
<li>contact |</li>
<li>store locactor |</li>
<li> support |</li>
<li> CART</li>
</ul>
</header>
<nav>
<input type="text">
<select><option>Category</option></select>
<button type="button">SEARCH</button>
</nav>
<div id="main">
<section>
<aside>
<ul>
<li>All Categories</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>
</ul>
</aside>
<div id="banner">
<h3>[PROMOTIONAL IMAGES ROTATE HERE]</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</section>
<section>
<div id="prodlist">
<h3>Today's Specials</h3>
<ul>
<li>
<div></div>
<p><a href="#">Product 1</a></p>
</li>
<li>
<div></div>
<p><a href="#">Product 2</a></p>
</li>
<li>
<div></div>
<p><a href="#">Product 3</a></p>
</li>
<li>
<div></div>
<p><a href="#">Product 4</a></p>
</li>
<li>
<div></div>
<p><a href="#">Product 5</a></p>
</li>
<li>
<div></div>
<p><a href="#">Product 6</a></p>
</li>
</ul>
</div>
</section>
</div>
<footer>
<ul>
<li><h3>ABOUT US</h3></li>
<li>Company</li>
<li>News</li>
<li>Jobs</li>
<li>Policies</li>
<li>Contact</li>
</ul>
<ul>
<li ><h3>SOCIAL</h3></li>
<li>Facebook</li>
<li>Twitter</li>
<li class="social">Try our app</li>
</ul>
<ul>
<li ><h3>SERVICE</h3></li>
<li>FAQ</li>
<li>Live Support</li>
<li class="social">Site map</li>
</ul>
</footer>
</div>
</body>
</html>CSS 코드
body {padding:0; margin :0;}
/*헤더*/
.container {width:1150px; margin:15px auto; border: 3px solid black;}
.container header {}
.container h1 {background:silver; width : 180px; text-align: center; margin-left:20px;padding:20px; float:left;}
header {height: 125px;}
header p {float:left; margin-top:84px; padding-left:25px; text-decoration: none;}
header ul {float:right; margin-right:25px; list-style-type: none;}
header li {float:left; padding-right:5px;font-weight: bold;}
nav { background:silver; height:56px; }
nav input{ padding: 4px; margin-top:15px; margin-left:10px; width:350px; border:3px solid gray;}
nav select{width:200px; padding: 3px; border:3px solid gray;}
nav button{width:120px; padding: 4px; margin-left:10px; background: dimgray; border-radius: 5px;}
/*메인*/
#main {min-height: 500px; clear:both;}
#main aside{float:left;}
aside ul {list-style-type: none; border: 3px solid black; padding:0; margin:10px 10px 20px 20px; width:220px;
}
aside li {border-bottom:2px solid silver; font-size:18px; font-weight: bold; padding:8px 14px;}
aside li:nth-of-type(7) {border-bottom: none;}
#banner {float: right; border:3px solid black; width:850px; height: 277px; margin:10px 30px 0px 5px;}
#banner h3 { text-align: center; margin-top:87px; }
#banner ul {list-style-type: none; float:right; margin:30px 20px;}
#banner li {float: left; padding:8px 15px; background: #dcdcdc; margin-right: 10px; margin-top:40px;
font-weight: bold;}
#prodlist{clear:both;}
#prodlist h3 {margin-left:20px; margin-top: 50px; }
#prodlist ul {list-style-type: none; margin-top: 50px; }
#prodlist li {float:left; padding-right:50px; margin-bottom: 160px; margin-right:15px; margin-left:20px;padding-bottom: -5px; }
#prodlist div{background: silver; border-radius: 5px; width: 100px; height: 100px;}
#prodlist a {text-decoration: underline; color:black;}
#prodlist p {text-align: center;}
#prodlist a:hover {text-decoration: underline; color:red;}
/*footer*/
footer {clear:both; border-top: 3px solid black; height: 250px; }
footer ul{list-style-type: none; display: inline-block; padding-right:50px; margin-left:5px;}
세세한 부분까지 잡으려고 했는데 너무 늦어서 자야겠다 새벽 5시 새해를 컴퓨터 앞에만 있다가 맞이하는구나 ㅋㅋㅋㅋ
아무나 새해 복..
반응형
'JAVA & APP :국비지원 학원 복습 > CSS' 카테고리의 다른 글
| CSS : 웹레이아웃잡기 2 - layout1 (0) | 2021.01.02 |
|---|---|
| 실습예제) CSS로 웹레이아웃 잡기 (0) | 2020.12.30 |
| CSS: 11 Table (0) | 2020.12.30 |
| CSS : 10 list (0) | 2020.12.30 |
| CSS : 09 Float (0) | 2020.12.30 |