網(wǎng)站建設(shè)中網(wǎng)頁布局大致可分為：“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，以下分別論述：
1、國字類型：也被稱為同字型，頂部是網(wǎng)站的標題、橫幅廣告條，然后是網(wǎng)站的主體內(nèi)容個，而左右分別是一些比較小的內(nèi)容條，中間就是主要內(nèi)容，最底部是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這也是現(xiàn)在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型；
2、拐角型：這種類型其實與國字型很相近的，只是在形式上不一樣，最上面的部分是網(wǎng)站的標題以及網(wǎng)站的橫幅廣告條，一種很常見的類型是最上面是標題及廣告，左側(cè)是導(dǎo)航鏈接；
3、標題正文類型：上面是網(wǎng)站的標題，或者是類似的東西，接著就是網(wǎng)站的正文內(nèi)容，例如是一些文章或者是注冊登錄頁面；
4、左右框架類型：這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般布局是：左邊是導(dǎo)航鏈接，最上面有時是一個小的標題或標致，而右面就是主要內(nèi)容，最常使用是論壇網(wǎng)站，企業(yè)網(wǎng)站中的內(nèi)頁有很多是采用這種布局方式的；這種類型的布局的特點是結(jié)構(gòu)清晰明了；
5、上下框架類型：與左右框架類型類似，只是這種類型是上下兩頁的框架；
6、綜合框架類型：其實就是左右框架類型和上下框架類型的結(jié)合體；
7、封面型：這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，多是精美平面結(jié)合小動畫，再加幾個簡單鏈接或僅是一個“進入”鏈接或無任何提示；
8、Flash型：其實這與封面型結(jié)構(gòu)是類似的，采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體；
9、變化型：即上面幾種類型的結(jié)合與變化，但所實現(xiàn)的功能的實質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型；
首先建立一個DIV，為其命名為“nav”，在DIV中建立一個<ul>無序列表，導(dǎo)航共有幾個欄目，就為列表添加幾個<li>的列表項，為每個列表項中的內(nèi)容加上超鏈接，鏈接到所需的項目頁面。
然后設(shè)置CSS樣式，為列表規(guī)定寬度和高度，去掉列表前面的符號，代碼為：
ul {width:寬度值；height：高度值； list-style:none；}
如果是橫向?qū)Ш?，還需為里面的列表項<li>標簽設(shè)置左浮動的樣式，代碼為：li {float:left;}
每個欄目之間分隔的距離可通過margin（外邊距）屬性來設(shè)置。
html代碼：
<div id="nav">
<ul>
<li>CSS學(xué)習(xí)</li>
<li>學(xué)前準備</li>
<li>入門教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩應(yīng)用</li>
</ul>
</div>
css代碼：
#nav ul{
width:960px;
height:35px;
}
前端，官方的定義是前端就是網(wǎng)站前臺部分，運行在PC端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。 用自己的話來說，前端是網(wǎng)頁給訪問網(wǎng)站的人看的內(nèi)容和頁面。那前端開發(fā)顧名思義就是這些內(nèi)容和頁面中代碼的實現(xiàn)。 不過現(xiàn)在的前端不完全就是網(wǎng)頁設(shè)計，早年的網(wǎng)頁設(shè)計主要是以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。而現(xiàn)在的前端開發(fā)使得現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強大。所以現(xiàn)在的前端開發(fā)，運用到的知識面更加廣泛，難度也更大。 不過，無論怎么發(fā)展，HTML、CSS和JavaScript依然是整個前端開發(fā)的三大基石。所以不論題主是想做移動前端開發(fā)還是web前端開發(fā)，這三樣基礎(chǔ)技術(shù)都必須熟練掌握。 1，HTML是網(wǎng)頁的核心，是一種制作網(wǎng)頁頁面的標準語言，可以消除不同計算機之間信息交流的障礙。因此，它是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言，學(xué)好HTML是成為Web開發(fā)人員的基本條件。HTML是一種標記語言，能夠?qū)崿F(xiàn)Web頁面并在瀏覽器中顯示。 2，CSS是用來進行網(wǎng)頁風(fēng)格設(shè)計，頁面制作完成當(dāng)然需要美化，這時候就會用到CSS，它可以網(wǎng)頁外觀做的更加美觀。 3，JavaScript主要目的是為了解決服務(wù)器端語言，為客戶提供更流暢的瀏覽效果。加入JavaScript，是為了提供了數(shù)據(jù)驗證的基本功能。 學(xué)會這些，當(dāng)然也只是開始，這都是最基礎(chǔ)的部分。學(xué)無止境，要想學(xué)好前端，就要付出百倍的努力。