HTML5+CSS3+JavaScript網頁設計與制作項目教程課件-項目4 網頁布局與元素的精確定位-DIV+CSS應用

HTML5+CSS3+JavaScript網頁設計與制作項目教程項目1網頁布局與元素的精確定位——CSS+DIV應用目錄ENTERPRISEOPERATIONREPORT04.總結提升03.知識鏈接02.學習目標01.項目導入項目導入PART01項目導入【項目導入】“旅行家——住宿”頁面效果展示CSS+DIV可實現豐富的頁面布局及美化。在進行網頁頁面實現時，我們通常使用盒子模型的定位屬性布局頁面，同時使用盒子模型的邊框及背景屬性美化頁面。本章我們將使用CSS+DIV制作“旅行家——住宿”頁面，案例完成效果如圖4.1所示。學習目標PART02知識目標能力目標理解盒子模型的基本概念，熟悉盒子模型的基本屬性及高級屬性掌握盒子的浮動屬性了解文檔流的概念，掌握盒子模型定位方法掌握HTML元素的類型及其轉換方法能夠布局網頁基本框架能夠靈活運用盒子模型設計并制作網頁模塊知識鏈接PART03一、盒子模型及其基本屬性1、盒子模型簡介我們通常所說的盒子模型，是指將HTML中的元素看成一個矩形容器。我們通過實際生活中的手機盒子來類比CSS盒子模型，以便于更好理解盒子模型的概念，如圖4.2所示：

對于一個CSS盒子，其實際占據的寬高計算方法如下：總寬度=width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和總高度=height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和一、盒子模型及其基本屬性2、DIV結構及其基本屬性在HTML中，我們使用div標記來表示一個盒子，其基本語法格式為：<div屬性=”屬性值”>文本內容</div>盒子模型的基本屬性包括盒子的寬高、邊框、內邊距、外邊距，盒子模型的基本結構如圖4.3所示：

（1）width/height：指盒子內容部分的寬/高，其屬性值可以px為單位，也可以是百分比形式，用來表示其寬度所占其父對象的比例。（2）border：用來設置盒子的邊框屬性，其屬性如表4.1所示：一、盒子模型及其基本屬性樣式屬性屬性說明屬性值border-width設置邊框的寬度（粗細）px（像素值）border-style設置邊框的樣式（線型）none（默認）、solid（單實線）、dashed（虛線）、dotted（電線）、double（雙實線）、groove（3D凹槽）、ridge（菱形邊框）、inset（3D凹邊）、outset（3D凸邊）border-color設置邊框的顏色顏色詞、十六進制顏色碼、rgb值border設置綜合邊框屬性border:寬度樣式顏色;border-radius設置圓角邊像素值、百分比border-image設置圖片邊框border-image:路徑裁剪方式/邊框寬度/邊框擴展距離重復方式;表4.1邊框屬性一、盒子模型及其基本屬性例4-1邊框的基本屬性(代碼略）例4-2圓角邊(代碼略）一、盒子模型及其基本屬性border-image用來設置圖片邊框，其復合寫法語法格式如下border-image:sourceslicewidthoutsetrepeat|initial|inherit;圖片邊框的屬性也可分為一下幾個屬性分別設置，具體如表4.2表4.2border-image圖片邊框屬性屬性名稱描述border-image-source用在邊框的圖片的路徑。border-image-slice圖片邊框向內偏移。border-image-width圖片邊框的寬度。border-image-outset邊框圖像區(qū)域超出邊框的量。border-image-repeat圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。一、盒子模型及其基本屬性例4-3圖片邊框（代碼略）

圖4.6例4-3素材圖圖4.7圖片邊框裁切屬性原理圖4.8圖片邊框超出屬性原理一、盒子模型及其基本屬性（3）padding/margin：用來設置盒子內/外邊距的寬度，其屬性值是一個像素值也可使用auto屬性自動設置邊距?？梢詫⑦吘嘣O置為同樣的值，也可將邊距分四個方向設置為不同的值。其語法格式如下：padding/margin:邊距值padding/margin:上下邊距值左右邊距值padding/margin:上邊距值左右邊距值下邊距值padding/margin:上邊距值右邊距值下邊距值左邊距值

一、盒子模型及其基本屬性例4-4內邊距及外邊距（代碼略）1.box-shadow屬性box-shadow屬性用于給盒子添加陰影效果，其語法格式如下：box-shadow:水平陰影垂直陰影模糊半徑擴展半徑陰影顏色陰影類型

box-shadow屬性有6個屬性值，其具體含義如表4.3所示。表4.3box-shadow屬性值二、DIV高級屬性屬性值說明水平陰影必需，水平陰影的位置。像素值垂直陰影必需，垂直陰影的位置。像素值模糊半徑陰影模糊的范圍。像素值擴展半徑陰影的寬度。像素值，不可為負值陰影顏色CSS顏色規(guī)則陰影類型outset（默認）外陰影，inset內陰影例4-5盒子陰影（代碼略）二、DIV高級屬性2.box-sizing屬性 默認狀態(tài)下，盒子模型的寬高指的是盒子中內容部分的寬高，盒子實際所占寬高是內容寬高加上邊框以及內外邊距的長度。在網頁設計是，繁瑣的計算不符合人們的思維習慣，我們可以使用CSS3的box-sizing屬性，修改盒子寬高的計算規(guī)則，定義盒子的寬高是否包含邊框及內外邊距。box-sizing的語法格式如下：box-sizing:content-box/border-box;box-sizing有兩個可選屬性值，其中content-box是我們默認狀態(tài)下的盒子，這種狀態(tài)下設置盒子的寬高指的是內容部分的寬高；border-box狀態(tài)下設置盒子的寬高指的是盒子邊框（包含邊框）以內的寬高，也就是內容與邊框以及邊距的總和。下面以例4-6展示content-box與border-box的不同。二、DIV高級屬性例4-6box-sizing屬性（代碼略）二、DIV高級屬性3.background屬性在CSS中，我們可以通過background屬性設置盒子的背景，我們不僅可以設置盒子的背景顏色，也可以選用圖片作為盒子的背景。background屬性包含以下幾個屬性，幾個屬性可單獨使用，也可以用background屬性綜合設置背景樣式，具體如表4.4所示：表4.4background屬性二、DIV高級屬性屬性說明background-color規(guī)定要使用的背景顏色。background-image規(guī)定要使用的背景圖像。background-position規(guī)定背景圖像的位置。background-size規(guī)定背景圖片的尺寸。background-repeat規(guī)定如何重復背景圖像。background-origin規(guī)定背景圖片的定位區(qū)域。background-clip規(guī)定背景的繪制區(qū)域。background-attachment規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。background綜合設置背景樣式。（1）background-color：背景顏色background-color屬性可以用來設置盒子的背景顏色，其屬性值可以是一個代表顏色的英文單詞，也可以使用rgb值或十六進制顏色值，其語法格式如下：background-color:rgb/rgba/十六進制顏色值;其中，rgba值可將背景顏色設置為帶有透明度的顏色。設置背景透明度有兩種方式，具體如下：

RGBA模式：RGBA是CSS3新增顏色模式，該模式在RGB模式上增加了一個參數alpha用來設置顏色的透明度，其寫法為rgba（r,g,b,alpha）。alpha參數值可設置成為一個0-1之間的值，值越小顏色的透明度越高，當值為0時，代表顏色完全透明，值為1時，代表顏色完全不透明。

opacity屬性：在CSS3中，使用opacity屬性可以設置元素的透明度，其屬性值和RGBA模式中alpha參數的取值方法相同。二、DIV高級屬性例4-7背景顏色設置（代碼略）二、DIV高級屬性（2）background-image：背景圖片background-image屬性可以用來設置盒子的背景圖片，其屬性值是圖片的url地址。background-image:url(圖片路徑);（3）background-position：圖片位置bacround-position屬性用來設置背景圖片的位置，屬性只有多種設置方法。background-position:xposypos|x%y%|預定義關鍵字;其中：

xposypos：使用不同單位的值來定義圖片的左上角的水平位置和垂直位置，最常用的單位是px，如果僅設置一個值，第二個值默認為50%。

x%y%：使用百分比定義圖片左上角的水平位置和垂直位置，0%0%代表與左上角對齊，50%50%代表與中心點對齊，100%100%代表與右下角對齊。如果僅設置一個值，第二個值默認為50%。預定義關鍵字：使用代表方向的單詞指定元素的位置。水平方向有：left、center、right，垂直方向有：top、center、bottom。使用兩個關鍵字定義位置時，第一個值表示其水平位置，第二個值表示其垂直位置。只有一個值時，第二個值默認為center。二、DIV高級屬性（4）background-size：圖片大小background-size屬性用來設置背景圖片的大小，其語法格式如下：background-size:cover|contain|像素值|百分比;其中：

cover：保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。

contain：此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。像素值：以像素值的方式定義背景圖片的大小。百分比：將計算相對于背景定位區(qū)域的百分比，作為背景圖片的大小。二、DIV高級屬性（5）background-repeat：平鋪方式background-repeat屬性用來設置圖片的平鋪方式，其語法格式如下：background-repeat:repeat|no-repeat|repeat-x|repeat-y;其中：repeat：沿水平和垂直兩個方向平鋪；no-repeat：不平鋪；repeat-x：沿水平方向平鋪；repeat-y：沿垂直方向平鋪。二、DIV高級屬性例4-8背景圖片基本屬性（代碼略）二、DIV高級屬性（6）background-origin：背景繪制區(qū)域background-origin屬性規(guī)定background-position屬性相對于什么位置來定位，即背景圖片左上角的定位起點。其語法格式如下：background-origin:padding-box|border-box|content-box;其中：padding-box：背景圖像相對于內邊距框來定位（默認值）。border-box：背景圖像相對于邊框盒來定位。content-box：背景圖像相對于內容框來定位。（7）background-clip：背景定位區(qū)域background-clip屬性規(guī)定背景的繪制區(qū)域。其語法格式如下：background-clip:border-box|padding-box|content-box;其中：border-box：背景被裁剪到邊框盒。默認padding-box：背景被裁剪到內邊距框。content-box：背景被裁剪到內容框。二、DIV高級屬性例4-9background-origin及background-clip屬性（代碼略）二、DIV高級屬性（8）background-attachment：背景圖片固定方式background-attachment屬性用來設置圖片的固定方式，其語法格式如下：background-attachment:scroll|fixed;其中：

scroll：圖像跟隨頁面滾動（默認值）。

fixed：圖像不跟隨頁面滾動，固定在屏幕某一位置。二、DIV高級屬性例4-10背景圖片固定方式（代碼略）二、DIV高級屬性（9）background：背景復合屬性我們可以分別設置以上背景樣式屬性，也可以使用background屬性綜合設置背景樣式，其語法格式如下：background:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position/background-sizebackground-originbackground-clip;

這里有三個非常重要的問題需要我們注意：屬性的順序官方沒有強制要求。background-position和background-size兩個屬性的值非常的類似，兩個屬性值都規(guī)定的話，需要用斜杠分隔；如果規(guī)定一個，那么僅對background-position屬性有效，background-size采用默認值。background-origin與background-clip兩個屬性值完全相同，如果只規(guī)定一個，對兩個屬性都有效，如果規(guī)定兩個，它們之間不需要使用斜線分隔。二、DIV高級屬性例4-11復合背景設置（代碼略）二、DIV高級屬性（10）設置多重背景圖像

CSS3以前的版本中，一個容器只能設置一張背景圖片，CSS3增強了背景圖片屬性，我們可以在一個容器中設置多張圖像作為背景圖片。使用多張圖片作為背景圖片時不同圖片的屬性用逗號隔開。多張圖片url地址寫在前面的圖片顯示在最頂層，寫在后面的圖片顯示在底層。二、DIV高級屬性例4-12多重背景圖片（代碼略）二、DIV高級屬性4.漸變填充 在CSS3中，我們不僅可以將盒子的背景設置為純色或者圖片，還可以將盒子的背景設置為漸變效果。CSS3中的漸變效果主要通過background-image屬性下的函數實現，包括線性漸變和徑向漸變。（1）線性漸變 線性漸變指顏色沿直線方向過渡，其基本語法如下：background:linear-gradient(direction,color-stop1,color-stop2,...);

其中：

derection：漸變方向，其屬性值可以是“totop|right|bottom|left”，也可以是一個角度。0deg對應totop，90deg對應toright，180deg對應tobottom，270deg對應toleft。默認值是180deg。

color-stop：漸變起止顏色，可以添加多個顏色值。二、DIV高級屬性例4-13線性漸變（代碼略）二、DIV高級屬性（2）徑向漸變徑向漸變指顏色從中心點沿圓形或橢圓形半徑方向過渡的漸變效果。其基本語法如下：background:radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);

其中：

shapesize：定義漸變形狀及形狀大小的一組參數值，兩個參數值用空格隔開。shape及size參數值如表4.5所示。

position：定義圓心位置，定義方法如背景圖片定位方式?？梢允褂帽硎痉较虻脑~從水平方向和垂直方向描述圓心位置，例如topleft（左上）。也可以使用像素值或百分比表示圓心位置，其值可以是負值。

color-stop：漸變起止顏色，可以添加多個顏色值。二、DIV高級屬性二、DIV高級屬性shape屬性值說明circle徑向漸變?yōu)椤皥A形”ellipse徑向漸變?yōu)椤皺E圓形”size屬性值說明closet-side指定徑向漸變的半徑長度為從圓心到離圓心最近的邊closest-corner指定徑向漸變的半徑長度為從圓心到離圓心最近的角farthest-side指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊farthest-corner指定徑向漸變的半徑長度為從圓心到離圓心最遠的角表4.5shapesize參數值例4-14徑向漸變（代碼略）二、DIV高級屬性（3）重復漸變 重復線性漸變background:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

重復徑向漸變background:repeating-radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);重復漸變的參數設置與線性漸變及徑向漸變相似。對于線性漸變及徑向漸變中的顏色，可以用“color位置值”的形式表示某個確定位置的固定色值，其中位置值是指相對虛擬漸變射線的百分比或者長度值。二、DIV高級屬性例4-15重復漸變（代碼略）二、DIV高級屬性1.float屬性float屬性定義元素在哪個方向浮動，使元素可以沿水平方向排列。float有3個屬性值如下：

left：向左浮動

right：向右浮動

none：不浮動（默認值）三、元素的浮動例4-16元素浮動（代碼略）三、元素的浮動三、元素的浮動2.清除浮動 在使用float屬性后，元素的浮動會對其周圍的元素產生影響。清除浮動對周圍元素的影響的常用方法有2種，一種是使用clear屬性，一種是使用overflow屬性，具體如下：1）clear屬性 在CSS中可以使用clear屬性清除浮動，clear有3個常用的屬性值，分別是left、right、both，可以清除元素左側、右側、兩邊的浮動影響。我們可以將例4-16中給段落標記p添加clear屬性，文字將移動至下方，不會受上面3個小盒子的影響，效果如圖4.24。元素浮動時，除了會對周圍的兄弟元素產生影響，還會對父對象產生影響。在例4-16中，如果我們去掉p標簽及其中的文字，同時不設置外big盒子的寬高，會產生如下圖4.25中左側的效果，大盒子變成了細長盒子。為了避免這樣的問題，我們可以在.small盒子的后面添加一個元素，并對其設置clear屬性，消除浮動對其父元素的影響，效果如4.25中右側所示。具體操作有兩種方法： 使用空標記清除浮動需要在子元素的最后一個后面再添加一個空標記，并為其添加clear屬性。 使用after偽對象清除標記為父對象添加一個after偽對象：三、元素的浮動

（2）overflow屬性overflow屬性用來定義溢出元素內容區(qū)的內容會如何處理。overflow屬性有5個常用屬性值，如表所示：三、元素的浮動值描述visible默認值。內容不會被修剪，會呈現在元素框之外。hidden內容會被修剪，并且其余內容是不可見的。scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。auto如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。inherit規(guī)定應該從父元素繼承overflow屬性的值。例4-18overflow屬性用法（代碼略）三、元素的浮動1.塊元素與行內元素 HTML中的元素可以分為兩類，分別為塊元素及行內元素，如圖4.27所示。四、元素的定位例4-16元素浮動（代碼略）四、元素的定位（1）塊元素最典型的塊元素是<div>，常見的塊元素有<hn>、<p>、<ul>、<li>、<ol>等，塊元素具有如下特點： 每個塊級元素都是獨自占一行。 元素的高度、寬度、行高和邊距都是可以設置的。 元素的寬度如果不設置的話，默認為父元素的寬度。（2）行內元素最典型的行內元素是<span>，常見的行內元素有<strong>、<em>、<del>、<a>等，行內元素具有如下特點： 每一個行內元素可以和別的行內元素共享一行，相鄰的行內元素會排列在同一行里，直到一行排不下了，才會換行。 行內元素不能設置width,height。 行內水平方向的padding-left和padding-right都會產生邊距效果，豎直方向上的padding-top和padding-bottom都不會產生邊距效果。四、元素的定位（3）元素類型轉換 display屬性可用來轉換元素類型。display的常用屬性值如表4.7所示：四、元素的定位屬性值說明block此元素將顯示為塊級元素inline此元素會被顯示為行內元素inline-block行內塊元素?？梢栽O置寬高對齊等屬性，但是不會獨占一行。none此元素不會被顯示。2.文檔流概念在HTML的布局中，元素自動按照從上到下，從左到右的順序進行排列，這種排列方式被稱為文檔流。塊元素在文檔流中按照從上到下的順序排列，行內元素在文檔流中按照從左到右的順序排列。四、元素的定位3.position屬性

position屬性用來指定元素的定位方式，其常用屬性值如表4.8所示四、元素的定位屬性值說明absolute絕對定位，脫離原文檔流相對其父對象進行定位。fixed固定定位，脫離源文檔流相對瀏覽器窗口進行定位。relative相對定位，相對于源文檔流中的位置進行定位。static靜態(tài)定位，默認值。對元素進行定位時，需要設置定位模式和邊偏移。邊偏移屬性如表4.9所示，邊偏移的屬性值可以以px為單位也可以寫作百分比的形式。四、元素的定位屬性說明left相對其父元素左邊線的偏移量right相對其父元素右邊線的偏移量top相對其父元素上邊線的偏移量botton相對其父元素下邊線的偏移量例4-17盒子的定位（代碼略）四、元素的定位4.z-index層疊屬性當元素發(fā)生重疊時，可以使用z-index屬性設置其堆疊的順序。z-index屬性的屬性值默認值為0，也可取正整數或負整數。數值越大，定位的元素約靠上。四、元素的定位例4-20層疊屬性（代碼略）四、元素的定位總結提升PART04總結提升：常見網頁布局方式盒子模型及其屬性不但可以美化頁面，還有另一個重要的作用就是布局頁面。在HTML5中提供了新的結構元素用來布局頁面。常用的頁面布局方式包括靜態(tài)布局、流式布局、彈性布局、網格布局、自適應布局、表格布局以及響應式布局，下面我們將對常見的頁面布局方式做簡單的介紹。一、static靜態(tài)布局靜態(tài)布局是最傳統Web頁面布局方式，網頁上的所有元素的尺寸一律使用px作為單位。如圖4.31所示，大多數PC端網頁都是采用這種布局方式，通常會設置一個min-width，當窗口小于這個寬度，就會出現滾動條。這種布局方式的優(yōu)點是簡單、穩(wěn)定，但是對移動設備兼容性較差。二、Fluid流式布局流式布局使用百分比來定義盒子的寬度用像素值定義盒子的高度，以此來增加頁面的可塑性和流動性，以適應不同分辨率的屏幕，但對尺寸跨度較大的屏幕適應性和穩(wěn)定性較差。流布局常使用到媒體查詢和優(yōu)化樣式技術。三、Flex彈性布局彈性布局是CSS3中基于彈性盒子的布局方式。引入彈性盒子布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。flex彈性布局是基于軸線結構的一維布局。使用彈性布局時需要使用display：flex屬性

將容器定義為彈性盒