Web前端開發(fā) 課件 第10章 網(wǎng)頁布局

第10章網(wǎng)頁布局主講教師：朱鐵櫻《Web前端開發(fā)》10.1布局概述布局是指對網(wǎng)頁中的元素進行合理的排布，使網(wǎng)頁中的元素排列清晰、美觀易讀。排版后未排版標準文檔流：指元素根據(jù)塊元素或行內(nèi)元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認的排列方式。網(wǎng)頁設(shè)計中布局方法有多種，本項目重點介紹兩種布局方法：浮動布局和彈性布局。彈性布局是一種平面布局思維，其核心是兩根軸線——主軸和交叉軸。這兩根軸線可以處理元素水平或垂直方向上的分布和排列。彈性布局浮動布局浮動布局是指通過浮動屬性來實現(xiàn)元素橫向排列的一種布局模式。浮動布局主要依靠DIV+CSS技術(shù)來實現(xiàn)。DIV負責(zé)內(nèi)容區(qū)域的分配，CSS負責(zé)樣式效果的呈現(xiàn)。10.1布局概述單列布局是網(wǎng)頁布局的基礎(chǔ)，所有復(fù)雜的布局都是在單列布局上演變而來的。10.1布局概述兩列布局是將網(wǎng)頁內(nèi)容被分為了左右兩部分。這樣能夠合理利用頁面空間，讓頁面內(nèi)容看起來更加豐富。10.1布局概述三列布局是兩列布局的演變，只是將主體內(nèi)容分成了左、中、右三部分。10.1布局概述為了提高網(wǎng)頁制作的效率，在布局時通常需要遵循一定的布局流程，具體如下。步驟一：確定頁面的版心寬度10.1布局概述為了網(wǎng)站的美觀，網(wǎng)頁中的一些模塊，例如頭部、導(dǎo)航、焦點圖或底部等經(jīng)常需要通欄顯示。版心：頁面的有效使用面積，是主要元素以及內(nèi)容所在的區(qū)域。常見的寬度值為1000像素、1200像素、1400像素等。在運用CSS布局之前，首先對頁面有一個整體的規(guī)劃，包括頁面中有哪些模塊，以及各模塊之間關(guān)系。步驟二：分析頁面中的模塊10.1布局概述當(dāng)分析完頁面模塊后，可以使用浮動布局或者彈性布局控制網(wǎng)頁的各個模塊。初學(xué)者在制作網(wǎng)頁時，一定要養(yǎng)成分析頁面布局的習(xí)慣，這樣可以提高網(wǎng)頁制作的效率。步驟三：控制網(wǎng)頁的各個模塊10.1布局概述注意：初學(xué)者在制作網(wǎng)頁時，一定要養(yǎng)成實時測試頁面的好習(xí)慣，避免完成頁面的制作后，出現(xiàn)難以調(diào)試的bug或兼容性問題。10.1布局概述網(wǎng)頁模塊的命名如果沒有統(tǒng)一的命名規(guī)范進行約束，隨意命名網(wǎng)頁模塊，就會降低網(wǎng)頁代碼的可讀性，讓整個網(wǎng)站的后續(xù)維護工作很難進行。通常網(wǎng)頁模塊的命名需要遵循以下幾個原則。不能占用關(guān)鍵字（例如id="h3"）避免使用中文字符（例如id="導(dǎo)航欄"）用最少的字母達到最容易理解的意義不能以數(shù)字開頭命名（例如id="1box"）網(wǎng)頁模塊命名規(guī)范大駝峰：單詞首字母均采用大寫。小駝峰：第一個單詞首字母小寫。駝峰命名由小寫字母和下畫線組成，單詞之間用下畫線連接。蛇形命名對于一些復(fù)雜的網(wǎng)頁模塊，經(jīng)常使用一些長詞或詞組來命名。在使用長詞或詞組命名網(wǎng)頁模塊時，可以使用“-”（中橫線）連接，也可以使用一些編程中常用的命名方法，具體如下。10.1布局概述FirstNamefirstNamefirst_name網(wǎng)頁模塊常用的命名方式-1相關(guān)模塊命名相關(guān)模塊命名頭header內(nèi)容content/container導(dǎo)航nav尾footer側(cè)欄sidebar欄目column左邊、右邊、中間leftrightcenter登錄條loginbar標志logo廣告banner頁面主體main熱點hot10.1布局概述相關(guān)模塊命名相關(guān)模塊命名新聞news下載download子導(dǎo)航subnav菜單menu子菜單submenu搜索search友情鏈接frIEndlink版權(quán)copyright滾動scroll標簽頁tab文章列表list提示信息msg網(wǎng)頁模塊常用的命名方式-210.1布局概述相關(guān)模塊命名相關(guān)模塊命名小技巧tips欄目標題title加入joinus指南guild服務(wù)service

注冊register狀態(tài)status投票vote合作伙伴partner

小技巧tips欄目標題title網(wǎng)頁模塊常用的命名方式-310.1布局概述CSS文件命名CSS文件命名主要樣式master基本樣式base模塊樣式module版面樣式layout主題themes專欄columns文字font表單forms打印print

CSS文件常用的命名方式-410.1布局概述標準文檔流組成塊級元素（block）<h1>…<h6>、<p>、<div>、列表行內(nèi)元素（inline）<span>、<a>、<img/>、<strong>...行內(nèi)塊元素（inline-block）行內(nèi)標簽可以包含于塊級標簽中，成為它的子元素，而反過來則不成立。!10.1布局概述元素的分類值說明block塊級元素的默認值，元素會被顯示為塊級元素，該元素前后會帶有換行符inline內(nèi)聯(lián)元素的默認值。元素會被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符inline-block行內(nèi)塊元素，元素既具有內(nèi)聯(lián)元素的特性，也具有塊元素的特性none設(shè)置元素不會被顯示17/3910.1布局概述display屬性塊級元素與行級元素的轉(zhuǎn)變控制塊元素排到一行控制元素的顯示和隱藏10.2浮動浮動屬性也被稱為float屬性，用于設(shè)置元素浮動。float屬性的基本語法格式選擇器{float:屬性值;}選擇器用于選擇設(shè)置浮動的元素。float屬性用于設(shè)置浮動。float屬性的常用屬性值有三個，具體如下。屬性值含義left元素向左浮動right元素向右浮動none元素不浮動（默認屬性值）10.2浮動10.2浮動元素的浮動練習(xí)由于浮動元素不再占用原文檔流的位置，所以它會對頁面中其他元素的排版產(chǎn)生影響。例如，下圖的段落文本，受到其周圍元素浮動的影響，產(chǎn)生了混排的效果。這時，如果要避免浮動對段落文本的影響，讓<p>標簽獨立顯示，就需要在<p>標簽中添加CSS樣式清除浮動。10.3清除浮動10.3清除浮動在CSS中，常用clear屬性清除浮動。clear屬性的基本語法格式選擇器{clear:屬性值;}屬性值含義left清除左側(cè)浮動的影響right清除右側(cè)浮動的影響both同時清除左右兩側(cè)浮動的影響10.3清除浮動1.使用空標簽清除浮動在浮動元素之后添加空標簽，并對該標簽應(yīng)用“clear:both”樣式。2.使用overflow屬性清除浮動對元素應(yīng)用“overflow:hidden;”樣式。3.使用after偽對象清除浮動（1）需要清除浮動的標簽設(shè)置“height:0;”樣式。（2）需要在偽對象中設(shè)置content屬性，屬性值可以為空。10.3清除浮動案例演示由于子元素和父元素為嵌套關(guān)系，不存在左右對應(yīng)位置，所以使用clear屬性并不能清除子元素浮動對父元素的影響。【結(jié)論】10.3清除浮動10.3清除浮動當(dāng)盒子內(nèi)容超出盒子自身的大小時，內(nèi)容就會溢出。overflow屬性選擇器{overflow:屬性值;}overflow屬性用于規(guī)定溢出內(nèi)容的顯示狀態(tài)。例如，隱藏溢出內(nèi)容、通過滾動條顯示溢出內(nèi)容。overflow屬性的基本語法格式屬性值描述visible內(nèi)容不會被修剪，呈現(xiàn)在元素框之外（默認屬性值）hidden溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的auto溢出內(nèi)容會被隱藏，有溢出內(nèi)容的一側(cè)會產(chǎn)生滾動條，可以通過滾動條查看溢出內(nèi)容scroll溢出內(nèi)容會被隱藏，無論是否有溢出內(nèi)容，瀏覽器會始終顯示滾動條10.3清除浮動10.3清除浮動overflow:visibleoverflow:hiddenoverflow:autooverflow:scroll10.4定位制作網(wǎng)頁時，如果希望網(wǎng)頁中的元素出現(xiàn)在網(wǎng)頁中某個特定的位置，就需要對元素進行精確定位。精確定位元素時，需要設(shè)置定位模式和邊偏移兩部分。定位模式邊偏移定位模式值描述static靜態(tài)定位（默認定位方式）relative相對定位，相對于其原文檔流的位置進行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位fixed固定定位，相對于瀏覽器窗口進行定位選擇器{position:屬性值;}position屬性的基本語法格式在CSS中，position屬性用于設(shè)置元素的定位模式。10.4定位邊偏移在CSS中，通過邊偏移屬性top、bottom、left或right，可以精確定義定位元素的位置。邊偏移屬性的具體介紹如下。邊偏移屬性描述top設(shè)置頂端偏移量，定義元素相對于其父元素上邊線的距離bottom設(shè)置底部偏移量，定義元素相對于其父元素下邊線的距離left設(shè)置左側(cè)偏移量，定義元素相對于其父元素左邊線的距離right設(shè)置右側(cè)偏移量，定義元素相對于其父元素右邊線的距離10.4定位10.4定位當(dāng)position屬性的取值為static時，可以將標簽定位于靜態(tài)位置。所謂靜態(tài)位置就是各個標簽在HTML文檔流中默認的位置。當(dāng)沒有定義position屬性時，說明該標簽沒有自己的位置。這個說法正確嗎？10.4.1靜態(tài)定位錯誤。任何標簽在默認狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當(dāng)沒有定義position屬性時，并不是說明該標簽沒有自己的位置，它會遵循默認值顯示為靜態(tài)位置。10.4定位10.4.1靜態(tài)定位10.4定位當(dāng)position屬性的取值為relative時，可以將標簽相對定位。10.4.2相對定位10.4定位當(dāng)position屬性的取值為absolute時，可以將標簽的定位模式設(shè)置為絕對定位。例如，設(shè)置絕對定位如下。10.4.3絕對定位如果在網(wǎng)頁布局時，只對元素應(yīng)用絕對定位，當(dāng)用戶放大或縮小瀏覽器窗口時，網(wǎng)頁布局可能因某些元素位置改變變得混亂。該怎么辦？在網(wǎng)頁布局中，一般需要子元素相對于其父元素的位置保持不變，也就是讓子元素依據(jù)其父元素的位置進行絕對定位，父元素進行相對定位。如果父元素不需要移動位置，可以不對父元素設(shè)置偏移量。這樣父元素既不會失去標準文檔流中的空間，同時還能保證子元素依據(jù)父元素準確定位。10.4定位10.4.3絕對定位父相子絕10.4定位注意：1.如果僅對標簽設(shè)置絕對定位，不設(shè)置邊偏移，則標簽的位置不變，但該標簽不再占用標準文檔流中的空間，會與上移的后續(xù)標簽重疊。2.定義多個邊偏移屬性時，如果left和right參數(shù)值沖突，以left參數(shù)值為準；如果top和bottom參數(shù)值沖突，以top參數(shù)值為準。10.4.3絕對定位10.4定位當(dāng)position屬性的取值為fixed時，即可將標簽的定位模式設(shè)置為固定定位。當(dāng)對元素設(shè)置固定定位后，該元素將脫離標準文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。10.4.4固定定位10.4定位當(dāng)對多個元素同時設(shè)置定位時，定位標簽之間有可能會發(fā)生重疊定位導(dǎo)致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，取值為正整數(shù)、負整數(shù)和0。數(shù)值越大，標簽越居上。解決重疊問題10.4.5層疊等級屬性浮動和定位練習(xí)10.5彈性布局面對多終端設(shè)備出現(xiàn)的尷尬分辨率太大，網(wǎng)頁兩邊留白太多分辨率太小，頁面顯示不完全*10.5彈性布局固定布局窄屏下的顯示效果*如何解決上述多終端設(shè)備出現(xiàn)的尷尬？浮動+百分比布局彈性布局固定布局寬屏下的顯示效果10.5彈性布局浮動+百分比布局好處網(wǎng)頁內(nèi)容寬度自適應(yīng)多設(shè)備都適用.box{width:100%;border:1pxsolid#000000;padding:10px;}aside{width:30%;float:left;background:red;padding:10px;}article{width:65%;float:left;margin-left:10px;background:yellow;}*10.5彈性布局彈性布局是指元素可以根據(jù)顯示區(qū)域大小進行自適應(yīng)的布局模式，該布局模式可以很方便的對元素進行分布和對齊。Flex布局的優(yōu)勢可以讓盒子里面的元素排在一行盒子里面的元素是高度相同10.5.1什么是彈性布局（1）彈性布局原理彈性布局采用軸式布局，在彈性布局中默認存在兩條軸——主軸和交叉軸。①主軸：用于設(shè)置元素的排列方向。②交叉軸：用于設(shè)置元素垂直于主軸的排列方向。當(dāng)主軸方向為水平時，交叉軸方向為垂直。當(dāng)主軸方向為垂直時，交叉軸方向為水平。10.5彈性布局10.5.1什么是彈性布局（2）創(chuàng)建Flex容器為某個元素指定display屬性，并設(shè)置屬性值為flex或inline-flex即可創(chuàng)建Flex容器。10.5彈性布局10.5.1什么是彈性布局Flex容器屬性是指為轉(zhuǎn)換為Flex容器的HTML標簽添加的CSS屬性，可以設(shè)置容器中Flex項目的排列樣式。Flex容器屬性包括flex-direction屬性、flex-wrap屬性、flex-flow屬性、justify-content屬性、align-items屬性、align-content屬性。屬性描述flex-direction指定彈性盒子中子元素的排列方式flex-wrap設(shè)置當(dāng)彈性盒子的子元素超出父容器時是否換行flex-flowflex-direction和flex-wrap兩個屬性的簡寫justify-content設(shè)置彈性盒子中元素在主軸（橫軸）方向上的對齊方式align-items設(shè)置彈性盒子中元素在側(cè)軸（縱軸）方向上的對齊方式align-content修改flex-wrap屬性的行為，類似align-items，但不是設(shè)置子元素對齊，而是設(shè)置行對齊10.5彈性布局10.5.2容器屬性flex-direction屬性用于設(shè)置主軸上Flex項目的排列方向。（1）flex-direction屬性主軸為水平方向，F(xiàn)lex項目排列起點在左側(cè)，按照自左至右排列。row主軸為垂直方向，F(xiàn)lex項目排列起點在上端，按照自上至下排列。column主軸為水平方向，F(xiàn)lex項目排列起點在右側(cè)，按照自右至左排列。row-reverse主軸為垂直方向，F(xiàn)lex項目排列起點在下端，按照自下至上排列。column-reverse①③④②flex-direction屬性的屬性值10.5彈性布局10.5.2容器屬性flex-wrap屬性用于設(shè)置Flex項目是否換行排列。nowrapflex-wrap屬性的屬性值Flex項目不換行，排列在一排wrapFlex項目換行，主軸為水平方向，第一行在上方，主軸為垂直方向，第一列在左側(cè)。wrap-reverseFlex項目換行，主軸為水平方向，第一行在下方，主軸為垂直方向，第一列在右側(cè)。（2）flex-wrap屬性10.5彈性布局10.5.2容器屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的復(fù)合屬性，可以同時設(shè)置Flex項目的排列方向和換行效果。例如：flex-direction:column-reverse;flex-wrap:wrap-reverse;上述代碼等價于：flex-flow:column-reversewrap-reverse;（3）flex-flow屬性10.5彈性布局10.5.2容器屬性（4）justify-content屬性justify-content屬性用于設(shè)置Flex項目在主軸上的對齊方式。flex-startflex-endcenterspace-betweenspace-aroundFlex項目相對于主軸排列起點對齊。Flex項目相對于主軸排列終點。Flex項目相對于主軸居中對齊。Flex項目相對于主軸兩端對齊，并且Flex項目之間的間距相等。Flex項目之間間距相等，兩端保留間距相等，兩端保留間距為Flex項目之間間距的一半。10.5彈性布局10.5.2容器屬性align-items屬性用于設(shè)置Flex項目在交叉軸上的對齊方式。flex-startflex-endcenterbaselinestretchFlex項目在交叉軸的排列起點對齊Flex項目在交叉軸的排列終點對齊。Flex項目在交叉軸的中間位置對齊。Flex項目的第一行文字的基線對齊。如果Flex項目未設(shè)置高度或者設(shè)為auto，該Flex項目將占滿整個容器的高度。（5）align-items屬性10.5彈性布局10.5.2容器屬性align-content屬性將所有行作為一個整體，設(shè)置對齊方式。（6）align-content屬性10.5彈性布局10.5.2容器屬性Flex容器屬性用于整體控制Flex項目的排列方式，如果想要單獨控制某個Flex項目，就需要為這個Flex項目指定對應(yīng)的屬性，這些屬性被稱為Flex項目屬性。Flex項目屬性包括order屬性、flex-grow屬性、flex-shrink屬性、flex-basis屬性、flex屬性、align-self屬性。屬性描述order設(shè)置容器中項目的排列順序，數(shù)值越小，排列越靠前，默認為0。flex-grow定義容器中項目的放大比例，默認為0。flex-shrink定義容器中項目的縮小比例，默認為1。flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（mainsize），它的默認值為auto。flexflex-grow，flex-shrink，flex-basis三個屬性的簡寫。默認值為01auto，后兩個屬性可選。align-self在容器中項目上使用，允許單個項目有與其他項目不一樣的對齊方式，默認值為auto，用來覆蓋容器的align-items屬性10.5彈性布局10.5.3項目屬性order屬性用于設(shè)置Flex項目的排列位置，屬性值為數(shù)字。數(shù)字越小，該Flex項目排列位置越靠前，默認屬性值為0。（1）order屬性10.5彈性布局10.5.3項目屬性flex-grow屬性用于設(shè)置Flex項目的擴展比例，其屬性值為0和正整數(shù)。（2）flex-grow屬性flex-grow屬性默認屬性值為0，此時Flex元素不會擴展。當(dāng)取值為正整數(shù)時，F(xiàn)lex元素會按照對應(yīng)的比例占據(jù)剩余空間。10.5彈性布局10.5.3項目屬性（2）flex-grow屬性10.5彈性布局10.5.3項目屬性flex-shrink屬性用于設(shè)置Flex項目的收縮比例，取值為0和正整數(shù)。（3）flex-shrink屬性flex-shrink屬性默認屬性值為1，當(dāng)Flex容器空間不足時，F(xiàn)lex元素將等比例自動收縮。將某個Flex元素的flex-shrink屬性值設(shè)置為0，則該Flex元素不收縮，會溢出Flex容器將flex-shrink屬性值設(shè)置為其他正整數(shù)，F(xiàn)lex元素將按照設(shè)置數(shù)字比例進行收縮。10.5彈性布局10.5.3項目屬性flex-basis屬性用設(shè)置Flex項目在擴展或收縮之前的尺寸。flex-basis屬性