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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計與制作HTML5+CSS3任務9

首頁頁頭板塊的設計與制作任務任務9首頁頁頭板塊的設計與制作任務9

首頁頁頭板塊的設計與制作圖9-1任務9

首頁頁頭板塊的設計與制作知識目標技能目標素質目標（1）掌握盒模型的基本概念。（2）掌握盒模型組成和基本屬性。（3）掌握盒模型寬度和高度的計算。（1）能夠靈活運用盒模型的各個屬性。（2）能夠使用盒模型的屬性完成頁面的相關區域排版。（3）能夠根據結構圖或效果圖建立盒模型。（1）掌握并遵循Web開發標準，培養嚴謹的工作作風。（2）提升邏輯思維能力及實踐能力。（3）加強實踐教育，培養嚴謹的代碼書寫習慣。盒模型簡介盒模型屬性任務實現任務9

首頁頁頭板塊的設計與制作1.盒模型簡介1.1什么是盒模型1.2盒模型的本質1.3盒模型的組成任務9

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

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

1.盒模型簡介1.3盒模型的組成大多數瀏覽器都采用W3C規范，一個標準的W3C盒子模型由內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）這4個屬性組成，如圖9-2所示。1.盒模型簡介圖9-2盒模型簡介盒模型屬性任務實現任務9

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

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

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

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

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

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

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

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

<!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">元素的寬高設置</div></div></body></html>2.2width屬性和height屬性2.盒模型簡介

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

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

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

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

【案例9-2】example9-2.html演示了元素內邊距的設置，代碼如下：<!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內邊距2.盒模型簡介

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

2.簡寫屬性padding

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

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

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

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

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

1.單邊的外邊距

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

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演示了元素的外邊距的設置，代碼如下：<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設置【案例9-3】在瀏覽器中顯示效果如圖9-7所示：2.4外邊距2.盒模型簡介2.簡寫屬性margin為了縮減代碼，可以在一個屬性margin中指定所有外邊距屬性。margin屬性是一個復合屬性，屬性值可以有1到4個值。與內邊距padding的用法類似。使用margin注意以下兩點：（1）外邊距可以為負值，使相鄰元素重疊。（2）當使用盒元素進行布局時，使用了寬度屬性，同時將margin的左右外邊距設置為auto時，可以實現盒元素的居中。該盒元素將占據指定的寬度，并且剩余空間將在左右邊界之間平均分配。3.外邊距的合并

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

CSS代碼中的寬度和高度，指的是填充以內的內容范圍。比如【案例9-1】example9-1.html中設置的width和height是內容區域的寬度和高度，而不是盒模型的寬度與高度，不是盒模型實際所占的位置。盒模型的寬度與高度的計算方法如下：盒模型的寬度=width+左內邊距+右內邊距+左邊框+右邊框+左外邊距+右外邊距盒模型的高度=height+頂部內邊距+底部內邊距+上邊框+下邊框+上外邊距+下外邊距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>這是元素的內容</div></body></html>【解析】代碼中div元素四個方向都設置了30px的內邊距，四個方向都設置了10px的邊框線，四個方向都設置了20px的外邊距。盒模型的寬度為：300px+30px+30px+10px+10px+20px+20px=420px盒模型的高度為：80px+30px+30px+10px+10px+20px+20px=200px圖9-14盒模型的寬度與高度盒模型簡介盒模型屬性任務實現任務9

首頁頁頭板塊的設計與制作3.任務實現任務9首頁頁頭板塊的設計與制作任務9

首頁頁頭板塊的設計與制作創建項目構建HTML結構構建CSS樣式3.1創建項目創建一個項目文件夾demo4，啟動SublimeText，打開項目文件夾，在項目文件夾中建立index.html文件，images文件夾和css.css文件。需要注意的是，網站首頁都是用index或者default命名的。3.任務實現3.2構建HTML結構

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

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

溫馨提示

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

評論

0/150

提交評論