網(wǎng)頁設(shè)計與制作-HTML5 + CSS3 課件 任務(wù)9 首頁頁頭板塊的設(shè)計與制作_第1頁
網(wǎng)頁設(shè)計與制作-HTML5 + CSS3 課件 任務(wù)9 首頁頁頭板塊的設(shè)計與制作_第2頁
網(wǎng)頁設(shè)計與制作-HTML5 + CSS3 課件 任務(wù)9 首頁頁頭板塊的設(shè)計與制作_第3頁
網(wǎng)頁設(shè)計與制作-HTML5 + CSS3 課件 任務(wù)9 首頁頁頭板塊的設(shè)計與制作_第4頁
網(wǎng)頁設(shè)計與制作-HTML5 + CSS3 課件 任務(wù)9 首頁頁頭板塊的設(shè)計與制作_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計與制作HTML5+CSS3任務(wù)9

首頁頁頭板塊的設(shè)計與制作任務(wù)任務(wù)9首頁頁頭板塊的設(shè)計與制作任務(wù)9

首頁頁頭板塊的設(shè)計與制作圖9-1任務(wù)9

首頁頁頭板塊的設(shè)計與制作知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握盒模型的基本概念。（2）掌握盒模型組成和基本屬性。（3）掌握盒模型寬度和高度的計算。（1）能夠靈活運用盒模型的各個屬性。（2）能夠使用盒模型的屬性完成頁面的相關(guān)區(qū)域排版。（3）能夠根據(jù)結(jié)構(gòu)圖或效果圖建立盒模型。（1）掌握并遵循Web開發(fā)標(biāo)準(zhǔn)，培養(yǎng)嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)。（2）提升邏輯思維能力及實踐能力。（3）加強實踐教育，培養(yǎng)嚴(yán)謹(jǐn)?shù)拇a書寫習(xí)慣。盒模型簡介盒模型屬性任務(wù)實現(xiàn)任務(wù)9

首頁頁頭板塊的設(shè)計與制作1.盒模型簡介1.1什么是盒模型1.2盒模型的本質(zhì)1.3盒模型的組成任務(wù)9

首頁頁頭板塊的設(shè)計與制作1.1什么是盒模型

盒模型就是所有HTML元素可以看做一個裝了東西的盒子。1.盒模型簡介1.2盒模型的本質(zhì)CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括外邊距、邊框、內(nèi)邊距和實際內(nèi)容。

1.盒模型簡介1.3盒模型的組成大多數(shù)瀏覽器都采用W3C規(guī)范，一個標(biāo)準(zhǔn)的W3C盒子模型由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）這4個屬性組成，如圖9-2所示。1.盒模型簡介圖9-2盒模型簡介盒模型屬性任務(wù)實現(xiàn)任務(wù)9

首頁頁頭板塊的設(shè)計與制作2.盒模型屬性2.1盒模型屬性簡介2.2width屬性和height屬性2.3內(nèi)邊距2.4外邊距2.5盒模型的寬度與高度的計算任務(wù)9

首頁頁頭板塊的設(shè)計與制作2.1盒模型屬性簡介

盒模型最里面的部分就是實際內(nèi)容有屬性“寬（width）”和“高（height）”。

盒子里面的內(nèi)容到盒子的邊框之間的距離叫“內(nèi)邊距（padding）”，內(nèi)邊距緊緊包圍在內(nèi)容區(qū)域的周圍。在內(nèi)邊距的外側(cè)邊緣是屬性“邊框（border）”，邊框的作用就是在內(nèi)外邊距之間創(chuàng)建一個隔離帶，以避免視覺上的混淆。

而盒子邊框外和其他盒子的距離叫“外邊距（margin）”。盒模型屬性具體如圖9-3所示：2.盒模型屬性圖9-32.2width屬性和height屬性2.盒模型簡介

在CSS中width屬性和height屬性經(jīng)常被用到，它們分別表示內(nèi)容區(qū)域的寬度和高度。內(nèi)容是盒子里的“物品”，可以是網(wǎng)頁上的任何元素，如文本、圖片等各種數(shù)據(jù)信息。語法格式如下：屬性值的含義如表9-1所示：

width:auto|length|%;height:auto|length|%;

表9-1width和height屬性值及其含義值描述auto默認(rèn)值，瀏覽器會計算出實際的寬度和高度length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度2.2width屬性和height屬性2.盒模型簡介【案例9-1】example9-1.html演示了元素的寬度和高度的設(shè)置，代碼如下：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>元素的寬度和高度</title><styletype="text/css">.d1{width:500px;height:200px;

background:#0ff;}

2.2width屬性和height屬性2.盒模型簡介

.d2{width:60%;height:40%;background:#fa0;}</style></head><body><divclass="d1">

<divclass="d2">元素的寬高設(shè)置</div></div></body></html>2.2width屬性和height屬性2.盒模型簡介

【案例9-1】在瀏覽器中顯示效果如圖9-4所示：圖9-4元素的width和height設(shè)置2.2width屬性和height屬性2.盒模型簡介

圖9-5元素的寬高值為百分比【解析】子元素div(類名d2)的寬度為500px×60%=300px，高度為200px×40%=80px。如圖9-5所示，里面的子元素在瀏覽器中提示的寬度和高度。2.3內(nèi)邊距2.盒模型簡介

內(nèi)邊距是指元素內(nèi)容與邊框之間的距離，這個距離可以調(diào)整內(nèi)容在盒子中的位置，也稱142之為填充。內(nèi)邊距的設(shè)置屬性有padding-top、padding-right、padding-bottom、padding-left，可分別設(shè)置，也可以用padding屬性，一次設(shè)置所有內(nèi)邊距。1.單邊的內(nèi)邊距CSS可以為元素的每一側(cè)指定內(nèi)邊距的屬性，語法格式如下：

padding-top:length|%;padding-right:length|%;padding-bottom:length|%;padding-left:length|%;所有內(nèi)邊距屬性都可以設(shè)置如表9-2所示的值：值描述length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度表9-2padding屬性值及其含義需要注意的是，內(nèi)邊距的值不允許負(fù)值。2.3內(nèi)邊距2.盒模型簡介

【案例9-2】example9-2.html演示了元素內(nèi)邊距的設(shè)置，代碼如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>padding</title><style>p{background-color:#ff0;width:200px;}p.padding{padding-top:20px;padding-bottom:20px;padding-right:40px;padding-left:40px;

}2.3內(nèi)邊距2.盒模型簡介

案例9-2example9-2.html演示了元素內(nèi)邊距的設(shè)置，代碼如下：</style></head><body><p>這是一個沒有指定填充邊距的段落。</p><pclass="padding">這是一個指定填充邊距的的段落。</p></body>圖9-6元素的padding設(shè)置【解析】從上圖可以看出，padding內(nèi)邊距會把元素“撐大”。2.3內(nèi)邊距2.盒模型簡介

2.簡寫屬性padding

padding屬性是一個復(fù)合屬性，遵循值復(fù)制的原則，可以有1到4個值。（1）設(shè)置1個值：上下左右內(nèi)邊距的值都相同。

【例如】padding:25px;表示上下左右四個方向的內(nèi)邊距的值都是25px。（2）設(shè)置2個值：第1個值為上下內(nèi)邊距的值，第2個值為左右內(nèi)邊距的值。

【例如】padding:25px50px;表示上下內(nèi)邊距的值為25px，左右內(nèi)邊距的值為50px。（3）設(shè)置3個值：第1個值為上內(nèi)邊距的值，第2個值為左右內(nèi)邊距的值，第3個為下內(nèi)邊距的值。

【例如】padding:25px50px75px;表示內(nèi)邊距的值為25px，左右內(nèi)邊距的值為50px，下內(nèi)邊距的值為75px。（4）設(shè)置4個值：第1個值為上內(nèi)邊距的值，第2個值為右內(nèi)邊距的值，第3個為下內(nèi)邊距的值，第4個為左內(nèi)邊距的值。

【例如】padding:25px50px75px100px;表示上內(nèi)邊距的值為25px，右內(nèi)邊距的值為50px，下內(nèi)邊距的值為75px，左內(nèi)邊距的值為100px。2.4外邊距2.盒模型簡介外邊距指的是元素邊框與相鄰元素之間的距離。在CSS中，margin屬性用于設(shè)置外邊距來控制盒子與盒子之間的距離。

1.單邊的外邊距

CSS可以為元素的每一側(cè)指定外邊距的屬性，語法格式如下：

margin-top:auto|length|%;margin-right:auto|length|%;

margin-bottom:auto|length|%;margin-left:auto|length|%;屬性值的含義如表4-3所示：值描述length使用px、cm等單位定義高度%基于包含它的塊級元素的百分比高度表9-3margin屬性值及其含義2.4外邊距2.盒模型簡介【案例9-3】example9-3.html演示了元素的外邊距的設(shè)置，代碼如下：<head><metacharset="utf-8"><title>margin</title><style>p{background-color:#ff0;width:200px;}p.margin{margin-top:50px;margin-bottom:30px;margin-right:100px;margin-left:100px;

}2.4外邊距2.盒模型簡介</style></head><body><p>這是一個沒有指定外邊距大小的段落。</p><pclass="margin">這是一個指定外邊距大小的段落。</p><p>這也是一個沒有指定外邊距大小的段落。</p></body>2.4外邊距2.盒模型簡介圖9-7元素的margin設(shè)置【案例9-3】在瀏覽器中顯示效果如圖9-7所示：2.4外邊距2.盒模型簡介2.簡寫屬性margin為了縮減代碼，可以在一個屬性margin中指定所有外邊距屬性。margin屬性是一個復(fù)合屬性，屬性值可以有1到4個值。與內(nèi)邊距padding的用法類似。使用margin注意以下兩點：（1）外邊距可以為負(fù)值，使相鄰元素重疊。（2）當(dāng)使用盒元素進(jìn)行布局時，使用了寬度屬性，同時將margin的左右外邊距設(shè)置為auto時，可以實現(xiàn)盒元素的居中。該盒元素將占據(jù)指定的寬度，并且剩余空間將在左右邊界之間平均分配。3.外邊距的合并

外邊距合并（疊加）是一個相當(dāng)簡單的概念。但是，在實踐中對網(wǎng)頁進(jìn)行布局時，它會造成許多混淆。（1）外邊距合并指是指當(dāng)兩個垂直方向的外邊距相鄰時,它們將合并成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并，如圖9-8所示：2.4外邊距2.盒模型簡介圖9-8上下相鄰元素的外邊距合并2.4外邊距2.盒模型簡介圖9-10上下相鄰元素的外邊距合并（2）當(dāng)一個元素包含在另一個元素中時，如果沒有內(nèi)邊距或邊框把外邊距分隔開，它們的上外邊距或下外邊距也會發(fā)生合并，如圖9-10所示。2.4外邊距2.盒模型簡介圖9-11空元素自身的上下外邊距合并（3）一個元素外邊距甚至可以與自身發(fā)生合并。當(dāng)一個空元素有外邊距，但是沒有邊框或填充的情況下，上外邊距與下外邊距就碰到了一起，它們也會發(fā)生合并。如圖9-11所示。2.4外邊距2.盒模型簡介圖9-12空元素和相鄰元素的外邊距合并如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并，如圖9-12所示。【注意】如圖4-12所示，由幾個段落組成的典型文本頁面為例，第一個段落上面的空間高度等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰的上外邊距和下外邊距之和，這也就意味著段落之間的空間高度是頁面頂部的兩倍。而如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距會合并在一起，這樣各處的距離就一致了。2.4外邊距2.盒模型簡介圖9-13外邊距的應(yīng)用外邊距合并在實際應(yīng)用中是非常有意義的。如圖9-13所示，由幾個段落組成的典型文本頁面為例，第一個段落上面的空間高度等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰的上外邊距和下外邊距之和，這也就意味著段落之間的空間高度是頁面頂部的兩倍。而如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距會合并在一起，這樣各處的距離就一致了?！咀⒁狻恐挥衅胀ㄎ臋n流中塊元素的垂直相鄰?fù)膺吘嗖艜l(fā)生外邊距合并，行元素、浮動元素或絕對定位元素之間的外邊距是不會合并的。2.5盒模型的寬度與高度的計算2.盒模型簡介

CSS代碼中的寬度和高度，指的是填充以內(nèi)的內(nèi)容范圍。比如【案例9-1】example9-1.html中設(shè)置的width和height是內(nèi)容區(qū)域的寬度和高度，而不是盒模型的寬度與高度，不是盒模型實際所占的位置。盒模型的寬度與高度的計算方法如下：盒模型的寬度=width+左內(nèi)邊距+右內(nèi)邊距+左邊框+右邊框+左外邊距+右外邊距盒模型的高度=height+頂部內(nèi)邊距+底部內(nèi)邊距+上邊框+下邊框+上外邊距+下外邊距2.5盒模型的寬度與高度的計算2.盒模型簡介【案例9-4】example9-4.html演示了盒模型實際所占的位置，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>盒模型的寬度與高度</title><styletype="text/css">div{background:#fa0;width:300px;height:80px;padding:30px;border:10pxsolid;margin:20px;}</style></head>2.5盒模型的寬度與高度的計算2.盒模型簡介<body><div>這是元素的內(nèi)容</div></body></html>【解析】代碼中div元素四個方向都設(shè)置了30px的內(nèi)邊距，四個方向都設(shè)置了10px的邊框線，四個方向都設(shè)置了20px的外邊距。盒模型的寬度為：300px+30px+30px+10px+10px+20px+20px=420px盒模型的高度為：80px+30px+30px+10px+10px+20px+20px=200px圖9-14盒模型的寬度與高度盒模型簡介盒模型屬性任務(wù)實現(xiàn)任務(wù)9

首頁頁頭板塊的設(shè)計與制作3.任務(wù)實現(xiàn)任務(wù)9首頁頁頭板塊的設(shè)計與制作任務(wù)9

首頁頁頭板塊的設(shè)計與制作創(chuàng)建項目構(gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式3.1創(chuàng)建項目創(chuàng)建一個項目文件夾demo4，啟動SublimeText，打開項目文件夾，在項目文件夾中建立index.html文件，images文件夾和css.css文件。需要注意的是，網(wǎng)站首頁都是用index或者default命名的。3.任務(wù)實現(xiàn)3.2構(gòu)建HTML結(jié)構(gòu)

（1）啟動Sublimetext，打開首頁index.html，寫出HTML頭部結(jié)構(gòu)。打開index.html，可以輸入"!"后按"Ctrl+E鍵"或"tab鍵",可快速生成HTML5的模板。在中輸入文字“首頁”，為網(wǎng)頁設(shè)置文檔標(biāo)題。采用外部樣式表引入樣式的方法，150在頭部使用link標(biāo)簽鏈接CSS樣式文件。頭部代碼如下：3.任務(wù)實現(xiàn)<head><metacharset="UTF-8"/><title>學(xué)習(xí)貫徹黨的二十大精神專題網(wǎng)站首頁</title><linkrel="stylesheet"href="css.css"></head>3.2構(gòu)建HTML結(jié)構(gòu)（2）在<body></body>中，寫出頁頭板塊的主體代碼。頁頭板塊內(nèi)容比較少，分為友情鏈接與搜索條兩個部分。主要是用到了<div>、<form>、<input>、<button>標(biāo)簽。主體代碼如下：3.任務(wù)實現(xiàn)<!--頁頭--><divclass="topw1200">

<span>友情鏈接：<ahref="/">江西工業(yè)工程職業(yè)技術(shù)學(xué)院</a></span><!--搜索框區(qū)域--><divclass="search"><formaction=""><inputtype="search"placeholder="輸入關(guān)鍵字..."><button>搜索</button></form></div></div>【注意】首頁分為多個板塊，html中需要用注釋標(biāo)記在每個板塊的前面注釋清楚，在瀏覽器中是不會顯示注釋內(nèi)容。要養(yǎng)成好的編寫習(xí)慣。3.3構(gòu)建CSS樣式（

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論