如何布局網(wǎng)頁(yè)主體

　　導語(yǔ)：網(wǎng)頁(yè)的設計中主體的架構是體現設計師水平的一步，同時(shí)也是初學(xué)者必過(guò)一個(gè)技術(shù)門(mén)檻，通過(guò)DIV+CSS布局可以擺脫表格布局的桎梏，實(shí)現靈活控制各個(gè)網(wǎng)頁(yè)版塊。以下提供簡(jiǎn)單的主體布局。

　　1、首先編輯HTML代碼，輸入網(wǎng)頁(yè)內容，通過(guò)DIV容器劃分出各個(gè)版塊。此處將主體分為左右兩欄，使用800px寬度頁(yè)面。

　　2、然后在外部樣式表中加入CSS樣式，使用浮動(dòng)效果使頁(yè)面居中浮動(dòng)，同時(shí)此處的左側寬度和右側寬度應該盡量遵循一定的美術(shù)比例，一般使用黃金比例。800px固定寬度的參考比例為：800px=475px(左)+295px(右)+30px(自適應)。

　　3、接著(zhù)編輯右側導航或者簡(jiǎn)介，使用無(wú)序列表來(lái)創(chuàng )建。并且在CSS樣式表中調整樣式，此處在標題處加入下劃線(xiàn)強調出內容。

　　4、到此，通過(guò)DIV+CSS創(chuàng )建的主體架構基本出來(lái)了。但是要進(jìn)一步完善，可以在網(wǎng)頁(yè)中插入圖片，調整margin,padding等盒子模型，實(shí)現網(wǎng)頁(yè)的美化。

　　注意事項

　　圖片需要在PS下美化調整大小才能加入網(wǎng)頁(yè)

　　自學(xué)經(jīng)驗，僅供參考。

【如何布局網(wǎng)頁(yè)主體】相關(guān)文章：

如何用css進(jìn)行網(wǎng)頁(yè)布局07-06

Dreamweaver如何利用層布局網(wǎng)頁(yè)07-19

網(wǎng)頁(yè)布局方式07-16

網(wǎng)頁(yè)的排版與布局08-26

網(wǎng)頁(yè)布局基礎08-10

網(wǎng)頁(yè)設計的布局08-13

網(wǎng)頁(yè)設計布局的理解10-14

網(wǎng)頁(yè)布局設計的技巧10-23

網(wǎng)頁(yè)設計布局方法11-10