HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程課件-項目4 網(wǎng)頁布局與元素的精確定位-DIV+CSS應(yīng)用

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

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

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

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

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

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

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

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

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

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

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

contain：此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。像素值：以像素值的方式定義背景圖片的大小。百分比：將計算相對于背景定位區(qū)域的百分比，作為背景圖片的大小。二、DIV高級屬性（5）background-repeat：平鋪方式background-repeat屬性用來設(shè)置圖片的平鋪方式，其語法格式如下：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：背景圖像相對于內(nèi)邊距框來定位（默認值）。border-box：背景圖像相對于邊框盒來定位。content-box：背景圖像相對于內(nèi)容框來定位。（7）background-clip：背景定位區(qū)域background-clip屬性規(guī)定背景的繪制區(qū)域。其語法格式如下：background-clip:border-box|padding-box|content-box;其中：border-box：背景被裁剪到邊框盒。默認padding-box：背景被裁剪到內(nèi)邊距框。content-box：背景被裁剪到內(nèi)容框。二、DIV高級屬性例4-9background-origin及background-clip屬性（代碼略）二、DIV高級屬性（8）background-attachment：背景圖片固定方式background-attachment屬性用來設(shè)置圖片的固定方式，其語法格式如下：background-attachment:scroll|fixed;其中：

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

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

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

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

其中：

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

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

其中：

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

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

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

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

left：向左浮動

right：向右浮動

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

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

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

將容器定義為彈性盒