西安做網(wǎng)站時(shí)網(wǎng)頁布局常見的方式和方法詳解，網(wǎng)頁制作的時(shí)候，不僅僅要考慮網(wǎng)頁布局的效果和方式更多的還需要考慮網(wǎng)頁的整體效果和版面的結(jié)構(gòu)特征，只有將這個(gè)細(xì)小的東西進(jìn)行合理的布局和調(diào)整，達(dá)到預(yù)想的平衡效果的時(shí)候，西安網(wǎng)站制作出來給人們的視覺感覺才會(huì)更加的完美的，當(dāng)然了，一般網(wǎng)站布局是有講究的，并不是隨便的去擺放就可以了，一定要根據(jù)網(wǎng)站的主次，網(wǎng)站的重點(diǎn)和次要的順序進(jìn)行合理的安排，只有這樣子制作出來的網(wǎng)站更加的符合人們的瀏覽習(xí)慣和預(yù)期的，接下來我們來聽聽西安做網(wǎng)站的公司是如何做的網(wǎng)站的時(shí)候排版布局的。

1.標(biāo)準(zhǔn)流
標(biāo)準(zhǔn)流時(shí)瀏覽器的默認(rèn)排版方式，在標(biāo)準(zhǔn)流中CSS元素分為以下三類元素
塊級(jí)元素
獨(dú)占一行（所以垂直排版），可以設(shè)置寬度和高度,如p,div,h,ul,ol,ul
行內(nèi)元素
在同一行顯示（所以水平排版），不能設(shè)置寬度和高度 a,img,select,input
行內(nèi)塊級(jí)元素
在同一行顯示（水平排版），可以設(shè)置寬度和高度。
標(biāo)準(zhǔn)流里面主要是根據(jù)設(shè)置元素的display為inline，block，inline-block來改變?cè)氐娘@示模式。可以很方便的控制元素的水平和垂直排版的，也能夠控制元素的大小。但是僅僅依靠標(biāo)準(zhǔn)流，許多網(wǎng)頁布局效果無法實(shí)現(xiàn)。
2. 浮動(dòng)流排版
浮動(dòng)流只有水平排版，只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊，是一種半脫離標(biāo)準(zhǔn)流的排版方式，可以通過設(shè)置元素的float屬性設(shè)置浮動(dòng)方向，當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素。
1.浮動(dòng)流中沒有居中對(duì)齊, 也就是沒有center這個(gè)取值
2.在浮動(dòng)流中是不可以使用margin: 0 auto;
特點(diǎn):
1.在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的無論是級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
2.在浮動(dòng)流中無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
3.綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像
實(shí)現(xiàn)案例
2.1 浮動(dòng)元素貼靠現(xiàn)象
規(guī)則
如果父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示
如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元開始往前貼靠
如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊或者右邊
2.2 文字環(huán)繞現(xiàn)象
浮動(dòng)元素不會(huì)擋住沒有浮動(dòng)元素中的文字, 沒有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置,這個(gè)就是浮動(dòng)元素字圍現(xiàn)象。
2.3 浮動(dòng)元素的高度
在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度，在浮動(dòng)流中浮動(dòng)的元素是不可以撐起父元素的高度的。
清除浮動(dòng)影響
浮動(dòng)的元素在標(biāo)準(zhǔn)流中默認(rèn)不占位置，但是有點(diǎn)時(shí)候確實(shí)需要浮動(dòng)的元素占據(jù)位置，否則頁面會(huì)塌陷，有以下幾種方式解決浮動(dòng)帶來的問題。
給浮動(dòng)元素的一個(gè)父標(biāo)簽設(shè)置高度，比如給上段代碼的div設(shè)置個(gè)高度。這個(gè)方法不常用，盡量不寫高度。
clear屬性
可以給浮動(dòng)元素的后面的盒子添加clear屬性。
none: 默認(rèn)取值, 按照浮動(dòng)元素的排序規(guī)則來排序(左浮動(dòng)找左浮動(dòng), 右浮動(dòng)找右浮動(dòng))
left: 不要找前面的左浮動(dòng)元素
right: 不要找前面的右浮動(dòng)元素
both: 不要找前面的左浮動(dòng)元素和右浮動(dòng)元素
3.設(shè)置overflow屬性
1overflow: hidden的作用很多不局限于解決浮動(dòng)的元素在標(biāo)準(zhǔn)流中不占位置的問題。
可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
清除浮動(dòng)
可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來
3.定位流排版
3.1 相對(duì)定位
相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng),4用于對(duì)元素進(jìn)行微調(diào)或者配合絕對(duì)定位來使用。
相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)，
由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置, 所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性的時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局。
3.2絕對(duì)定位
絕對(duì)定位的元素脫離標(biāo)準(zhǔn)流，不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素。
3.2.1 參考點(diǎn)選取規(guī)則
默認(rèn)情況下所有的絕對(duì)定位的元素, 無論有沒有祖先元素, 都會(huì)以body作為參考點(diǎn)如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)只要是這個(gè)絕對(duì)定位元素的祖先元素都可以
指的定位流是指絕對(duì)定位/相對(duì)定位/固定定位定位流中只有靜態(tài)定位不行如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個(gè)元素都是定位流, 那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)
3.3固定定位
固定定位和前面學(xué)習(xí)的背景關(guān)聯(lián)方式很像, 背景定位可以讓背景圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng), 而固定定位可以讓某個(gè)盒子不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
1.固定定位的元素是脫離標(biāo)準(zhǔn)流的, 不會(huì)占用標(biāo)準(zhǔn)流中的空間
2.固定定位和絕對(duì)定位一樣不區(qū)分行內(nèi)/塊級(jí)/行內(nèi)塊級(jí)

一般來講，導(dǎo)航欄要在“第一屏”能顯示出來，但是有時(shí)第一屏可能會(huì)小于上面所說的435px，積于這點(diǎn)考慮，那種橫向放置的導(dǎo)航欄要優(yōu)于縱向的導(dǎo)航欄考慮，原因很簡(jiǎn)單：如果瀏覽者的第一屏很矮，橫向的仍能全部看到，而縱向的就很難說了，因?yàn)榇翱诘膶挾纫话闶遣粫?huì)受瀏覽器設(shè)置影響的，而縱向的則不確定性要大的多。

1.“國(guó)”字型： 西安網(wǎng)頁設(shè)計(jì)也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。
2.拐角型： 這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。
3.標(biāo)題正文型： 這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊(cè)頁面等就是這種類。
4.左右框架型： 這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)致，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。
5.上下框架型： 與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。
6.綜合框架型： 上頁兩種結(jié)構(gòu)的結(jié)合，相對(duì)復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。
7.封面型： 這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫，放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁，如果說處理的好，會(huì)給人帶來賞心悅目的感覺。
8.Flash型：西安做網(wǎng)頁其實(shí)這與封面型結(jié)構(gòu)是類似的，只是這種類型采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強(qiáng)大的功能，頁面所表達(dá)的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體。
9.變化型：西安制作網(wǎng)頁即上面幾種類型的結(jié)合與變化，比如本站在視覺上是很接近拐角型的，但所實(shí)現(xiàn)的功能的實(shí)質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型。