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

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

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

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

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