標籤：image gb2312 round 頁面 .com nbsp 欄目 檔案的 styles
直接附上最終：
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網頁布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
