div+css布局快速入門

1、2024/3/29,PHP+MYSQL動態(tài)網(wǎng)頁設(shè)計,主講人：張瑞林,聯(lián)系方式：Email:12590@sina.com,DIV+CSS布局快速入門,理解CSS盒子模型,DIV+CSS布局快速入門,1.構(gòu)思（頁面整體外觀）2.勾畫（PhotoShop或FireWorks ）3.分解4.畫出頁面布局5.構(gòu)建整體DIV結(jié)構(gòu)6.編寫基本CSS代碼7.對每一個部分進行詳細制作,DIV+CSS布局快速入門,1.構(gòu)思（頁面整體外觀）,網(wǎng)頁

2、設(shè)計第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要用PhotoShop或FireWorks等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來,DIV+CSS布局快速入門,2. 勾畫,DIV+CSS布局快速入門,3. 分解,DIV+CSS布局快速入門,4. 畫出頁面布局,5.構(gòu)建整體DIV結(jié)構(gòu),Body{},#container{},#header{},#pagebody{},#sidebar{},#mainbody{},#footer{},,,

3、,,,,　　　　　　　　　　　　　　　　　　 　　　　　　　　　　,6.編寫基本CSS代碼,body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}/*頁面層容器*/#container {width:100%}/*頁面頭部*/#Header {width:800px;margin:0 auto;height:100px;

4、background:#FFCC99}/*頁面主體*/#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}/*頁面底部*/#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF},/*基本信息*/,#Sidebar { margin:5px; width:160px;

5、height:300px; border:1px solid green; float:left;}#MainBody {margin:5px; width:510px; height:300px; border:1px solid #000; float:right; },6.編寫基本CSS代碼,常用的CSS代碼的含義,font:12px Tahoma；這里使用了縮寫，完整的代碼應(yīng)該是：font-size:12px;font-

6、family:Tahoma；說明字體為12像素大小，字體為Tahoma格式；margin:0px；也使用了縮寫，完整的應(yīng)該是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px順序是 上 / 右 / 下 / 左，你也可以書寫為margin:0(縮寫)；以上樣式說明body部分對上右下左邊距為0像素，

7、如果使用auto則是自動調(diào)整邊距，另外還有以下幾種寫法：margin:0px auto；說明上下邊距為0px，左右為自動調(diào)整；,6.編寫基本CSS代碼,常用的CSS代碼的含義,text-align:center文字對齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對齊。background:#FFF設(shè)置背景色為白色，這里顏色使用了縮寫，完整的應(yīng)該是background:#FFFFFF。background可以用來給指定的

8、層填充背景色、背景圖片，以后我們將用到如下格式：background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整個層，使用bg.gif做為背景圖片，top left表示圖片位于當(dāng)前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個層。top/right/left/bottom/center用于定位背景圖片，分別表示 上 / 右 /

9、 下 / 左 / 中；還可以使用background:url('bg.gif') 20px 100px;表示X座標(biāo)為20像素，Y座標(biāo)為100像素的精確定位；repeat/no-repeat/repeat-x/repeat-y分別表示 填充滿整個層 / 不填充 / 沿X軸填充 / 沿Y軸填充。,6.編寫基本CSS代碼,如何使頁面居中？,將代碼保存后可以看到，整個頁面是居中顯示的，那么究竟是什么原因使得頁面居中顯示呢

10、？是因為我們在#container中使用了以下屬性：margin:0 auto;按照前面的說明，可以知道，表示上下邊距為0，左右為自動，因此該層就會自動居中了。如果要讓頁面居左，則取消掉auto值就可以了，因為默認就是居左顯示的。通過margin:auto我們就可以輕易地使層自動居中了。,7.編寫各部份詳細的CSS代碼,當(dāng)我們寫好了頁面大致的DIV結(jié)構(gòu)后，我們就可以開始細致地對每一個部分進行制作了。,/*基本信息*/body

11、 {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited {font-size:12px;text-decoration:none;}a:hover{}/*頁面層容器*/#container {width:800px;margin:10px auto},對層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示,7.編

12、寫各部份詳細的CSS代碼,　　　　　　　首頁　　　　　　　　博客　　　　　　　　設(shè)計　　　　　　　　相冊　　　　　　　　論壇　　　　　　　　關(guān)于　　　　　　　　　,TOP部份菜單代碼,/*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited {font-size:12px;

13、text-decoration: none;}a:hover{}/*層容器*/#container {width:800px;height:600px;margin:10px auto}/*頭部*/#header {background:url(logo.gif) no-repeat}#menu {padding:20px 20px 0 0}#menu ul {float:right;list-style:none;ma

14、rgin:0px;}#menu ul li {float:left;display:block;line-height:30px;margin:0 10px}#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}#menu ul li a:hover{}.menuDiv {width:1px;height:28px;background:#99

15、9}#banner {background:url(banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both}/*主體*/#PageBody {width:800px;margin:0 auto;height:200px; border:1px solid red}/*