728x90
css를 이용해서 사이트 구현하기
<!DOCTYPE html>
<html>
<head>
<title>10주차 실습</title>
<style>
/*값 초기화*/
* {
margin: 0;
padding: 0;
border: 0;
}
body{background-color: rgb(243,243,243);
width:960px;
margin:0 auto; /*중앙정렬레이아웃*/
position:relative;
}
header{background-color:black;
color:white;
border:1px solid #999999;
padding-top: 40px;
border-radius: 15px;
}
header>h1{padding-left:20px}
header>p {margin-bottom:30px ;
padding-left:20px}
article{background-color: white;
width:640px;
border:1px solid #9e9e9e;
border-radius:15px;
padding: 20px;
float:left;
background-image:url('coffee.jpg');
background-repeat:no-repeat;
background-position:right bottom;
background-size:50%;
}
section{ margin:20px 0px;
}
aside{background-color: white;
border:1px solid #999999;
width: 230px;
padding:20px;
border-radius:15px;
float:right;}
footer{ border:1px solid #ffffff;
clear:both;
width:960px;
height:30px;
background-color:black;
border-radius:4px;
position:absolute;
top:700px;
}
footer>div{
color:white;
}
.product_info{
background-color:rgba(33, 33, 33, 0.3)
}
#nav {background-color:rgb(50, 49, 49);
border-radius:0px 0px 10px 10px;
padding:10px;
}
#nav>li {display:inline;
padding: 0px 10px;
}
#nav>li>a{
color:white;
text-decoration:none;
}
#n {
width:220px ;height:200px;
border:1px solid red;
background-color:rgba(0, 0, 0, 0.7);
position:absolute;
right: 300px;
top:20px;
box-shadow: 1px 0px 11px rgba(255, 52, 95, 1);
padding-top: 30px;
}
#n >h1 {color:red;
text-align: center;
}
#n >p{color:white;
padding:15px;}
</style>
</head>
<body>
<header>
<h1>Fourth Coffee</h1>
<p>Bringing the world to your cup</p>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
</ul>
</header>
<section>
<h2>Now in stock at Fourth Coffee!</h2>
<article>
<h3 ><a href="#">Classic Blend</a></h3>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, justo at placerat rhoncus, odio augue malesuada mauris, ac consectetur ligula erat id metus. Mauris volutpat, lacus in feugiat aliquet, augue tortor accumsan lacus, eu placerat
eros mauris eget diam. Integer risus nisi, aliquet eget mollis ut, auctor ut enim. Suspendisse venenatis arcu vitae velit pulvinar condimentum. Sed est eros, pharetra eu semper ac, dapibus id dui.</p>
<p class="product_info">Item #7849 | $49.99 </p>
<br />
<h3><a href="#">Guatemalan Blend</a></h3>
<p >Donec luctus bibendum arcu, ac interdum lacus sodales sit amet. Nullam interdum, lorem ut luctus ultrices, nisi turpis porttitor est, id pulvinar dui mauris nec sem. Vestibulum nec elit orci, quis imperdiet odio. Curabitur malesuada, quam sit amet
pharetra suscipit, turpis risus lacinia leo, in iaculis purus dui in velit. Vivamus luctus libero eget metus imperdiet consequat. Mauris sem ipsum, faucibus ut egestas id, eleifend a quam.</p>
<p class="product_info">Item #9753 | $44.99 </p>
</article>
<div id="n">
<h1>FIRE SALE!</h1>
<p>gittis mattis sem et dignissim.Nullam hendreit facilisis est, nec venenatis sem mllis sagittis amet </p>
</div>
<div class="box">
<aside>
<h3>Welcome to Fourth!</h3>
<p>Praesent sagittis mattis sem et dignissim. Nullam hendrerit facilisis est, nec venenatis sem mollis sit amet. Nullam id quam risus, et sagittis mauris. Cras hendrerit neque eget purus gravida ac rutrum dolor tristique. Praesent a quam ligula. Praesent
sed augue nisl. Curabitur hendrerit, velit nec ullamcorper bibendum, turpis orci congue sem, eget sagittis erat nunc eu dui.</p>
</aside>
</div>
</section>
<footer>
<div class="box">
<p>
© 2022 Sungshin Women's University. All rights reserved. Terms of use.</p>
</div>
</footer>
</body>
</html>
실행 결과물
728x90
'🖥 Front-end > HTML| CSS' 카테고리의 다른 글
| css 핵심 개념 정리 (1) | 2024.06.12 |
|---|
