項(xiàng)目六DIVCSS布局網(wǎng)頁.ppt

項(xiàng)目六 DIV+CSS布局網(wǎng)頁,掌握盒模型 了解元素類型 掌握DIV及其常用屬性 能夠分析并使用DIV+CSS布局網(wǎng)頁,所有頁面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容要大，因?yàn)楹凶涌梢杂羞吙?，盒子?nèi)外都可以有邊距，可以通過調(diào)整盒子的邊框和邊距等參數(shù)，來調(diào)節(jié)盒子的位置。一個(gè)盒子模型由content（內(nèi)容）、border（邊框）、padding（填充也叫內(nèi)邊距）和margin（外邊距）這4個(gè)部分組成。如圖所示。,6.1 任務(wù)1： 認(rèn)識(shí)盒模型,6.1.1 盒模型概述,內(nèi)邊距（padding）,外邊距（margin）,邊框（border）,Padding與margin都有上、右、下、左四個(gè)值。 當(dāng)這些屬性被賦值后，會(huì)影響盒子的寬度與高度。 1、盒模型的寬度 盒模型的寬度 = margin-left（左外邊距）+border-left（左邊框）+padding-left（左內(nèi)邊距）+width（內(nèi)容寬度）+padding-right（右內(nèi)邊距）+border-right（右邊框）+margin-right（右外邊距） 2、盒模型的高度 盒模型的高度 = margin-top（上外邊距）+border-top（上邊框）+padding-top（上內(nèi)邊距）+height（內(nèi)容高度）+padding-bottom（下內(nèi)邊距）+border-bottom（下邊框）+margin-bottom（下外邊距） 【實(shí)例】 盒模型寬高計(jì)算 div margin: 30px; padding: 20px; height: 100px; width: 100px; border: solid 20px #CCFFFF ; ,6.1 任務(wù)1： 認(rèn)識(shí)盒模型,DIV的寬度 = 30px+20px+20px+100px+20px+20px+30px=240px DIV的高度 = 30px+20px+20px+100px+20px+20px+30px=240px,6.1 任務(wù)1： 認(rèn)識(shí)盒模型,6.1.2 元素類型,HTML中的元素默認(rèn)分為兩種：塊元素（block element）與行內(nèi)元素（inline element）。 1、塊元素 塊元素是獨(dú)立的，顯示時(shí)獨(dú)占一行。 常見的塊元素有： p、div、ul、li、h1、dt. 2、行內(nèi)元素 行內(nèi)元素都會(huì)在一行內(nèi)顯示。 常見的行內(nèi)元素有：a、img、span、strong. 【實(shí)例】元素類型 .block background-color: #6CF; .inline background-color: #F9F; ,6.1 任務(wù)1： 認(rèn)識(shí)盒模型, 塊元素 塊元素在顯示時(shí)會(huì)獨(dú)占一行，常見的塊元素有p、ul、li. 行內(nèi)元素 行內(nèi)元素在一行內(nèi)顯示，常見的行內(nèi)元素有strong、a、span. 在瀏覽器中預(yù)覽效果如圖所示。 3、塊元素與行內(nèi)元素轉(zhuǎn)換 塊元素與行內(nèi)元素可以通過 “區(qū)塊”分類中display屬性 的block（塊）與inline（行內(nèi)） 進(jìn)行互相轉(zhuǎn)換。,6.1 任務(wù)1： 認(rèn)識(shí)盒模型,（division）是一個(gè)區(qū)塊容器標(biāo)記，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“l(fā)ayer”。與之間可以放置任何內(nèi)容，包括其他的DIV標(biāo)簽。也就是說DIV是一個(gè)沒有特性的容器而已。 DIV塊作為一個(gè)獨(dú)立的對(duì)象，在CSS樣式控制下有著靈活的表現(xiàn)形式，形成另外一種組織布局形式DIV+CSS。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,6.2.1 插入DIV標(biāo)簽,）創(chuàng)建一個(gè)HTML文檔。 ）執(zhí)行【插入】【布局對(duì)象】【DIV標(biāo)簽】命令或點(diǎn)擊“插入”面板“布局”“ DIV標(biāo)簽”，打開“插入DIV標(biāo)簽”對(duì)話框，如圖6-5所示。在這里必須設(shè)定一個(gè)類或ID，以便于應(yīng)用CSS樣式。 圖 插入DIV標(biāo)簽對(duì)話框,3）在ID處輸入“top”，點(diǎn)擊“確定”按鈕，在Dreamweaver設(shè)計(jì)窗口出現(xiàn)如圖所示DIV塊。表明插入了一個(gè)id名為top的DIV標(biāo)簽。,6.2.2 設(shè)置DIV屬性,DIV是容器，是塊元素，也是一個(gè)盒子，主要的屬性就是盒模型的一些基本屬性，包括邊框、內(nèi)邊距、外邊距以及DIV容器的位置。 創(chuàng)建一個(gè)ID為top的CSS規(guī)則，打開“#top的CSS規(guī)則定義”對(duì)話框，DIV標(biāo)簽的常見屬性主要是在“方框”、“邊框”與“定位”分類里設(shè)定的。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,方框分類屬性 點(diǎn)擊“方框”分類，如圖所示。 1）width：設(shè)置DIV的寬度。 2）height：設(shè)置DIV的高度。 在此處width與height分別設(shè)為200，點(diǎn)擊“確定”按鈕，設(shè)計(jì)視圖中的DIV。 3）padding：設(shè)置DIV的內(nèi)邊距，也就是內(nèi)容到邊框的距離。 4）margin：設(shè)置DIV的外邊距，也就是邊框到父容器或與其他容器之間的距離。 設(shè)置所有padding為20，所有margin為20，點(diǎn)擊“確定”按鈕后效果如圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,5）float：浮動(dòng)，定義元素浮動(dòng)到左側(cè)或右側(cè)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍。 HTML中元素在瀏覽器中顯示是按照流方式顯示，行內(nèi)元素從左到右，塊元素從上到下。 在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)元素，而不論它本身是何種元素。元素對(duì)象設(shè)置了float屬性之后，它將脫離文檔流的顯示方式，不再獨(dú)自占據(jù)一行，可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它的邊框或另一個(gè)浮動(dòng)塊的邊框?yàn)橹梗竺娴脑貢?huì)圍繞它顯示。 float屬性有四個(gè)可用的值：left 和right 分別浮動(dòng)元素到各自的方向，none (默認(rèn)) 使元素不浮動(dòng)，inherit 將會(huì)從父級(jí)元素獲取float值。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,【實(shí)例】float屬性 div height: 100px; width: 100px; margin-top: 15px; border: 1px dashed #33F; 此處顯示id “div1“的內(nèi)容 此處顯示id “div2“的內(nèi)容 此處顯示 id “div3“的內(nèi)容 ,正常DIV顯示,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,給DIV設(shè)置float屬性，讓div1右浮動(dòng)，div2左浮動(dòng)，在style內(nèi)添加如下代碼： #div2 float: left; #div1 float: right; 添加后預(yù)覽效果如圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,6）clear：清除浮動(dòng)。其值有l(wèi)eft、right、both、none。 如上例，要想讓div3不受div2浮動(dòng)的影響，恢復(fù)其原始文檔流位置顯示，則在style中插入CSS規(guī)則：#div3clear：left；即可。預(yù)覽效果如圖所示。 2、邊框分類屬性 點(diǎn)擊“邊框”分類，如右圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,style：邊框的樣式。 width：邊框的粗細(xì)。 color：邊框的顏色。 邊框的三個(gè)屬性可簡寫為：border：width style color。 例如：border：2px solid red； 3、定位分類屬性 點(diǎn)擊“定位”分類，如圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,1）position：定位，它有四個(gè)屬性值：static（靜態(tài)）、relative（相對(duì)定位）、absolute（絕對(duì)定位）、fixed（固定）。 Static：默認(rèn)值，無定位，元素按正常文檔流顯示。 Relative：定位為relative的元素脫離正常的文檔流，但其在文檔流中的位置依然存在，所占用的空間依然保留，通過placement中的left，right，top，bottom屬性來設(shè)置相對(duì)于其在正常文檔流位置所偏移的距離。相對(duì)定位對(duì)象可層疊，層疊順序可通過z-index屬性控制。 【實(shí)例】relative相對(duì)定位 #parent height: 200px; width: 200px; border :solid 2px; ,.sub height: 80px; width: 100px; border :solid 1px; #sub1 position:relative; left:30px; top:30px; background-color:#C9F; ,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽, Relative相對(duì) static靜態(tài) absolute: 將被賦予此定位方法的對(duì)象從文檔流中拖出，與relative的區(qū)別是其在正常文檔流中的位置不再存在。使用left，right，top，bottom屬性相對(duì)于其最接近的一個(gè)具有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性，則依據(jù)body對(duì)象左上角作為參考進(jìn)行定位。絕對(duì)定位對(duì)象同樣可通過z-index進(jìn)行層次分級(jí)。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,【實(shí)例】絕對(duì)定位（父級(jí)沒有設(shè)置定位屬性） 接上例，改變#sub1的定位為absolute，修改內(nèi)容如下： absolute絕對(duì) #sub1 position:absolute; left:30px; top:30px; background-color:#C9F 保存預(yù)覽效果如右圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,【實(shí)例】絕對(duì)定位（父級(jí)設(shè)置定位屬性） 接上例，改變#parent的定位為relation，修改CSS規(guī)則如下： #parent height: 200px; width: 200px; border :solid 2px; margin:20px 0px 0px 20px; position:relative; #sub1 position:absolute; left:30px; top:30px; background-color:#C9F 保存預(yù)覽效果如右圖所示。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,fixed：特殊的absolute，總是以body為定位對(duì)象，按照瀏覽器窗口進(jìn)行定位 2）width與height，與方框里的一樣，用于設(shè)置元素的寬高的。 3）visibility：元素可見性。是指當(dāng)塊內(nèi)元素中的內(nèi)容超出邊界后的顯示設(shè)置。屬性值有：inherit、visible、hidden。 Inherit：從父元素繼承visibility的值。 Visible：默認(rèn)值，元素可見。 Hidden：元素不可見。 4）z-Index：設(shè)置元素堆疊順序，該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。數(shù)字越大處于越上層，可以為正也可以為負(fù) 5）overflow：溢出。當(dāng)元素超過區(qū)塊的容納范圍時(shí)會(huì)產(chǎn)生溢出。其屬性值有visible、hidden、scroll、auto。 Visible：默認(rèn)值，超出部分顯示。 Hidden：超出部分隱藏。 Scroll：產(chǎn)生滾動(dòng)條，不管是否溢出都產(chǎn)生。 Auto：自動(dòng)，超出時(shí)產(chǎn)生滾動(dòng)條，不超出時(shí)不產(chǎn)生滾動(dòng)條。,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,6）clip：裁剪絕對(duì)定位元素。這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。 【實(shí)例】使用DIV+CSS制作一個(gè)如下所示的網(wǎng)頁布局效果，網(wǎng)頁居中顯示。,結(jié)構(gòu)代碼如下所示： ,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,CSS控制代碼如下： #container width: 800px; margin-right: auto; margin-left: auto; div border: 1px solid #CCC; #nav height: 55px; #head height: 180px; ,#left height: 450px; width: 300px; float: left; #right height: 450px; width: 496px; float:right; /*在水平方向上邊框占了4個(gè)像素*/ #footer height: 60px; clear: both; ,6.2 任務(wù)2： 認(rèn)識(shí)DIV標(biāo)簽,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,6.3.1 案例效果展示,布局規(guī)劃圖,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,6.3.2 搭建框架,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,1、頭部內(nèi)容 首頁 關(guān)于我們 業(yè)務(wù)范圍 產(chǎn)品展示 合作客戶,6.3.3 添加內(nèi)容,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,人才招聘 聯(lián)系我們 2、banner內(nèi)容 banner由一張圖片組成。光標(biāo)放在“代碼”視圖中后，插入圖片banner.jpg。具體代碼如下。 3、主體內(nèi)容 A、左邊內(nèi)容 從效果圖上看，左邊內(nèi)容有一個(gè)圓角矩形的邊框，上下圓角部分要切圖作為圖像插入來實(shí)現(xiàn)，因此左邊內(nèi)容分為上邊框、主要內(nèi)容、下邊框三部分，兩邊的邊框用背景圖像實(shí)現(xiàn)。主要內(nèi)容又分為上下兩部分：標(biāo)題與內(nèi)容。其結(jié)構(gòu)如圖所示。,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,左邊內(nèi)容 右邊內(nèi)容,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,4、版尾 版尾是版權(quán)聲明，把光標(biāo)放在“代碼”視圖中后，直接輸入“Copyright2003-2014.漫想族文化傳播有限公司 All Rights Reserved 版權(quán)所有”即可。 至此，頁面內(nèi)容添加完畢，HTML文檔結(jié)構(gòu)完成，如圖所示。,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,1、創(chuàng)建CSS文檔 2、文檔CSS規(guī)則初始化 具體代碼如下： body font-size: 12px; background-image: url(images/bg.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; #container width:980px; margin:50px auto 0px auto; ,6.3.3 美化網(wǎng)頁,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,3、美化頭部 具體代碼如下。 #head height: 137px; #head img float: left; margin-top: 30px; #nav float: right; height: 137px; width: 830px; ,#nav float: right; height: 137px; width: 830px; #nav ul li a color: #FFF; text-decoration: none; line-height: 180%; padding:0px 10px; ,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,#nav ul li a:hover background-color: #F60; #nav ul li text-align: center; float: left; list-style-type: none; margin-right: 1px; padding:0 10px; border-right:1px solid #FFF; width: 80px; #nav img float: right; margin: 20px 0px; ,#nav ul clear: both; background-image: url(images/nav_01.jpg); background-repeat: repeat; overflow: hidden; ,6.3 任務(wù)3 制作DIV+CSS布局網(wǎng)頁 茶業(yè)公司首頁,4、美化banner Banner處就是一張圖片，因此不用美化。 5、美化內(nèi)容 （1）左邊內(nèi)容美化 #left height: 210px; width: 636px; float: left; background-image: url(images/bk_center.jpg); background-repeat: repeat-y; #right float: right; height: 210px; width: 300px; ,6.3 任務(wù)3 制作DIV+CSS