html , css
[html,css] 쇼핑몰, 메뉴 list(<ul><li>)이용
반응형
<html>
<!DOCTYPE html>
<html>
<head>
<title>Shop</title>
<meta charset="utf-8">
<link rel="stylesheet" href="shopcss.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<a href="#" id="logo">
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbelPXk%2Fbtq3htE0CuW%2F20UUE0cydRQEDvD6wlEL1K%2Fimg.png" height="60">
</a>
<ul id="menu">
<li><a href="#"><b>Contact</b></a></li>
<li><a href="#"><b>Shop</b></a></li>
<li><a href="#"><b>Cart</b></a></li>
<li><a href="#"><b>Login</b></a></li>
</ul>
</div>
<div class="hero-header"></div>
<div class="products">
<h3>Our New Products</h3>
<div class="product-list">
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<a href="#" class="product">
<img src="https://bakey-api.codeit.kr/files/629/images/sunglasses.jpg" width="225" height="225px">
<div class="product-name">
Sunglasses
</div>
<div class="product-price">
49,000
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="footer">
<a href="http://faceboo.com">
<img src="https://bakey-api.codeit.kr/files/629/images/facebook.png" height="20">
</a>
<a href="http://faceboo.com">
<img src="https://bakey-api.codeit.kr/files/629/images/instagram.png" height="20">
</a>
<a href="http://faceboo.com">
<img src="https://bakey-api.codeit.kr/files/629/images/twitter.png" height="20">
</a>
</div>
</div>
</body>
</html>
<CSS>
.navbar{
height: 60px;
padding-left: 30px;
padding-right: 30px;
}
.hero-header{
height: 450px;
background-image: url("https://bakey-api.codeit.kr/files/629/images/hero_header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.navbar #logo{
line-height: 60px;
}
.navbar img{
vertical-align: top;
border: blanchedalmond 5px solid;
}
.navbar #menu{
float: right;
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar #menu li{
float: left;
margin-left: 50px;
line-height: 60px;
}
.navbar #menu li a{
color: #545454;
font-size: 13px;
text-decoration: none;
}
.product-list{
width: 735px;
margin-left: auto;
margin-right: auto;
}
.products h3{
font-size: 24px;
color: #545454;
margin-top:60px;
margin-bottom: 60px;
text-align: center;
}
.product{
display: block;
width: 225px;
text-align: center;
text-decoration:none;
color: black;
float:left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
}
.product-name{
margin-top: 20px;
margin-bottom: 4px;
}
.clearfix{
clear: both;
}
.footer{
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.footer a{
margin-left: 10px;
margin-right: 10px;
text-decoration:none;
}
<결과>
반응형
'html , css' 카테고리의 다른 글
| [html,css] 반응형웹 정리 (0) | 2021.06.01 |
|---|---|
| html list 정리 ol / ul / li 태그 (0) | 2021.05.31 |
| Float 가운데 정렬 (0) | 2021.05.31 |
| html css position 정리 (0) | 2021.05.30 |
| html, css 공백, 띄어쓰기 제거 방법 (0) | 2021.05.29 |
댓글