網(wǎng)頁設計與制作基礎（HTML5+CSS3）課件 第8章 DIV+CSS布局

第8章DIV+CSS布局單擊此處添加副標題目錄盒子模型01CSS定位02DIV+CSS基本布局03DIV+CSS布局實例048.1盒子模型使用盒子模型DIV+CSS進行布局，是當前網(wǎng)頁最流行的布局方式。在盒子模型中，HTML頁面中的元素可看成一個矩形的盒子，即一個盛裝內容的容器DIV，這些內容可以是圖片、文本、表格等等。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。如圖所示：8.1盒子模型8.1.2盒子模型的邊距盒子模型的邊距分為內邊距和外邊距，其主要描述如下：內邊距padding用于設置層里面的內容和層邊框的間距,有4個值，其排列順序為上，右，下，左。具體設置方法如下:

padding-top:上內邊距；padding-right:右內邊距；padding-right:下內邊距；padding-left：左內邊距；padding：上內邊距[右內邊距下內邊距左內邊距];8.1.2盒子模型的邊距外邊距margin用于設置層和它所在容器的邊界距離，和padding一樣，有4個值，其排列順序為上，右，下，左。margin-top:上外邊距；margin-right:右外邊距；margin-right:下外邊距；margin-left：左外邊距；margin：上外邊距[右外邊距下外邊距左外邊距];下面的例子設置了margin屬性如下：margin-top:50px;margin-left:0;

8.1.2盒子模型的邊距8.1.3邊框屬性邊框border樣式包括三個屬性：borderstyle:邊框樣式bordercolor:邊框顏色borderwidth:邊框寬度8.1.3邊框屬性邊框樣式borderstyle較為復雜，有多種樣式，其主要包括以下幾種：none：定義無邊框。hidden：與"none"相同。IE不支持dotted：定義點狀邊框dashed：定義虛線。solid：定義實線。double：定義雙線。groove：定義3D凹槽效果線。ridge：定義3D凸槽效果線。inset：定義3Dinset邊框。outset：定義3Doutset邊框。inherit：規(guī)定應該從父元素繼承邊框樣式。8.1.3邊框屬性邊框顏色bordercolor默認為黑色。邊框寬度也有默認值，默認為medium關鍵字，其大小為2-3px（根據(jù)不同瀏覽器而定），另外還包括thin(1-2px),thick(3-5px)等關鍵字。用戶也可以自己來定義邊框寬度。和邊距一樣，邊框可以統(tǒng)一設置樣式，也可以單獨為各邊設置樣式。

border:邊框寬度|邊框樣式|邊框顏色

border-top:上邊框寬度|上邊框樣式|上邊框顏色

border-bottom:下邊框寬度|下邊框樣式|下邊框顏色

border-left:左邊框寬度|左邊框樣式|左邊框顏色

border-right:右邊框寬度|右邊框樣式|右邊框顏色例如下面的例子統(tǒng)一設置了一個2px的紅色實線邊框。border:1pxsolid#ff0000;8.1.3邊框屬性對于邊框的每一項樣式，也可以單獨設置，例如對于邊框樣式border-style，可以按照如下方法設置：

border-style:樣式值//統(tǒng)一設置四條邊框樣式

border-top-style:樣式值

border-bottom-style:樣式值

border-left-style:樣式值

border-right-style:樣式值8.1.3邊框屬性對于邊框寬度border-width，可以按照如下方法設置：border-width:寬度值；//統(tǒng)一設置四條邊框寬度值border-top-width：上邊框寬度值；border-bottom-width：下邊框寬度值；border-left-width：左邊框寬度值；border-right-width：右邊框寬度值；8.1.3邊框屬性同樣的，對于邊框顏色border-color，可以按照如下方法設置：border-color:顏色值；//統(tǒng)一設置四條邊框顏色border-top-color：上邊框顏色值；border-bottom-color：下邊框顏色值；border-left-color：左邊框顏色值；border-right-color：右邊框顏色值；8.1.4CSS3新增邊框樣式CSS3對原來的盒模型進行了改善，增加了一些新的邊框樣式，用于解決用戶界面問題。新增的主要屬性包括以下幾個部分：圓角邊框（border-radius）盒陰影(box-shadow)圖像邊框(border-image)圓角邊框（border-radius）圓角邊框用于給元素的邊框創(chuàng)建（1~4個）圓角效果；基本語法為“border-radius:1-4length|%”，設置1-4個方向的圓角效果，單位可以是長度或者百分比，設置方向為左上角、右上角、右下角、左下角。各種效果設置如圖所示：

8.1.4CSS3新增邊框樣式圓角邊框效果設置如圖所示：8.1.4CSS3新增邊框樣式8.1.4CSS3新增邊框樣式盒陰影box-shadow。盒陰影屬性包含5個參數(shù)值，這些參數(shù)值表述如下：（1）h-shadow:水平陰影的位置，該值指定了陰影的水平偏移量。即在x軸上陰影的位置。如果是正數(shù)陰影會出現(xiàn)在元素的右邊，如果是負值陰影出現(xiàn)在元素的左邊。（2）v-shadow:垂直陰影的位置，該值指定了陰影的垂直偏移量。即在y軸上陰影的位置。如果是正值陰影會出現(xiàn)在元素的上邊，如果是負值陰影會出現(xiàn)在元素的下邊。（3）blur：模糊距離，該值代表陰影的模糊半徑，如果是“0”意味著陰影是完全實心的，沒有任何模糊效果。該值越大，實心度越小，陰影越朦朧和模糊，該值不支持負數(shù)。8.1.4CSS3新增邊框樣式盒陰影box-shadow。盒陰影屬性包含5個參數(shù)值，這些參數(shù)值表述如下：（4）spread：陰影的尺寸，該值可以被看作是從元素到陰影的距離。如果正值會在元素的四個方向延伸陰影。負值會使陰影變得比元素本身尺寸還要小。默認值“0”會讓陰影變得得和元素的大小一樣。（5）color：陰影的顏色。例如：圖8-13的設置中，5px表示陰影水平向右偏移量，10px表示陰影垂直向下偏移量，#08C表示陰影的顏色為藍色，得到一個藍色實陰影的邊框效果。圖8-14的設置中，在原來的基礎上，增加了模糊距離為10px，因此呈現(xiàn)的效果為藍色模糊陰影。圖8-15的設置中，增加了陰影的尺寸，得到帶暈邊效果的陰影。圖8-16，使用inset，設置了一個內陰影的效果。盒陰影box-shadow效果8.1.4CSS3新增邊框樣式8.1.4CSS3新增邊框樣式圖像邊框border-image對于邊框的設置，除了普通的樣式外，還可以通過CSS3中的border-image屬性使用圖像來作為元素的邊框，以創(chuàng)建出豐富多彩邊框效果。

border-image屬性可以通過一些簡單的規(guī)則，將一副圖像劃分為9個單獨的部分，瀏覽器會自動使用相應的部分來替換邊框的默認樣式。其語法格式如下：border-image:border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeatborder-image是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat這5個屬性的簡寫，其中：border-image-source：定義邊框圖像的路徑；border-image-slice：定義邊框圖像從什么位置開始分割；border-image-width：定義邊框圖像的厚度（寬度）；border-image-outset：定義邊框圖像的外延尺寸（邊框圖像區(qū)域超出邊框的量）；border-image-repeat：定義邊框圖像的平鋪方式。8.2浮動布局8.2.1浮動設置（float）正常情況下，HTML頁面中塊元素都是從上到下排列的。如果要改變布局，可以使用浮動布局。浮動布局是網(wǎng)頁中較常見的布局方式，通過浮動布局可以使塊級元素并排放置。CSS使用float來設置浮動，其屬性值有兩個，float：left，表示元素向左浮動，其右邊可以出現(xiàn)其他元素；float：right，表示元素向右浮動，其左邊可以出現(xiàn)其他元素。8.2.1浮動設置（float）例子1：在頁面中插入兩個層，定義樣式對層的大小進行設置。<div>第1個層</div><div>第2個層</div>分別設置兩個層的樣式div1和div2，設置它們的寬度和高度為200px，同時設置背景顏色。#div1{background-color:#DDE9E9;height:200px;width:200px;}#div2{background-color:#FACCF1;height:200px;width:300px;}接下來應用樣式到兩個層中：<divid=”div1”>第1個層</div><divid=”div2”>第2個層</div>8.2浮動布局8.2.1浮動設置（float）修改兩個層的樣式div1和div2，設置它們的float為left。則兩個層并排放置。#div1{background-color:#DDE9E9;height:200px;width:200px;float:left；}#div2{background-color:#FACCF1;height:200px;width:300px;float:left;}8.2浮動布局8.2.2清除浮動（clear）為了防止元素隨意浮動，CSS定義了clear屬性，該屬性能夠清除浮動，避免元素隨意浮動顯示。clear的屬性值有四個，分別為：left：禁止元素左側顯示浮動元素。right：禁止右側顯示浮動元素。both：禁止左右兩側存在浮動元素。none：不清除浮動元素。例如上一個例子中，修改第三個層的樣式為：#div2{background-color:aliceblue;height:200px;width:200px;float:left;clear:both;}通過上述設置，第2個層的左右兩邊都不能有元素，因此第2個層只能放到1下一個位置。8.3CSS定位8.3.1position屬性CSS使用position屬性精確定位元素的顯示位置，其取值包括：（1）position：static，不定位顯示（默認設置），所有元素都顯示為流動布局效果。（2）position：absolute（絕對定位）---將元素從文檔流中拖出，使用left、right、top、bottom屬性，其值為相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位，如果不存在包含塊，則相對于body元素，也就是瀏覽器窗口絕對定位。（3）position：relative（相對定位）---通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。（4）position：fixed,不會隨瀏覽器滾動條滾動而滾動，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。下面的例子在body中建立了三個層。<body><divid="div1">第1個層</div><divid="div2">第2個層</div><divid="div3">第3個層</div></body>每個層對應的樣式如下：#div1{position:relative;top:50px;background-color:#DDE9E9;height:200px;width:200px;

}#div2{position:relative;top:50px;background-color:#FACCF1;height:200px;width:200px;}#div3{position:absolute;top:25px;left:150px;background-color:aliceblue;height:200px;width:200px;}8.3.1position屬性其中第一個層和第二個層都設置position為relative，并設置上部偏移為50px，第3個層設置position為absolute，絕對定位，其相對的是父元素body的定位，因此脫離原來的文檔流，按照距離左邊left:150px,距離上邊top：25px放置，和第一個層會有重疊。其效果圖如圖所示：8.3.1position屬性8.3.2定位層疊順序z-index無論是相對定位還是絕對定位，只要層的坐標相同，就有可能出現(xiàn)層的重疊。在默認情況下，相同類型的定位元素，排列在后面的定位元素會覆蓋前面的定位元素。也可以通過使用CSS中的z-index屬性，來修改層疊順序。其使用方法為：z-index：auto|數(shù)字其中auto表示默認值，根據(jù)父對象的定位來確定層疊關系,數(shù)字表示具體的值，值越大，就越顯示在上面。下面的例子在body中建立了三個并列的層。<body><divid="div1">第1個層</div><divid="div2">第2個層</div><divid="div3">第3個層</div></body>并設置每個層的樣式設置如下：div{position:relative;width:200px;height:100px;}#div1{background-color:#DDE9E9;}#div2{top:-50px;left:60px;background-color:#FACCF1;}#div3{top:-100px;left:120px;background-color:aliceblue;}8.3.2定位層疊順序z-index在上面樣式的基礎上，為三個層設置z-index的值如下：#div1{z-index:3;}#div2{z-index:2;

}#div3{z-index:1;

}得到的效果如圖。由于設置了第一個層的z-index值為3，所以這個層位于最上邊，把第2個層蓋住了，第二個層的z-index值為2，第一個層的z-index值為1，所以第二個層又在第一個層之上，把第1個層覆蓋住了。8.3.2定位層疊順序z-index8.4.1導航菜單設計導航信息是每個網(wǎng)站必備的內容，所有網(wǎng)站都需要借助導航菜單來實現(xiàn)信息的瀏覽功能。下面的例子使用DIV+CSS設計了個人網(wǎng)站的導航菜單，其效果為，當鼠標放在導航文字上時，相應部分會亮色顯示，例如，當鼠標位于“首頁”項目時，左邊會有一個亮黃色塊，首頁文字加粗，并顯示為亮黃色。整個頁面的設計操作步驟如下：1.建立一個網(wǎng)頁文件，命名為index.html。2.在body區(qū)，插入一個總的層，在層里面，插入ul和li，用于添加各個導航條目，具體代碼如下：<divid="menu"><ul><li><ahref="#">首頁</a></li><li><ahref="#">個人簡介</a></li><li><ahref="#">我的愛好</a></li><li><ahref="#">我的相冊</a></li><li><ahref="#">和我聯(lián)系</a></li></ul></div>8.4DIV+CSS3布局案例3.設置總層的樣式menu。#menu{font-family:Cambria,"HoeflerText","LiberationSerif",Times,"TimesNewRoman","serif";font-size:18px;text-align:right;}4.設置項目列表ul和li的基本樣式，列表不顯示項目符號:list-style-type:none;列表項浮動顯示:float:left，即各個列表項水平排列成一行，形成橫向菜單。#menuul{list-style-type:none;

/*不顯示列表項目符號*/margin:0px;padding:0px;}#menuli{float:left;}8.4DIV+CSS3布局案例5.設置超鏈接效果，由于<a>為行內元素，無法控制其寬度和高度，不利于外部項目的布局，因此需要把<a>定義為塊級元素，使它具有塊級元素的屬性，以便于用于設置。定義方法為：display:block;同時，需要設置每個導航項目左邊框為粗線，具體代碼如下所示：#menulia{width:120px;display:block;

/*設置為塊狀元素*/height:1em;padding:5px5px5px0.5em;text-decoration:none;border-left:16pxsolid#151571;

/*設置左邊框為粗邊，深藍色*/border-right:1pxsolid#151571;

/*設置右側深藍色邊框*/}#menulia:link,#menulia:visited{background-color:#1136c1;color:#FFFFFF;}8.4DIV+CSS3布局案例6.設置鼠標經(jīng)過時的效果，當鼠標經(jīng)過時，改變超鏈接的背景顏色，改變邊框顏色為亮黃色，改變文字顏色也為亮黃色，具體代碼如下：#menulia:hover{

/*設置鼠標經(jīng)過時效果*/background-color:#002099;

/*改變背景色*/color:#ffff00;

/*改變文字顏色為亮黃色*/border-left:16pxsolidyellow;/*左邊的粗邊為亮黃色*/font-weight:bold;}8.4DIV+CSS3布局案例也可以將水平的導航菜單，改成垂直的熒光菜單效果。如圖所示：：#menu{font-family:Cambria,"HoeflerText","LiberationSerif",Times,"TimesNewRoman","serif";font-size:18px;margin:auto;width:120px;background-color:#000;/*背景顏色為黑色*/}#menuul{list-style-type:none;

/*不顯示列表項目符號*/margin:0px;padding:0px;}#menulia{display:block;height:1em;padding:5px5px5px0.5em;text-decoration:none;border-top:8pxsolid#060;

/*設置上框為粗邊，綠色*/color:#ccc;}#menulia:hover{

/*設置鼠標經(jīng)過時效果*/color:#ffff00;

/*改變文字顏色為亮黃色*/border-top:8pxsolid#0e0;/*上邊框為亮綠色*/font-weight:bold;}8.4DIV+CSS3布局案例完成風云人物的電子相冊，當鼠標放到圖片上時，會將對應的人物名字和介紹顯示出來，如圖所示：1.新建一個網(wǎng)頁，命名為index.html。在頁面中，插入第一個層，內容為標題“web風云人物榜”。并命名對應的樣式為“maintitle”<divid="maintitle">web風云人物榜</div>2.建立一個樣式表文件“style1.css”,在head區(qū)導入該樣式表：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>電子相冊集</title><linkhref="css/style1.css"rel="stylesheet"type="text/css"/></head>8.4.2互聯(lián)網(wǎng)風云人物電子相冊在樣式表文件style1.css中，建立標題的樣式：@charset"utf-8";#maintitle{font-family:"MSSerif","NewYork",serif;font-size:60px;font-weight:

bold;text-align:center;clear:both;height:160px;width:auto;background-color:#F90;margin-bottom:10px;color:#FFF;line-height:160px;

}8.4.2互聯(lián)網(wǎng)風云人物電子相冊3.新建圖片所在層，該層里面首先包含一副圖片及對圖片的超鏈接，接下來使用列表方式，設置人物介紹內容。具體內容如下：<divclass="photounit"><ahref="img/1-vint.jpg"><imgsrc="img/1-vint.jpg"/></a>

<ul><liclass="title">文特·瑟夫(VintCerf)與鮑勃·卡恩(BobKahn)</li><li>互聯(lián)網(wǎng)之父</li><liclass="article">聯(lián)手締造了TCP/IP通信協(xié)議集。TCP/IP是網(wǎng)絡上的計算機互相通信的語言</li></ul></div>8.4.2互聯(lián)網(wǎng)風云人物電子相冊8.4.2互聯(lián)網(wǎng)風云人物電子相冊4.在樣式表文件中，建立圖片層的總樣式.photounit，向左浮動，寬度為500，高度為500。.photounit{float:left;height:500px;width:500px;}5設置層里面圖片<img>的樣式，寬度為450，并設置邊框陰影效果。div.photounitimg{width:450px;border:0px;height:auto;margin:25px;

-moz-box-shadow:2px2px5px#333333;-webkit-box-shadow:2px2px5px#333333;box-shadow:2px2px5px#333333;}8.4.2互聯(lián)網(wǎng)風云人物電子相冊6.接下來設置圖片所在超鏈接效果，設置為塊級元素：div.photounita{display:block;padding:0px;}7.設置列表的樣式，寬度為400，初始狀態(tài)下，列表內容是不呈現(xiàn)的，所以設置列表模塊初始狀態(tài)為不可見：display:none。設置列表不出現(xiàn)項目符號：list-style：none。div.photounitul{margin-left:20px;background:#FFF;border:0px;width:400px;

font-size:18px;list-style:none;color:#F90;font-family:"MicrosoftYaHeiUI";

display:none;/*不顯示*/}8.4.2互聯(lián)網(wǎng)風云人物電子相冊8.當鼠標放到層上時，同時出現(xiàn)文字介紹內容，后面會顯示橙色背景，以及整個層的暈邊效果。div.photounit:hoverul{

display:block;

position:absolute;}div.photounit:hover{background:#F90;

-moz-box-shadow:2px2px5px#FC3;-webkit-box-shadow:2px2px5px#FC3;box-shadow:2px2px5px#FC3;

}8.4.2互聯(lián)網(wǎng)風云人物電子相冊9.設置列表的標題樣式以及文字內容樣式如下：div.photounitli{line-height:25px;margin:0px;padding:0px;

}div.photounitli.title{

font-weight:bold;padding-top:5px;padding-bottom:0.2em;border-bottom:1pxsolid#F90;color:#F90;}div.photounitli.article{

padding-top:5px;padding-bottom:0.2em;color:#F90;font-size:14px;}下面講解如何用DIV+CSS實現(xiàn)個人主頁的布局。由效果圖分析可知，要完成上述布局，可將頁面分割成6個部分，分別為頂部，水平線，導航欄，左側圖片，右側文字，底部版權信息欄，同時為了控制整體的布局，在6個層外面，再加一個總的層，其布局如圖8-35所示8.4.3個人主頁面布局8.4.3個人主頁面布局1.首先建立一個頁面index.html，在<body>區(qū)輸入6個層，設置層的基本內容，如下所示：<div>

<div>姍姍的個人主頁</div>

<div><hrcolor="#ffffff"></div>

<div>個人簡介我的愛好我的相冊</div>

<div><imgsrc="images/girl.jpg"/></div>

<div>大家好，歡迎光臨</div>

<divid="bottom">Copyright?2020-2023xxd,AllRightsReserved</div><