《網(wǎng)頁設(shè)計(jì)制作》課件-項(xiàng)目4

《網(wǎng)頁設(shè)計(jì)制作》項(xiàng)目44.1盒子模型4.2元素分類與轉(zhuǎn)換4.3元素浮動(dòng)與定位目

錄4.1盒子模型什么是盒子模型？認(rèn)識(shí)盒子模型4.1盒子模型聯(lián)想一下生活中常見的盒子模型？它們的共同特點(diǎn)認(rèn)識(shí)盒子模型4.1盒子模型以手機(jī)盒子為例，分析盒子模型認(rèn)識(shí)盒子模型4.1盒子模型?所謂的盒子模型在HTML中就是一個(gè)盛裝

元素內(nèi)容的容器。?每個(gè)盒子模型都由元素的內(nèi)容、內(nèi)邊距

（padding）、邊框（border）和外邊距

（margin）組成。認(rèn)識(shí)盒子模型4.1盒子模型<div>標(biāo)簽div英文全稱為“division”，譯為中文是“分割、區(qū)域”。<div>標(biāo)簽簡單而言就是一個(gè)塊標(biāo)簽，可以實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。知識(shí)點(diǎn)講解1<div>標(biāo)簽是一個(gè)塊容器標(biāo)簽。2可以將網(wǎng)頁分割為獨(dú)立的部分，以實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。3大多數(shù)HTML標(biāo)簽都可以嵌套在<div>標(biāo)簽中，<div>中還可以嵌套多層<div>。4可以替代大多數(shù)的塊級(jí)文本標(biāo)簽。4.1盒子模型盒子的寬與高盒子總寬度和總高度?網(wǎng)頁是由多個(gè)盒子排列而成?寬度和高度決定了盒子的大小高度寬度4.1盒子模型盒子總寬度和總高度

width

左內(nèi)邊距

右內(nèi)邊距邊框

左外邊距

右外邊距?每個(gè)盒子都有固定的大小

邊框盒子的寬與高4.1盒子模型結(jié)論盒子的總寬度=

width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和盒子模型的總寬度與總高度盒子的寬與高4.1盒子模型多學(xué)一招：什么是實(shí)體化三屬性實(shí)體化指的是給標(biāo)簽劃分區(qū)域（畫盒子），并通過寬度、高度、背景色這三種屬性，讓標(biāo)簽實(shí)現(xiàn)現(xiàn)形，成為一個(gè)盒子。需要注意的是，寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（<img/>和<input/>標(biāo)簽除外）?！究偨Y(jié)】4.1盒子模型4.2元素分類與轉(zhuǎn)換4.3元素浮動(dòng)與定位目

錄4.2元素類型與轉(zhuǎn)換元素的類型在頁面中以區(qū)域塊的形式出現(xiàn)。每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行?？梢詫?duì)其設(shè)置寬度、高度、對(duì)齊等屬性。不占有獨(dú)立的區(qū)域。僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)。一般不可以設(shè)置寬度、高度、對(duì)齊等屬性。塊元素行內(nèi)元素4.2元素類型與轉(zhuǎn)換元素的類型<p><ul>常見的塊元素<h1>—<h6><ol><div><li>其中<div>標(biāo)簽是最典型的塊元素。4.2元素類型與轉(zhuǎn)換元素的類型<a><em>常見的行內(nèi)元素<strong><span><b><u>其中<span>標(biāo)簽最典型的行內(nèi)元素。4.2元素類型與轉(zhuǎn)換Span標(biāo)簽和<div>標(biāo)簽不同的是，<span>是行內(nèi)元素，僅作為只能包含文本和各種行內(nèi)標(biāo)簽的容器，如加粗標(biāo)簽<strong>、傾斜標(biāo)簽<em>等。知識(shí)點(diǎn)講解1<span>標(biāo)簽是一個(gè)行內(nèi)標(biāo)簽。2<span>與</span>之間只能包含文本和各種行內(nèi)標(biāo)簽。3

<span>標(biāo)簽常用于定義網(wǎng)頁中某些特殊顯示的文本，配合class屬性使用。4當(dāng)其他行內(nèi)標(biāo)簽都不合適時(shí)，就可以使用<span>標(biāo)簽。4.2元素類型與轉(zhuǎn)換元素類型的轉(zhuǎn)換displayinlineblockinline-blocknone此元素將顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)的display屬性值）。此元素將顯示為塊元素（塊元素默認(rèn)的display屬性值）。此元素將顯示為行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行。此元素將被隱藏，不顯示，也不占用頁面空間。4.1盒子模型4.2元素分類與轉(zhuǎn)換4.3元素浮動(dòng)與定位目

錄4.3元素浮動(dòng)與定位應(yīng)用排列圖文排列論壇分享在使用div+css進(jìn)行網(wǎng)頁布局時(shí)，經(jīng)常會(huì)使用一些屬性對(duì)標(biāo)簽進(jìn)行控制，常見的屬性有浮動(dòng)屬性（float屬性）和定位屬性（position屬性）。標(biāo)簽的浮動(dòng)屬性初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會(huì)按照默認(rèn)的排版方式，將頁面中的元素從上到下一

一羅列。呆板不美觀為元素設(shè)置浮動(dòng)，可以使頁面元素變得整齊有序。4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性什么是浮動(dòng)？4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性所謂元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性基本語法格式選擇器{float:屬性值;}屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none元素不浮動(dòng)（默認(rèn)值）4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性為什么要清除浮動(dòng)？4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性由于浮動(dòng)元素不再占用原文檔流中的位置，所以會(huì)對(duì)頁面中其他元素的排版產(chǎn)生影響，如果要避免這種影響，就需要對(duì)元素清除浮動(dòng)。4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性如何清除浮動(dòng)？4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性運(yùn)用clear屬性清除浮動(dòng)基本語法格式選擇器{clear:屬性值;}屬性值描述left不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）right不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）both同時(shí)清除左右兩側(cè)浮動(dòng)的影響常用屬性值4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性例如：運(yùn)用clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響。然而在制作網(wǎng)頁時(shí)，經(jīng)常會(huì)遇到一些特殊的浮動(dòng)影響。4.3元素浮動(dòng)與定位標(biāo)簽的浮動(dòng)屬性空標(biāo)簽overflowafter偽對(duì)象在浮動(dòng)元素之后添加空標(biāo)簽，并對(duì)該標(biāo)簽應(yīng)用“clear:both”樣式，可清除浮動(dòng)。這個(gè)空標(biāo)簽可以為<div>、<p>、<hr/>等任何標(biāo)簽?！皁verflow:hidden;”樣式，也可以清除浮動(dòng)對(duì)該元素的影響，該方法彌補(bǔ)了空標(biāo)簽清除浮動(dòng)的不足。使用after偽對(duì)象也可以清除浮動(dòng)，但是該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。0102034.3元素浮動(dòng)與定位標(biāo)簽的定位屬性浮動(dòng)布局雖然靈活，但是卻無法對(duì)元素的位置進(jìn)行精確的控制。在CSS中，通過定位屬性可以實(shí)現(xiàn)網(wǎng)頁中元素的精確定位。4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性什么是定位？4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性在CSS中，通過CSS定位（CSSposition）可以實(shí)現(xiàn)網(wǎng)頁元素的精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性選擇器{position:屬性值；}position屬性用于定義元素的定位模式，其基本語法格式如下：position屬性的常用值有四個(gè)，具體如下表所示。值描述static自動(dòng)定位（默認(rèn)定位方式）relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位定位模式4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，如下表所示。邊偏移屬性描述top頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離bottom底部偏移量，定義元素相對(duì)于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離Right右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性靜態(tài)定位是元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。任何元素在默認(rèn)狀態(tài)下都會(huì)以靜態(tài)定位來確定自己的位置，所以當(dāng)沒有定義position屬性時(shí)，并不說明該元素沒有自己的位置，它會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變?cè)氐奈恢谩?.3元素浮動(dòng)與定位標(biāo)簽的定位屬性相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。定位前定位后4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性距離左邊150px距離上圖100px在文檔流中的位置仍然保留著4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位（絕對(duì)、固定或相對(duì)定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。定位前定位后4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性距離左邊150px距離頂部100px在文檔流中的位置沒被保存4.3元素浮動(dòng)與定位標(biāo)簽的定位屬性固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。4.3元素浮動(dòng)與定位其他屬性overflow屬性overflow屬性可以解決溢出問題，其基本語法格式如下：選擇器{overflow:屬性值;}overflow屬性的常用值有四個(gè)，具體如下表所示。屬性值描述visible內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（默認(rèn)值）hidden溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容scroll溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條Z-index標(biāo)簽層疊當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊，如右圖所示。定位導(dǎo)致重疊z-index可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)值是0。解決重疊問題其他屬性

布局類型單列布局“單列布局”是網(wǎng)頁布局的基礎(chǔ)，所有復(fù)雜的布局都是在此基礎(chǔ)上演變而來的。

布局類型兩列布局“兩列布局”和“一列布局”類似，只是網(wǎng)頁內(nèi)容被分為了左右兩部分。對(duì)于一些大型網(wǎng)站，特別是電子商務(wù)類網(wǎng)站，由于內(nèi)容分類較多，通常需要采用“三列布局”的頁面布局方式。

布局類型三列布局

布局類型通欄布局設(shè)置為通欄后，無論頁面放大或縮小，該模塊都將橫鋪于瀏覽器窗口中。導(dǎo)航欄通欄頁面底部通欄無論布局類型是單列布局、兩列布局或者多列布局，為了網(wǎng)站的美觀，網(wǎng)頁中的一些模塊，例如頭部、導(dǎo)航、焦點(diǎn)圖或頁面底部等經(jīng)常需要通欄顯示。8.5網(wǎng)頁模塊命名規(guī)范制作網(wǎng)頁時(shí)，為什么要遵循命名規(guī)范？如果沒有統(tǒng)一的命名規(guī)范進(jìn)行必要的約束，隨意地命名，就會(huì)使整個(gè)網(wǎng)站的后續(xù)工作很難進(jìn)行。網(wǎng)頁模塊的命名規(guī)范8.5網(wǎng)頁模塊命名規(guī)范8.5網(wǎng)頁模塊命名規(guī)范用最少的字母達(dá)到最容易理解的意義。不能占用關(guān)鍵字（例如id=“h3”）。不能以數(shù)字開頭命名（例如id=“1nav”）。避免使用中文字符命名（例如id=“導(dǎo)航欄”）。命名需要遵循以下幾個(gè)原則：8.5網(wǎng)頁模塊命名規(guī)范駝峰式除了第一個(gè)單詞外后面的單詞首寫字母都要大寫（例如：partOne）。每一個(gè)單詞之間用“_”連接（例如：content_one）。帕斯卡網(wǎng)頁中，常用的命名方式8.5網(wǎng)頁模塊命名規(guī)范相關(guān)模塊命名相關(guān)模塊命名頭header內(nèi)容content/container導(dǎo)航nav尾footer側(cè)欄sidebar欄目column左邊、右邊、中間leftrightcenter登錄條loginbar標(biāo)志logo廣告banner頁面主體main熱點(diǎn)hot新聞news下載download子導(dǎo)航subnav菜單menu子菜單submenu搜索search友情鏈接frIEndli