DIV+CSS布局快速入門.ppt

1、2020/8/10,PHP+MYSQL動態(tài)網(wǎng)頁設(shè)計,主講人：張瑞林,聯(lián)系方式：Email:,DIV+CSS布局快速入門,理解CSS盒子模型,DIV+CSS布局快速入門,1.構(gòu)思（頁面整體外觀） 2.勾畫（PhotoShop或FireWorks ） 3.分解 4.畫出頁面布局 5.構(gòu)建整體DIV結(jié)構(gòu) 6.編寫基本CSS代碼 7.對每一個部分進行詳細(xì)制作,DIV+CSS布局快速入門,1.構(gòu)思（頁面整體外觀）,網(wǎng)頁設(shè)計第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要用PhotoShop或FireWorks等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來,DIV+CSS布局快速入門,2. 勾畫,DIV+CSS

2、布局快速入門,3. 分解,DIV+CSS布局快速入門,4. 畫出頁面布局,5.構(gòu)建整體DIV結(jié)構(gòu),Body,#container,#header,#pagebody,#sidebar,#mainbody,#footer, ,6.編寫基本CSS代碼,body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; /*頁面層容器*/#container width:100% /*頁面頭部*/#Header width:800px;margin:0 auto;height:100px;background:#FFCC99 /*頁

3、面主體*/#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; height:300px; border:1px solid green; float:left; #MainBody margin:5px; width:510px; height:300px; border:1px s

4、olid #000; float:right; ,6.編寫基本CSS代碼,常用的CSS代碼的含義,font:12px Tahoma；這里使用了縮寫，完整的代碼應(yīng)該是：font-size:12px;font-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(縮寫)；以上樣式說

5、明body部分對上右下左邊距為0像素，如果使用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可以用來給指定的層填充背景色、背景圖片，以后我們將用到如下格式：background:#ccc url(bg.gif) top left no-re

6、peat；表示：使用#CCC(灰度色)填充整個層，使用bg.gif做為背景圖片，top left表示圖片位于當(dāng)前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個層。top/right/left/bottom/center用于定位背景圖片，分別表示 上 / 右 / 下 / 左 / 中；還可以使用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代碼,如何使頁面

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

8、nter;background:#FFF;a:link,a:visited font-size:12px;text-decoration:none;a:hover /*頁面層容器*/#container width:800px;margin:10px auto,對層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示,7.編寫各部份詳細(xì)的CSS代碼,首頁博客設(shè)計相冊論壇關(guān)于,TOP部份菜單代碼,/*基本信息*/ body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; a:link,a:visited font

9、-size:12px;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;margin: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:#999 #banner background:url(banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both /*