HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第8章 DIV+CSS布局_第1頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第8章 DIV+CSS布局_第2頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第8章 DIV+CSS布局_第3頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第8章 DIV+CSS布局_第4頁
HTML5 CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第8章 DIV+CSS布局_第5頁
已閱讀5頁，還剩55頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第8章DIV+CSS布局《HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

熟悉z-index屬性的用法，能夠設(shè)置元素的堆疊順序

了解標(biāo)簽的定位屬性，能夠使用定位屬性設(shè)置標(biāo)簽的位置

熟悉overflow屬性的用法，能夠設(shè)置溢出內(nèi)容的顯示方式

了解標(biāo)簽的浮動屬性，能夠?yàn)闃?biāo)簽設(shè)置和清除浮動屬性學(xué)習(xí)目標(biāo)/Target

了解全新的HTML5結(jié)構(gòu)標(biāo)簽，能夠闡述各結(jié)構(gòu)標(biāo)簽的作用

熟悉常見的布局類型，能夠在網(wǎng)頁中應(yīng)用不同類型的布局

了解網(wǎng)頁模塊的命名規(guī)范，能夠按照規(guī)范要求命名網(wǎng)頁模塊章節(jié)概述/Summary在網(wǎng)頁設(shè)計(jì)中，如果只按照從上到下的默認(rèn)方式進(jìn)行排版，網(wǎng)頁版面會顯得單調(diào)、混亂。這時(shí)可以對頁面進(jìn)行布局，將各模塊有序排列，使網(wǎng)頁的排版變得更加豐富、美觀。本章將詳細(xì)講解浮動、定位和布局等相關(guān)知識。目錄/Contents010203布局概述布局常用屬性布局其他屬性04布局類型目錄/Contents050607全新的HTML5結(jié)構(gòu)標(biāo)簽網(wǎng)頁模塊命名規(guī)范階段案例——制作通欄banner布局概述8.18.1布局概述為什么要應(yīng)用布局？8.1布局概述【結(jié)論】在制作網(wǎng)頁時(shí)，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁進(jìn)行“排版”。在閱讀報(bào)紙時(shí)會發(fā)現(xiàn)，雖然頁面中的內(nèi)容很多，但是經(jīng)過合理的排版，這些內(nèi)容依然清晰、易讀。例如：8.1布局概述1.確定頁面的版心什么是版心？以某網(wǎng)站為例：【結(jié)論】版心指的是頁面的有效使用區(qū)域，是主要元素及內(nèi)容所在的區(qū)域，一般在瀏覽器窗口中水平居中顯示。8.1布局概述2.分析頁面中的模塊模塊之間的關(guān)系分為并列關(guān)系和包含關(guān)系。例如，右側(cè)為最簡單的頁面布局，該頁面主要由頭部（header）、導(dǎo)航欄（nav）、焦點(diǎn)圖（banner）、內(nèi)容（content）、頁面底部（footer）5部分組成，這幾個(gè)模塊為并列關(guān)系。8.1布局概述3.控制頁面中的各個(gè)模塊分析完頁面模塊后，我們就可以應(yīng)用盒子模型的原理，使用DIV+CSS布局來控制頁面中各個(gè)模塊。而要想提高網(wǎng)頁制作的效率，一定要養(yǎng)成分析頁面布局的習(xí)慣。布局常用屬性8.28.2布局常用屬性

使用DIV+CSS進(jìn)行網(wǎng)頁布局時(shí)，經(jīng)常會使用一些屬性對標(biāo)簽進(jìn)行控制，常見的有浮動屬性和定位屬性。本節(jié)將對這兩種屬性做具體介紹。8.2.1浮動屬性

呆板不美觀為元素設(shè)置浮動，可以實(shí)現(xiàn)左、中、右的排版布局。初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會按照默認(rèn)的排版方式，將頁面中的元素從上到下依次排列。8.2.1浮動屬性

什么是浮動？8.2.1浮動屬性

設(shè)置了浮動屬性的標(biāo)簽會脫離標(biāo)準(zhǔn)文檔流的控制，從而移動到其父標(biāo)簽中指定的位置。標(biāo)準(zhǔn)文檔流是指標(biāo)簽在網(wǎng)頁中會按照其在HTML文檔中的順序從上到下依次排列。8.2.1浮動屬性

基本語法格式選擇器{float:屬性值;}屬性值描述left設(shè)置標(biāo)簽向左浮動right設(shè)置標(biāo)簽向右浮動none設(shè)置標(biāo)簽不浮動，為默認(rèn)值8.2.1浮動屬性

為什么要清除浮動？8.2.1浮動屬性

為什么要清除浮動？由于浮動標(biāo)簽不再占用原文檔流的位置，所以它會對頁面中其他標(biāo)簽的排版產(chǎn)生影響。如果要避免這種影響，就需要對標(biāo)簽清除浮動。8.2.1浮動屬性

如何清除浮動？8.2.1浮動屬性

如何清除浮動？使用clear屬性清除浮動基本語法格式選擇器{clear:屬性值;}屬性值描述left清除左側(cè)的浮動right清除右側(cè)的浮動both同時(shí)清除左右兩側(cè)的浮動常用屬性值8.2.1浮動屬性

例如：clear屬性只能清除標(biāo)簽左右兩側(cè)的浮動。然而在布局網(wǎng)頁時(shí)經(jīng)常會收到一些特殊的浮動影響。8.2.1浮動屬性

使用空標(biāo)簽使用overflow屬性使用::after偽對象在浮動標(biāo)簽之后添加空標(biāo)簽，并為這個(gè)空標(biāo)簽應(yīng)用“clear:both;”樣式，可清除標(biāo)簽浮動所產(chǎn)生的影響，這個(gè)空標(biāo)簽可以是<div>標(biāo)簽、<p>標(biāo)簽等。為被浮動標(biāo)簽影響的父標(biāo)簽添加“overflow:hidden;”樣式，也可以清除浮動對該元素的影響。該方法彌補(bǔ)了使用空標(biāo)簽清除浮動的不足。使用::after偽對象也可以清除浮動，但是該方法只適用于IE8及以上版本的瀏覽器和其他非IE瀏覽器。0102038.2.2定位屬性

浮動布局雖然靈活，但是無法對標(biāo)簽的位置進(jìn)行精確的控制。在CSS中，利用定位屬性配合邊偏移屬性可以實(shí)現(xiàn)對網(wǎng)頁標(biāo)簽的精確定位。8.2.2定位屬性

認(rèn)識定位屬性在CSS中，position屬性用于設(shè)置元素的定位類型，因此定位屬性即position屬性。使用position屬性定位標(biāo)簽的基本語法格式如下。選擇器{position:屬性值;}屬性值描述static設(shè)置靜態(tài)定位（默認(rèn)定位方式）relative設(shè)置相對定位（相對于其原文檔流的位置進(jìn)行定位）absolute設(shè)置絕對定位（相對于其上一個(gè)已經(jīng)定位的父標(biāo)簽進(jìn)行定位）fixed設(shè)置固定定位（相對于瀏覽器窗口進(jìn)行定位）8.2.2定位屬性

認(rèn)識定位屬性定位類型僅用于定義標(biāo)簽以哪種方式定位，并不能確定標(biāo)簽的具體位置。在CSS中，通過邊偏移屬性top、bottom、left或right，可以精確設(shè)置定位標(biāo)簽的坐標(biāo)。邊偏移屬性描述top設(shè)置頂部偏移量，即標(biāo)簽相對于其父標(biāo)簽上邊線的距離bottom設(shè)置底部偏移量，即標(biāo)簽相對于其父標(biāo)簽下邊線的距離left設(shè)置左側(cè)偏移量，即標(biāo)簽相對于其父標(biāo)簽左邊線的距離right設(shè)置右側(cè)偏移量，即標(biāo)簽相對于其父標(biāo)簽右邊線的距離邊偏移屬性的取值為像素值或百分?jǐn)?shù)。position:relative；/*相對定位*/left:50px;/*設(shè)置左側(cè)偏移量為50px*/top:10%;/*設(shè)置頂部偏移量為父標(biāo)簽高度的10%*/8.2.2定位屬性

2.定位類型靜態(tài)定位靜態(tài)定位是標(biāo)簽的默認(rèn)定位方式。當(dāng)position屬性的取值為static時(shí)，可以將標(biāo)簽定位至HTML標(biāo)準(zhǔn)文檔流中默認(rèn)的位置。任何標(biāo)簽在默認(rèn)狀態(tài)下都會以靜態(tài)定位的方式確定自己的位置，所以當(dāng)標(biāo)簽未定義position屬性時(shí)，并不是說該標(biāo)簽沒有自己的位置，它會根據(jù)默認(rèn)值定位于HTML標(biāo)準(zhǔn)文檔流中。在靜態(tài)定位狀態(tài)下，我們無法通過邊偏移屬性（top、bottom、left或right）改變標(biāo)簽的位置。8.2.2定位屬性

2.定位類型定位前定位后相對定位是指將標(biāo)簽相對于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。當(dāng)position屬性的取值為relative時(shí)，可以使標(biāo)簽進(jìn)行相對定位。相對定位8.2.2定位屬性

2.定位類型距離左邊150px距離上圖100px在文檔流中的位置仍然保留著8.2.2定位屬性

2.定位類型絕對定位絕對定位是將子標(biāo)簽依據(jù)其上一個(gè)已經(jīng)定位（絕對、固定或相對定位）的父標(biāo)簽進(jìn)行定位。若所有父標(biāo)簽都沒有設(shè)置定位，設(shè)置絕對定位的子標(biāo)簽會依據(jù)<body>標(biāo)簽（也可以看作瀏覽器窗口）進(jìn)行定位。定位前定位后8.2.2定位屬性

2.定位類型絕對定位距離左邊150px距離頂部100px在文檔流中的位置沒被保存8.2.2定位屬性

2.定位類型固定定位固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定位網(wǎng)頁標(biāo)簽。當(dāng)將標(biāo)簽的position屬性的值設(shè)置為fixed時(shí)，即可將標(biāo)簽設(shè)置為固定定位。當(dāng)對標(biāo)簽設(shè)置固定定位后，該標(biāo)簽將脫離標(biāo)準(zhǔn)文檔流的控制，始終相對瀏覽器窗口來顯示位置。無論如何拖動瀏覽器的滾動條或調(diào)整瀏覽器窗口的大小，該標(biāo)簽都會始終顯示在瀏覽器窗口的固定位置。布局其他屬性8.38.3.1overflow屬性

overflow屬性用于規(guī)定溢出內(nèi)容的顯示狀態(tài)，其基本語法格式如下：選擇器{overflow:屬性值;}overflow屬性的常用值有4個(gè)，具體如下表所示。屬性值描述visible溢出內(nèi)容不會被修剪，呈現(xiàn)在盒子之外（默認(rèn)值）hidden溢出內(nèi)容被修剪，并且被修剪的內(nèi)容不可見auto溢出內(nèi)容被隱藏，在有溢出內(nèi)容時(shí)，盒子中會自動顯示滾動條scroll溢出內(nèi)容被隱藏，不管有無溢出內(nèi)容，盒子中會始終顯示滾動條8.3.2z-index屬性

當(dāng)對多個(gè)標(biāo)簽同時(shí)設(shè)置定位時(shí)，定位標(biāo)簽之間有可能會發(fā)生重疊，如右圖所示。定位導(dǎo)致重疊z-index屬性可以調(diào)整重疊定位元素的堆疊順序，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)值是0。解決重疊問題布局類型8.48.4布局類型使用DIV+CSS可以進(jìn)行多種類型的布局，常見的布局類型有單列布局、兩列布局、三列布局3種類型。本節(jié)將對3種布局類型進(jìn)行詳細(xì)講解。8.4.1單列布局單列布局是網(wǎng)頁布局的基礎(chǔ)，所有復(fù)雜的布局都是在此基礎(chǔ)上演變而來的。單列布局頁面從上到下分別為頭部、導(dǎo)航欄、焦點(diǎn)圖、內(nèi)容和頁面底部，每個(gè)模塊單獨(dú)占據(jù)一行。8.4.2兩列布局兩列布局和單列布局類似，只是內(nèi)容模塊被分為了左右兩部分。兩列布局打破了統(tǒng)一布局的呆板印象，讓頁面看起來更加活躍。內(nèi)容模塊被分為了左右兩部分，實(shí)現(xiàn)這一效果的關(guān)鍵是在內(nèi)容模塊所在的大盒子中嵌套兩個(gè)小盒子，然后對兩個(gè)小盒子分別設(shè)置浮動屬性。8.4.3三列布局一些大型網(wǎng)站，特別是電子商務(wù)類網(wǎng)站，由于內(nèi)容分類較多，通常需要采用三列布局的頁面布局方式。其實(shí)，這種布局方式就是將內(nèi)容模塊分成了左、中、右3部分。內(nèi)容模塊被分為了左、中、右3部分，實(shí)現(xiàn)這一效果的關(guān)鍵是在內(nèi)容模塊所在的大盒子中嵌套3個(gè)小盒子，然后對3個(gè)小盒子分別設(shè)置浮動屬性。全新的HTML5結(jié)構(gòu)標(biāo)簽8.58.5全新的HTML5結(jié)構(gòu)標(biāo)簽使用DIV+CSS布局時(shí)，可以通過設(shè)置class屬性或id屬性的方式區(qū)分網(wǎng)頁中的不同模塊。HTML5中增加了新的結(jié)構(gòu)標(biāo)簽，如<header>標(biāo)簽、<nav>標(biāo)簽、<article>標(biāo)簽等。8.5全新的HTML5結(jié)構(gòu)標(biāo)簽1.<header>標(biāo)簽<header>標(biāo)簽用于設(shè)置網(wǎng)頁頭部的內(nèi)容。此外，<header>標(biāo)簽也可以用來放置整個(gè)頁面或頁面內(nèi)的某個(gè)內(nèi)容區(qū)塊的標(biāo)題，還可以包含網(wǎng)站LOGO、表單或者其他相關(guān)內(nèi)容。示例代碼<header><h1>秋天的味道</h1><h3>你想不想知道秋天的味道？</h3></header>8.5全新的HTML5結(jié)構(gòu)標(biāo)簽2.<nav>標(biāo)簽<nav>標(biāo)簽用于定義導(dǎo)航鏈接，該標(biāo)簽可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁面元素的語義更加明確。示例代碼<nav><ul><li><ahref="#">首頁</li><li><ahref="#">公司概況</li><li><ahref="#">產(chǎn)品展示</li><li><ahref="#">聯(lián)系我們</li></ul></nav>8.5全新的HTML5結(jié)構(gòu)標(biāo)簽2.<nav>標(biāo)簽傳統(tǒng)導(dǎo)航條側(cè)邊欄導(dǎo)航頁內(nèi)導(dǎo)航翻頁導(dǎo)航<nav>標(biāo)簽的應(yīng)用8.5全新的HTML5結(jié)構(gòu)標(biāo)簽3.<footer>標(biāo)簽<footer>標(biāo)簽用于定義一個(gè)頁面或者區(qū)域的底部，它可以包含所有放在頁面底部的內(nèi)容。與<header>標(biāo)簽類似，一個(gè)頁面中可以包含多個(gè)<footer>標(biāo)簽。同時(shí)，也可以在<article>標(biāo)簽或者<section>標(biāo)簽中添加<footer>標(biāo)簽。示例代碼<footer>

頁面底部內(nèi)容</footer>8.5全新的HTML5結(jié)構(gòu)標(biāo)簽4.<article>標(biāo)簽<article>標(biāo)簽用于定義文檔、頁面或者應(yīng)用程序中與上下文不相關(guān)的獨(dú)立部分，該標(biāo)簽經(jīng)常被用于定義日志、新聞或用戶評論等。<article>標(biāo)簽通常有自己的標(biāo)題（可以放在<header>標(biāo)簽中）和腳注（可以放在<footer>標(biāo)簽中）。示例代碼<article><header><h1>秋天的味道</h1><p>你想不想知道秋天的味道？它既是甜的、也是苦的、還是澀的。</p>

</header><footer>

<p>著作權(quán)歸XXXXXX公司所有。</p>

</footer></article>8.5全新的HTML5結(jié)構(gòu)標(biāo)簽5.<section>標(biāo)簽<section>標(biāo)簽用于定義一段專題性的內(nèi)容，一般會帶有標(biāo)題，主要應(yīng)用在文章中。<section>標(biāo)簽具有語義化（讓標(biāo)簽有自己的含義，方便解讀）的特征。當(dāng)使用一個(gè)標(biāo)簽只是為了樣式化或者方便代碼使用時(shí)，應(yīng)該使用無語義化的標(biāo)簽。如果<article>標(biāo)簽、<aside>標(biāo)簽或<nav>標(biāo)簽更符合使用條件，則無須使用<section>標(biāo)簽。沒有標(biāo)題的內(nèi)容模塊不要使用<section>標(biāo)簽。<section>標(biāo)簽和<article>標(biāo)簽可以互相嵌套，沒有上下級關(guān)系。<section>標(biāo)簽中可以包含<article>標(biāo)簽，<article>標(biāo)簽中也可以包含<section>標(biāo)簽。8.5全新的HTML5結(jié)構(gòu)標(biāo)簽6.<aside>標(biāo)簽<aside>標(biāo)簽用來定義當(dāng)前頁面或者文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等有別于主要內(nèi)容的部分。<aside>標(biāo)簽的用法主要分為以下兩種。被包含在<article>標(biāo)簽內(nèi)，作為主要內(nèi)容的附屬信息。在<article>標(biāo)簽之外使用，作為頁面或網(wǎng)站的附屬信息部分。<article><header>

<h1>標(biāo)題</h1></header><section>文章主要內(nèi)容</section><aside>文章的其他相關(guān)信息</aside></article><aside>右側(cè)邊欄菜單</aside>網(wǎng)頁模塊命名規(guī)范8.68.6網(wǎng)頁模塊命名規(guī)范制作網(wǎng)頁時(shí)，為什么要遵循命名規(guī)范？8.6網(wǎng)頁模塊命名規(guī)范如果沒有統(tǒng)一的命名規(guī)范進(jìn)行約束，隨意命名網(wǎng)頁模塊，就會降低網(wǎng)頁代碼的可讀性，讓后續(xù)的維護(hù)工作很難進(jìn)行。網(wǎng)頁模塊的命名規(guī)范8.6網(wǎng)頁模塊命名規(guī)范命名需要遵循以下幾個(gè)原則：命名避免使用中文字符，例如id="導(dǎo)航欄"。命名不能以數(shù)字開頭，例如id="1box"。避免使用標(biāo)簽名，例如id="h3"。用最少的字符達(dá)到最容易理解的意義。8.6網(wǎng)頁模塊命名規(guī)范駝峰命名駝峰命名分為大駝峰命名和小駝峰命名。其中大駝峰命名的單詞首字母均采用大寫，如NavFirstName、NavLastName等。小駝峰命名的第一個(gè)單詞首字母小寫，其余單詞首字母大寫，例如navFirstName、navLastName等。由小寫字母和下劃線組成，單詞之間用下劃線連接，如nav_first_name、nav_last_name。蛇形命名網(wǎng)頁中，常用的命名方式8.6網(wǎng)頁模塊命名規(guī)范網(wǎng)頁模塊常用的名稱相關(guān)模塊命名相關(guān)模塊命名頭header內(nèi)容cont

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論