티스토리 뷰
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout04</title>
<style>
body {background-color: #ffe0b2;}
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 30px; color:#fff; text-align: center; text-transform: uppercase;}
.header {width: 1000px; height: 100px; line-height: 100px; background-color: #ef6c00;}
.nav {width: 1000px; height: 100px; line-height: 100px; background-color: #f57c00;}
.side {float: left; width: 300px; height: 600px; line-height: 600px; background-color: #fb8c00;}
.content1 {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #ff9800;}
.content2 {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #ffa726;}
.footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background-color: #ffb74d;}
</style>
</head>
<body>
<div id="wrap">
<div class="header">header</div>
<div class="nav">nav</div>
<div class="side">side</div>
<div class="content1">content1</div>
<div class="content2">content2</div>
<div class="footer">footer</div>
</div>
</body>
</html>
'CSS > 사이트를 만들자' 카테고리의 다른 글
사이트를 만들자 - 레이아웃 6 (0) | 2022.02.03 |
---|---|
사이트를 만들자 - 레이아웃 5 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃3 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃2 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃1 (0) | 2022.02.03 |
댓글
© 2018 webstoryboy