慕課筆記利用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進行布局【混合布局練習】