是菜鳥,可能寫的不好,不夠明朗,還忘大蝦提點,也希望可以和新手一起學習
首先申明，我覺得div+css樣式布局 入門是非常簡單的，只是簡單的屬性，與屬性值而已。但是要想用好他，我覺得那是一門藝術，速成不了。
DIV+CSS遵循的是網頁標準設計，也就是web標準，而web標準最注重的就是：“結構的語義化”(分別定義，區塊分明，強化重用，代碼易讀)。
DIV排版的核心：即CSS盒子模式
CSS 每個div盒子模式包括：內容(content)、填充(padding)、邊框(border)、邊界(margin)
用DIV+CSS設計思路是這樣的:
1.用div來定義語義結構；給頁面分塊。
2.然後用CSS來美化網頁，如加入背景、線條邊框、對齊屬性等；
3.最後在這個CSS定義的盒子內加上內容，如文字、圖片等
代碼示範：（簡單分塊）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
</head>
<style type="text/css">
body{
background-color:#FFCCFF;
margin:1px 0px 0px 0px;
padding:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:400px;
text-align:center;
height:900px;
}
#header{
width:auto;
margin:0 auto;
height:100px;
background:#FFCC99;
border:1px solid #0000FF;
}
#main{
width:auto;
margin:0 auto;
height:200px;
background:#FFFFCC;
border:1px solid #FF0000;
}
#Footer{
width:auto;
margin:0 auto;
height:100px;
background:#00FFFF;
border:1px solid #9999FF;
}
</style>
<body>
<div id="container">
<div id="header">頭部分 包括導航等box</div>
<div id="main">內容部分 包括頁面上的一切內容/box（文字，圖片，資訊，諮詢......）</div>
<div id="Footer">著作權部分 網站作者 著作權 許可證以及超級串連）</div>
</div>
</body>
</html>
顯示效果：
然後就可以具體按塊（或者說是box）給每個塊 進行一個css的屬性設定。比如background-color背景顏色設定 background-image背景圖案，font-size:字型大小，color:字型顏色等 都可以達到很不一般的效果哦。
在製作網頁的時候：CSS中的盒子寬度計算,最好的瀏覽效果是960-970px（參考sina、阿里吧吧、雅虎等大網站都是這個寬度,不過只要設定寬度在1004px之內，顯示都是正常的）
其次，就是在寫CSS的時候，要注意IE瀏覽器和FF瀏覽器的相容問題，要考慮到使用者在瀏覽我們網站時候，他瀏覽器的顯示效果。
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
