《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目4 盒子模型_第1頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目4 盒子模型_第2頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目4 盒子模型_第3頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目4 盒子模型_第4頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目4 盒子模型_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計與制作項目四

盒子模型N

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

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

常見的塊標(biāo)簽有<p>

<div>

<ul>

<ol>

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

溫馨提示

  • 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

提交評論