[Layout] Layout - 2
웹/Layout2019. 1. 5. 18:11
Layout
Layout02
결과물
코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>layout02</title> <style> body {background-color: #b3e5fc;} #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color:#fff; text-align: center;} #header {width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;} #nav {width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;} #side_left {float: left; width: 300px; line-height: 600px; height: 600px; background-color: #039be5;} #contents {float: left; width: 400px; line-height: 600px; height: 600px; background-color: #03a9f4;} #side_right {float: left; width: 300px; line-height: 600px; height: 600px; background-color: #29b6f6;} #footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;} </style> </head> <body> <div id="wrap"> <div id="header">HEADER</div> <div id="nav">NAV</div> <div id="side_left">SIDE_LEFT</div> <div id="contents">CONTENTS</div> <div id="side_right">SIDE_RIGHT</div> <div id="footer">FOOTER</div> </div> </body> </html>
'웹 > Layout' 카테고리의 다른 글
| [Layout] Layout - 5 (0) | 2019.01.05 |
|---|---|
| [Layout] Layout - 4 (0) | 2019.01.05 |
| [Layout] Layout - 3 (0) | 2019.01.05 |
| [Layout] Layout - 1 (0) | 2019.01.05 |
| [Layout] Layout (0) | 2019.01.05 |
댓글()
