深圳做網(wǎng)站時網(wǎng)頁布局常見的方式和方法詳解

<p> 深圳做網(wǎng)站時網(wǎng)頁布局常見的方式和方法詳解，網(wǎng)頁制作的時候，不僅僅要考慮網(wǎng)頁布局的效果和方式更多的還需要考慮網(wǎng)頁的整體效果和版面的結構特征，只有將這個細小的東西進行合理的布局和調整，達到預想的平衡效果的時候，<a href="http://www.szbc888.com" target="_blank"><strong>深圳網(wǎng)站制作</strong></a>出來給人們的視覺感覺才會更加的完美的，當然了，一般網(wǎng)站布局是有講究的，并不是隨便的去擺放就可以了，一定要根據(jù)網(wǎng)站的主次，網(wǎng)站的重點和次要的順序進行合理的安排，只有這樣子制作出來的網(wǎng)站更加的符合人們的瀏覽習慣和預期的，接下來我們來聽聽<a href="http://www.szbc888.com" target="_blank"><strong>深圳做網(wǎng)站的</strong></a>公司是如何做的網(wǎng)站的時候排版布局的。 </p> <p> 1.標準流<br /> 標準流時瀏覽器的默認排版方式，在標準流中CSS元素分為以下三類元素<br /> 塊級元素<br /> 獨占一行（所以垂直排版），可以設置寬度和高度,如p,div,h,ul,ol,ul<br /> 行內元素<br /> 在同一行顯示（所以水平排版），不能設置寬度和高度 a,img,select,input<br /> 行內塊級元素<br /> 在同一行顯示（水平排版），可以設置寬度和高度。<br /> 標準流里面主要是根據(jù)設置元素的display為inline，block，inline-block來改變元素的顯示模式。可以很方便的控制元素的水平和垂直排版的，也能夠控制元素的大小。但是僅僅依靠標準流，許多網(wǎng)頁布局效果無法實現(xiàn)。<br /> 2. 浮動流排版<br /> 浮動流只有水平排版，只能設置某個元素左對齊或者右對齊，是一種半脫離標準流的排版方式，可以通過設置元素的float屬性設置浮動方向，當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣，如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素。<br /> 1.浮動流中沒有居中對齊, 也就是沒有center這個取值<br /> 2.在浮動流中是不可以使用margin: 0 auto;<br /> 特點:<br /> 1.在浮動流中是不區(qū)分塊級元素/行內元素/行內塊級元素的無論是級元素/行內元素/行內塊級元素都可以水平排版<br /> 2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設置寬高<br /> 3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像<br /> 實現(xiàn)案例<br /> 2.1 浮動元素貼靠現(xiàn)象<br /> 規(guī)則<br /> 如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示<br /> 如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元開始往前貼靠<br /> 如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊<br /> 2.2 文字環(huán)繞現(xiàn)象<br /> 浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現(xiàn)象。<br /> 2.3 浮動元素的高度<br /> 在標準流中內容的高度可以撐起父元素的高度，在浮動流中浮動的元素是不可以撐起父元素的高度的。<br /> 清除浮動影響<br /> 浮動的元素在標準流中默認不占位置，但是有點時候確實需要浮動的元素占據(jù)位置，否則頁面會塌陷，有以下幾種方式解決浮動帶來的問題。<br /> 給浮動元素的一個父標簽設置高度，比如給上段代碼的div設置個高度。這個方法不常用，盡量不寫高度。<br /> clear屬性<br /> 可以給浮動元素的后面的盒子添加clear屬性。<br /> none: 默認取值, 按照浮動元素的排序規(guī)則來排序(左浮動找左浮動, 右浮動找右浮動)<br /> left: 不要找前面的左浮動元素<br /> right: 不要找前面的右浮動元素<br /> both: 不要找前面的左浮動元素和右浮動元素<br /> 3.設置overflow屬性<br /> 1overflow: hidden的作用很多不局限于解決浮動的元素在標準流中不占位置的問題。<br /> 可以將超出標簽范圍的內容裁剪掉<br /> 清除浮動<br /> 可以通過overflow: hidden;讓里面的盒子設置margin-top之后, 外面的盒子不被頂下來<br /> 3.定位流排版<br /> 3.1 相對定位<br /> 相對定位就是相對于自己以前在標準流中的位置來移動,4用于對元素進行微調或者配合絕對定位來使用。<br /> 相對定位是不脫離標準流的, 會繼續(xù)在標準流中占用一份空間<br /> 在相對定位中同一個方向上的定位屬性只能使用一個，<br /> 由于相對定位是不脫離標準流的, 所以在相對定位中是區(qū)分塊級元素/行內元素/行內塊級元素<br /> 由于相對定位是不脫離標準流的, 并且相對定位的元素會占用標準流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的布局。<br /> 3.2絕對定位<br /> 絕對定位的元素脫離標準流，不區(qū)分塊級元素/行內元素/行內塊級元素。<br /> 3.2.1 參考點選取規(guī)則<br /> 默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點只要是這個絕對定位元素的祖先元素都可以<br /> 指的定位流是指絕對定位/相對定位/固定定位定位流中只有靜態(tài)定位不行如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點<br /> 3.3固定定位<br /> 固定定位和前面學習的背景關聯(lián)方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動<br /> 1.固定定位的元素是脫離標準流的, 不會占用標準流中的空間<br /> 2.固定定位和絕對定位一樣不區(qū)分行內/塊級/行內塊級 </p> <p> 一般來講，導航欄要在“第一屏”能顯示出來，但是有時第一屏可能會小于上面所說的435px，積于這點考慮，那種橫向放置的導航欄要優(yōu)于縱向的導航欄考慮，原因很簡單：如果瀏覽者的第一屏很矮，橫向的仍能全部看到，而縱向的就很難說了，因為窗口的寬度一般是不會受瀏覽器設置影響的，而縱向的則不確定性要大的多。 </p> <p> 1.“國”字型： <a href="http://www.szbc888.com" target="_blank"><strong>深圳網(wǎng)頁設計</strong></a>也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。這種結構是我們在網(wǎng)上見到的差不多最多的一種結構類型。<br /> 2.拐角型： 這種結構與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。<br /> 3.標題正文型： 這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。<br /> 4.左右框架型： 這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結構非常清晰，一目了然。<br /> 5.上下框架型： 與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。<br /> 6.綜合框架型： 上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似于“拐角型”結構的，只是采用了框架結構。<br /> 7.封面型： 這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。<br /> 8.Flash型：<a href="http://www.szbc888.com" target="_blank"><strong>深圳做網(wǎng)頁</strong></a>其實這與封面型結構是類似的，只是這種類型采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差于傳統(tǒng)的多媒體。<br /> 9.變化型：<a href="http://www.szbc888.com" target="_blank"><strong>深圳制作網(wǎng)頁</strong></a>即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現(xiàn)的功能的實質是那種上、左、右結構的綜合框架型。 </p>