慕課筆記利用css進行布局【混合布局練習】
阿新 • • 發佈：2017-07-30
進行 oat html eight add type round 一個 內容
通過學習div的布局，以一個簡單的內容管理網站的布局為例子，用div+css進行簡單的網頁布局，加深學印象：
<html>
<head>
<title>CSS+div布局學習</title>
<style type="text/css">
body{margin:0;padding:0;text-align:center}
.head{height:230px;width:960px;background:#f96;margin:0 auto}
.cat{height:30px;width:960px;background:#f80;margin:3 auto}
.content{height:806px;width:960px;background:#fff;margin:3 auto}
.content_left{height:800px;width:760px;background:#fff;float:left}
.leftone{height:250px;width:760px;background:#666;}
.lefttwo{height:300px;width:760px;background:#fff; margin:3 0 0 0}
.leftthree{height:250px;width:760px;background:#999; margin:3 0 0 0}
.content_right{height:806px;width:197px;background:#00f;float:right;margin:0 0 0 3}
.lefttwo_l{height:300px;width:360px;background:#cc3;float:left}
.lefttwo_r{height:300px;width:397px; background:#cc9;float:right;margin:0 0 0 3}
.footer{height:30px;width:960px;background:#f80;margin:3 auto}
</style>
</head>
<body>
<div class="head">logo位960*230</div><!--頭部logo-->
<div class="cat">導航欄位置960*30</div><!--導航欄-->
<div class="content">
<div class="content_left"><!--內容左側-->
<div class="leftone">左側第一欄760*250</div><!--左側第一欄-->
<div class="lefttwo"><!--左側第二欄-->
<div class="lefttwo_l">左側第二欄左360*300</div><!--左側第二欄的左側-->
<div class="lefttwo_r">左側第二欄右197*300</div><!--左側第二欄右側-->
</div>
<div class="leftthree">左側第三欄760*250</div><!--左側第三欄-->
</div>
<div class="content_right">
右側內容位197*806
</div><!--內容右側-->
</div><!--內容-->
<div class="footer">底部位置960*30</div>
</body>
</html>
效果如下：
慕課筆記利用css進行布局【混合布局練習】