任務4 制作學院介紹頁面

任務4制作學院介紹頁面Web前端開發(fā)案例教程HTML5+CSS3項目式微課版制作學院介紹頁面任務4任務3制作的頁面內(nèi)容都是在瀏覽器中直接呈現(xiàn)的，實際上網(wǎng)頁中的內(nèi)容是由一個個的塊組成的，這些塊也叫盒子。本任務制作學院介紹頁面，將介紹的內(nèi)容放入盒子中，并設置盒子的各種屬性。通過本任務的實現(xiàn)，掌握盒子模型的概念和盒子的各種屬性設置。任務效果使用盒子模型制作學院介紹頁面。

學院介紹頁面知識點盒子模型的概念01盒子模型的相關屬性02知識準備任務3制作學院介紹頁面任務44.2.1盒子模型的概念

盒子模型就是把HTML頁面中的元素看作一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。例4-1使用div標記定義盒子。example01.html4.2.1盒子模型的概念div標記是區(qū)塊容器標記，簡稱塊標記，塊通稱為盒子塊標記可以容納段落、標題、表格、圖像等各種網(wǎng)頁元素div標記中還可以包含多層div標記DIV+CSS布局網(wǎng)頁就是將網(wǎng)頁內(nèi)容放入若干div標記中，并使用CSS設置這些塊的屬性4.2.1盒子模型的概念4.2.1盒子模型的概念一個盒子實際占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的例4-1中定義的盒子box的實際寬度和高度均是310px在網(wǎng)頁排版時，要非常精確地計算盒子實際占有的寬度和高度4.2.1盒子模型的概念大部分網(wǎng)頁元素本質上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子給盒子添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中4.2.1盒子模型的概念不要求每個元素都必須定義這些屬性(內(nèi)邊距、邊框、外邊距、寬和高)div標記定義的盒子默認寬度是瀏覽器寬度，默認高度由盒子中內(nèi)容決定，默認的邊框、內(nèi)邊距、外邊距都為0body、p、h1～h6、ul、li等都有默認外邊距和內(nèi)邊距設計網(wǎng)頁時，一般要將這些元素的外邊距和內(nèi)邊距都先設為0，需要時再設置為非零的值。要精確描述盒子的外觀，需要設置盒子的邊框屬性（border）、內(nèi)邊距屬性（padding）、外邊距屬性（margin）、盒子陰影屬性（box-shadow）等。4.2.2盒子模型的相關屬性1.邊框屬性border邊框（border）屬性設置方式如下：border-top：上邊框寬度、樣式、顏色。border-right：右邊框寬度、樣式、顏色。border-bottom：下邊框寬度、樣式、顏色。border-left：左邊框寬度、樣式、顏色。4.2.2盒子模型的相關屬性將背景顏色為灰色的盒子下邊框設置為2px、實線、紅色border-bottom:2pxsolid#f00;4.2.2盒子模型的相關屬性1.邊框屬性border若4個邊框具有相同的寬度、樣式和顏色，使用如下方式表示。若將盒子box的4個邊框均設置為5px、實線、紅色格式：border：邊框寬度樣式顏色border:5pxsolid#f00;4.2.2盒子模型的相關屬性1.邊框屬性borderborder：邊框寬度樣式顏色solid：邊框樣式為單實線dashed：邊框樣式為虛線dotted：邊框樣式為點線double：邊框樣式為雙實線none：沒有邊框4.2.2盒子模型的相關屬性1.邊框屬性border若將盒子box的4個邊框均設置為2px、虛線、紅色.box{border:2pxdashed#f00;}4.2.2盒子模型的相關屬性1.邊框屬性borderCSS3中新增的border-radius屬性可以給元素設置圓角邊框。border-radius:圓角半徑屬性值可以是長度或百分比，表示圓角的半徑4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radius在例4-1中對盒子添加圓角半徑的設置4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radius4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radius設置圓角半徑時，也可以分別為4個角的圓角半徑設置不同的值。盒子的樣式代碼改為如下4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radius左上圓角半徑依次為左上、右上、右下、左下4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radius

若盒子設置了背景顏色或背景圖像，那么在不設置邊框時，也可以使用border-radius屬性顯示出圓角的效果4.2.2盒子模型的相關屬性2.圓角邊框屬性border-radiuspadding-top：上內(nèi)邊距大小padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大小

padding-left：左內(nèi)邊距大小

內(nèi)邊距用于設置盒子中內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。內(nèi)邊距（padding）屬性設置方式如下：若4個內(nèi)邊距具有相同的大小，則可以用一行代碼設置。格式：padding：內(nèi)邊距大小4.2.2盒子模型的相關屬性3.內(nèi)邊距屬性padding內(nèi)邊距屬性padding上右下左上右下左上右下左上下左右內(nèi)邊距均為10px3.內(nèi)邊距屬性paddingmargin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小

margin-left：左外邊距大小

外邊距用于設置盒子與其他盒子之間的距離。外邊距（margin）屬性設置方式如下：4.2.2盒子模型的相關屬性4.外邊距屬性marginmargin：0auto水平居中若4個外邊距具有相同的大小，則可以用一行代碼設置。格式：margin：外邊距大小4.2.2盒子模型的相關屬性4.外邊距屬性marginbox-shadow用于給盒子添加周邊陰影效果。語法格式：box-shadow:水平偏移量垂直偏移量模糊半徑擴展半徑顏色陰影類型；說明陰影水平偏移量：必選項，可以為負值，正值表示向右偏移，負值表示向左偏移。陰影垂直偏移量：必選項，可以為負值，正值表示向下偏移，負值表示向上偏移。陰影模糊半徑：可選項，不能為負值，值越大陰影就越模糊，默認值為0，表示不模糊。陰影擴展半徑：可選項，可以為負值。正值表示在所有方向擴展，負值表示在所有方向上消減，默認值為0。陰影顏色：可選項，省略時為黑色。陰影類型：可選項，內(nèi)陰影的值為inset，省略時為外陰影。4.2.2盒子模型的相關屬性5.盒子陰影屬性box-shadow陰影水平偏移量陰影垂直偏移量陰影模糊半徑陰影顏色示例4.2.2盒子模型的相關屬性5.盒子陰影屬性box-shadow例4-2在項目chapter04中新建一個網(wǎng)頁文件，定義一個盒子，盒子中包括圖像和文本等，盒子和圖像都設置了陰影效果，文件名為example02.html。4.2.2盒子模型的相關屬性5.盒子陰影屬性box-shadow網(wǎng)頁能通過背景顏色或背景圖像給人留下深刻的第一印象，如節(jié)日題材的網(wǎng)站一般采用應景的圖片來營造節(jié)日氛圍，所以在網(wǎng)頁設計中，控制背景顏色和背景圖像是很重要的。設置背景顏色或背景圖像時可使用綜合屬性background，通過該屬性可以設置與背景相關的所有值。4.2.3背景屬性屬性

作用備注background-color設置要使用的背景顏色

background-image設置要使用的背景圖像

background-repeat設置如何重復背景圖像

background-position設置背景圖像的位置

與background屬性相關的屬性如下表所示。4.2.3背景屬性語法格式：background-color：#RRGGBB或#rgb(r,g,b)或預定義的顏色值示例1.背景顏色（background-color）屬性4.2.3背景屬性語法格式：background-image：URL（圖像來源）示例4.2.3背景屬性1.背景圖像（background-image）屬性語法格式：

background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round3.背景圖像平鋪(background-repeat)屬性repeatno-repeatrepeat-xrepeat-yspaceround4.2.3背景屬性語法格式：background-position:關鍵字|百分比|長度4.背景圖像位置（background-position）屬性關鍵字：在水平方向上有l(wèi)eft、center和right，垂直方向上有top、center和bottom。百分比、長度：指定兩個值，分別代表水平位置和垂直位置。示例4.2.3背景屬性4.2.3背景屬性例4-5

利用背景圖像的各種屬性設置元素的背景顏色和背景圖像。5.綜合設置背景（background）屬性

語法格式：background:背景顏色url("圖像")是否重復位置是否固定大小裁剪方式參考原點;所有屬性在書寫時順序任意。如果同時設置了“position”和“size”兩個屬性，應該用左斜杠“/”分隔，如“position/size”，而不是用空格把兩個參數(shù)值隔開。設置元素的背景顏色和背景圖像時建議使用綜合屬性background一次性設置。4.2.3背景屬性4.2.3背景屬性例4-6修改例4-5，使用background綜合設置背景顏色和圖像。5.綜合設置背景（background）屬性

background:#cccurl(images/logo.png)no-repeatleftcenter;background:url(images/binhai.jpg)no-repeatcenterbottom;background-image:url(images/binhai.jpg); background-repeat:no-repeat;

background-position:centerbottom;background-color:#ccc; background-image:url(images/logo.png); background-repeat:no-repeat; background-position:leftcenter;4.2.4不透明度屬性

顏色的不透明度可以使用rgba(r,g,b,alpha)模式設置。也可以使用元素的opacity屬性為任何元素設置不透明效果。格式如下。格式：opacity:不透明度值;不透明值是0-1間的浮點數(shù)值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。4.2.4不透明度屬性例4-7：在項目chapter04中新建一個網(wǎng)頁文件，使用opacity屬性設置圖像的不透明度，文件名為example07.html。圖像的不透明度為0.3鼠標指針移動到圖像上圖像的不透明度為1任務實現(xiàn)任務3