《網頁設計與制作（活頁式）》 課件 項目4 盒子模型_第1頁
《網頁設計與制作（活頁式）》 課件 項目4 盒子模型_第2頁
《網頁設計與制作（活頁式）》 課件 項目4 盒子模型_第3頁
《網頁設計與制作（活頁式）》 課件 項目4 盒子模型_第4頁
《網頁設計與制作（活頁式）》 課件 項目4 盒子模型_第5頁
已閱讀5頁，還剩26頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

網頁設計與制作項目四

盒子模型N

知識目標理解盒子模型的概念掌握盒子模型的相關屬性熟悉標簽的類型與轉換4.1.1盒子模型的概念任務4.1認識盒子模型盒子模型是指把HTML5頁面中的元素看作矩形的盒子，每個矩形都是由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成的。實例1認識盒子模型4.1.1盒子模型的概念任務4.1認識盒子模型在<body>標簽中使用<div>標簽定義了一個盒子“box”，并對“box”設置了若干屬性。4.1.1盒子模型的概念任務4.1認識盒子模型div是英文division的縮寫，意為分割、分開。<div>標簽就是一個區塊容器標簽，簡稱塊標簽，塊通常稱為盒子。塊標簽可以容納段落、標題、表格、圖像等各種網頁元素。<div>標簽可以嵌套<div>標簽。實際上DIV+CSS布局就是將網頁內容放入若干<div>標簽中，并使用CSS設置這些<div>標簽的屬性。4.1.1盒子模型的概念任務4.1認識盒子模型盒子模型結構一個盒子實際所占有的寬度（或高度）是由“內容+內邊距+邊框+外邊距”組成的。因此，實例1中定義的盒子box的實際寬度和高度均是310px。4.1.1盒子模型的概念任務4.1認識盒子模型<div>標簽的屬性和含義4.1.1盒子模型的概念任務4.1認識盒子模型注意：（1）事實上所有的網頁元素本質上都是以盒子的形式存在的。例如，<body><P><h1~h6><ul><li>等元素都是盒子，這些元素都有默認的盒子屬性值。（2）給盒子添加背景色或背景圖像時，該元素的背景色或背景圖像將出現在內邊距中。（3）雖然每個盒子模型都擁有內邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個元素都必須定義這些屬性。任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.2盒子模型的相關屬性border-top：上邊框寬度樣式顏色border-right：右邊框寬度樣式顏色border-bottom：下邊框寬度樣式顏色border-left：左邊框寬度樣式顏色若四個邊框具有相同的寬度、樣式和顏色，則可以設置如下：border：邊框寬度樣式顏色1.邊框屬性任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.2盒子模型的相關屬性padding-top：上內邊距大小padding-right：右內邊距大小padding-bottom：下內邊距大小padding-left：左內邊距大小若四個內邊距具有相同的大小，則可以設置如下：padding：內邊距大小2.內邊距屬性任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.2盒子模型的相關屬性margin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小margin-left：左外邊距大小若四個外邊距具有相同的大小，則可以設置如下：margin：外邊距大小3.外邊距屬性任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.3CSS設置背景設置背景顏色的格式如下：background-color：#RRGGBB|#rgb(r，g，b)|預定義的顏色值1.設置背景顏色任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.3CSS設置背景實例2設置背景顏色任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.3CSS設置背景2.設置背景圖像設置背景顏色的格式如下：background-image：url（圖像）任務1.3〓網頁制作工具任務4.1認識盒子模型4.1.3CSS設置背景實例3設置背景圖像

修改實例2中的代碼，設置網頁的背景圖像。默認情況下，背景圖像在元素的左上角，并自動沿著水平和豎直兩個方向平鋪，充滿整個網頁任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型1.塊標簽塊標簽在頁面中以區域塊的形式出現，其特點是每個塊標簽通常都會占據一整行或多行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。

常見的塊標簽有<p>

<div>

<ul>

<ol>

<li>等，其中<div>標簽是典型的塊標簽。任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型2.行內標簽行內標簽也稱為內聯標簽或內嵌標簽，其特點是不必在新的一行開始，同時，也不要求其他標簽必須在新的一行開始。行內標簽一般不可以設置寬度、高度和對齊等屬性，常用于控制頁面中的特殊文本的樣式。任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型常見的行內標簽有<strong><b><em><i><a><span>等，其中<span>標簽是典型的行內標簽。2.行內標簽任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型<span>標簽與<div>標簽一樣，它作為容器標簽而被廣泛應用在HTML5中。在<span>與</span>中間同樣可以容納各種HTML標簽，從而形成獨立的對象。2.行內標簽任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型<div>與<span>的區別在于<div>是一個塊標簽，它包圍的標簽會自動換行，而<span>僅僅是一個行內標簽，在它的前后不會換行。<span>沒有結構上的意義，純粹是應用樣式，當其他行內標簽都不合適時，就可以使用<span>標簽。下面舉例說明<span>標簽的使用。2.行內標簽任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.1標簽的類型實例4使用<span>標簽創建網頁，在源文件中添加<span>標簽，設置CSS樣式使<span>標簽中的文字為紅色任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.2標簽的轉換網頁是由多個塊標簽和行內標簽構成的盒子排列而成的。如果希望行內標簽具有塊標簽的某些特性或者需要塊標簽具有行內標簽的某些特性，同時希望不獨占一行排列，則可以使用display屬性對標簽的類型進行轉換。任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.2標簽的轉換display屬性常用的屬性值及含義任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.3塊標簽間的外邊距當上下相鄰的兩個塊標簽相遇時，如果上面的標簽有下外邊距margin-bottom，下面的標簽有上外邊距margin-top，則它們之間的垂直間距不是兩者的和，而是兩者中的較大者。1.塊標簽間的垂直外邊距任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.3塊標簽間的外邊距實例5塊標簽間的垂直外邊距創建網頁，在網頁中定義兩個塊，并設置它們的外邊距實例5定義了第一個塊的下外邊距為10px，定義了第二個塊的上外邊距為30px，此時兩個塊之間的垂直間距為30px，即為margin-bottom和marign-top中的較大者。任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.3塊標簽間的外邊距當兩個相鄰的塊標簽水平排列時，如果左面的標簽有右外邊距margin-right，右面的標簽有左外邊距margin-left，則它們之間的水平間距是兩者的和。2.塊標簽間的水平外邊距任務1.3〓網頁制作工具任務4.2標簽的類型與轉換4.2.3塊標簽間的外邊距實例6塊標簽間的水平外邊距本例定義了第一個塊的右外邊距為10px，定義了第二個塊的左外邊距為30px，此時兩個塊之間的水平間距是40px，即為marign-right和marign-left的和。任務1.3〓網頁制作工具任務4.3綜合案例——制作蘇軾簡介頁面任務1.3〓網頁制作工具任務4.3綜合案例——制作蘇軾簡介頁面項目小結本項

溫馨提示

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

評論

0/150

提交評論