반응형
(1)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
#container {
width : 1080px;
height: 300px;
border : solid 1px grey;
}
#left {
margin : 10px 0px 10px 60px;
background-color: red;
width : 650px;
height : 280px;
float : left;
}
#right {
margin : 10px 20px;
background-color: blue;
width : 250px;
height : 280px;
float : left;
}
</style>
</head>
<body>
<div id = "container">
<div id = "left">
</div>
<div id = "right">
</div>
</div>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
#container {
width : 1080px;
}
.align {
float : left;
margin-right : 10px;
}
ul {
font-weight: bold;
padding-left : 5px;
list-style-type: none;
background-color : green;
width : 410px;
height : 30px;
float : left;
line-height: 31px;
}
.rank {
float : right;
background-color: yellowgreen;
width : 130px;
height : 20px;
text-align: center;
height : 30px;
padding-left : 0px;
}
#plus {
margin-right : 0px;
}
</style>
</head>
<body>
<div id = "container">
<ul>
<li class = "align">메일</li>
<li class = "align">카페</li>
<li class = "align">블로그</li>
<li class = "align">쇼핑</li>
<li class = "align">사전</li>
<li class = "align">뉴스</li>
<li class = "align">증권</li>
<li class = "align">부동산</li>
<li class = "align" id = "plus">지도</li>
</ul>
<ul class = "rank">
<li>실시간 검색 순위</li>
</ul>
</div>
</body>
</html>
(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#container1 {
width: 1080px;
}
.align {
float: left;
margin-right: 10px;
}
ul {
font-weight: bold;
padding-left: 5px;
list-style-type: none;
background-color: green;
width: 410px;
height: 30px;
float: left;
line-height: 31px;
}
.rank {
float: right;
background-color: yellowgreen;
width: 130px;
height: 20px;
text-align: center;
height: 30px;
padding-left: 0px;
}
#plus {
margin-right: 0px;
}
.left {
background-color: red;
width : 800px;
height : 280px;
float : left;
margin-bottom: 5px;
}
.right {
margin-left : 10px;
background-color: blue;
width : 270px;
height : 280px;
float : left;
}
#yellow {
width : 1080px;
height : 60px;
background-color: yellow;
float : left;
}
</style>
</head>
<body>
<h1> Logo </h1>
<div id="container1">
<ul>
<li class="align">메일</li>
<li class="align">카페</li>
<li class="align">블로그</li>
<li class="align">쇼핑</li>
<li class="align">사전</li>
<li class="align">뉴스</li>
<li class="align">증권</li>
<li class="align">부동산</li>
<li class="align" id="plus">지도</li>
</ul>
<ul class="rank">
<li>실시간 검색 순위</li>
</ul>
</div>
<div id = "container">
<div class = "left"></div>
<div class = "right"></div>
<div class = "left"></div>
<div class = "right"></div>
<div id = "yellow"></div>
</div>
</body>
</html>반응형
'HTML5' 카테고리의 다른 글
| Chapter08 반응형 웹 (0) | 2020.11.03 |
|---|---|
| 연습문제 8-5 반응형 웹 (0) | 2020.11.03 |
| 7-4 절대위치배치 7-5 요소의중앙배치 7-6 고정바배치 7-7 글자생략 (0) | 2020.11.02 |
| 7-preview, 7-1, 7-2 (0) | 2020.11.02 |
| 6-12, 6-13 (0) | 2020.11.02 |