一個簡單的模板了解css+div網頁布局
阿新 • • 發佈：2017-07-31
間隙 solid img har height .com eight -a dsi
直接附上最終效果圖：
index.html內容：
<html>
<!--20170730 soulsjie-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+css頁面布局綜合練習</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--css文件的引用-->
</head>
<body>
<!--logo開始-->
<div class="logo">logo位</div>
<!--logo結束-->
<!--導航欄開始-->
<div class="jianxi1"></div>
<div class="Navigation">導航欄位</div>
<!--導航欄結束-->
<div class="jianxi2"></div>
<!--內容開始-->
<div class="content">
<!--第一版塊開始-->
<div class="contentone">
<!--欄目一開始-->
<div class="lanmuyi">
<div class="lanmuheadyi">
<div class="lanmunameyi"><span class="nameyi">欄目一</span></div><!--欄目名-->
<div class="lanmumoeryi"><span class="moreyi">更多...</span></div><!--更多-->
</div><!--欄目頭部-->
<div class="lanmucontent"></div><!--欄目內容-->
</div>
<!--欄目一結束-->
<!--欄目二開始-->
<div class="lanmuer">
<div class="lanmuheader">
<div class="lanmunameer"><span class="nameer">欄目二</span></div><!--欄目名-->
<div class="lanmumoerer"><span class="moreer">更多...</span></div><!--更多-->
</div><!--欄目頭部-->
</div>
<!--欄目二結束-->
<!--欄目三開始-->
<div class="lanmusan">
<div class="lanmuheadsan">
<div class="lanmunameyi"><span class="nameyi">欄目三</span></div><!--欄目名-->
<div class="lanmumoeryi"><span class="moreyi">更多...</span></div><!--更多-->
</div><!--欄目頭部-->
<div class="lanmucontent"></div><!--欄目內容-->
</div>
<!--欄目三結束-->
</div>
<!--第一版塊結束-->
<div class="jianxi3"></div>
<!--第二版塊開始-->
<div class="contenttwo">
<!--欄目四開始-->
<div class="lanmusi">
<div class="lanmuheadsi">
<div class="lanmunamesi"><span class="namesi">欄目四</span></div><!--欄目名-->
<div class="lanmumoersi"><span class="moresi">更多...</span></div><!--更多-->
</div><!--欄目頭部-->
<div class="lanmucontent"></div><!--欄目內容-->
</div>
<!--欄目四結束-->
<!--欄目五開始-->
<div class="lanmuwu">
<div class="lanmuheadwu">
<div class="lanmunamewu"><span class="namewu">欄目五</span></div><!--欄目名-->
<div class="lanmumoerwu"><span class="morewu">更多...</span></div><!--更多-->
</div><!--欄目頭部-->
<div class="lanmucontent"></div><!--欄目內容-->
</div>
<!--欄目五結束-->
</div>
<!--第二版塊結束-->
</div>
<!--內容結束-->
<!--底部開始-->
<div class="footer">底部內容</div>
<!--底部結束-->
</body>
</html>
style.css內容：
body{margin:0; padding:0}
/*logo*/
.logo{ background:#FF0000; margin:0 auto; width:960px; height:300px}
/*導航欄*/
.Navigation{ background:#990000; width:960px; height:30px; margin:0 auto}
/*內容*/
.content{ background:#ffffff; width:960px; height:635px; margin:0 auto}
/*第一版塊*/
.contentone{ background:#ffffff; width:960px; height:300px; margin:0 auto}
/*欄目一*/
.lanmuyi{ background:#ffffff; width:250px; height:300px; float:left;border:2px solid #ff0000; margin:0 20 0 0}
.lanmuheadyi{ background:#FF0000; width:250px;height:30px}
.lanmunameyi{ width:135px;height:30px; float:left}
.lanmumoreyi{ width:135px;height:30px; float:right;}
.nameyi{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}
.moreyi{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 60}
/*欄目二*/
.lanmuer{ background:#fff; width:408px; height:300px; float:left;border:2px solid #FF6600; margin:0 20 0 0}
.lanmuheader{ background:#FF6600; width:408px;height:30px}
.lanmunameer{ width:180px;height:30px; float:left}
.lanmumoreer{ width:180px;height:30px; float:right;}
.nameer{ text-align:left; color:#fff; font-size:14px; margin:0 0 0 10}
.moreer{ text-align:right; color:#fff; font-size:14px; margin:0 0 0 170}
/*欄目三*/
.lanmusan{ background:#ffffff; width:250px; height:300px; float:right;border:2px solid #ff3300; margin:0 0 0 0}
.lanmuheadsan{ background:#ff3300; width:250px;height:30px}
/*第二版塊*/
.contenttwo{ background:#ffffff; width:960px; height:300px; margin:0 auto}
/*欄目四*/
.lanmusi{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FF9900; margin:0 20 0 0}
.lanmuheadsi{ background:#FF9900; width:466px;height:30px}
.lanmunamesi{ width:240px;height:30px; float:left}
.lanmumoresi{ width:240px;height:30px; float:right;}
.namesi{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}
.moresi{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 170}
/*欄目五*/
.lanmuwu{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FFCC00; margin:0 0 0 0}
.lanmuheadwu{ background:#FFCC00; width:466px;height:30px}
.lanmunamewu{ width:240px;height:30px; float:left}
.lanmumorewu{ width:240px;height:30px; float:right;}
.namewu{ text-align:left; color:#ffffff; font-size:14px; margin:0 0 0 10}
.morewu{ text-align:right; color:#ffffff; font-size:14px; margin:0 0 0 170}
/*底部*/
.footer{ background:#990000; width:960px; height:80px; margin:0 auto}
/*間隙*/
.jianxi1{ background:#ffffff; height:5px; margin:0 auto}
.jianxi2{ background:#ffffff; height:10px; margin:0 auto}
.jianxi3{ background:#ffffff; height:20px; margin:0 auto}
一個簡單的模板了解css+div網頁布局