響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程-課件1_第1頁(yè)
響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程-課件1_第2頁(yè)
響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程-課件1_第3頁(yè)
響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程-課件1_第4頁(yè)
響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程-課件1_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

單元1響應(yīng)式和HTML5+CSS3初體驗(yàn)單元1響應(yīng)式和HTML5+CSS3初體驗(yàn)1學(xué)習(xí)目標(biāo)1了解HTML5和CSS3的特性、優(yōu)勢(shì)和編碼過(guò)程掌握了解熟悉響應(yīng)式Web設(shè)計(jì)的概念2掌握了解熟悉3掌握HTML5的語(yǔ)義化結(jié)構(gòu)標(biāo)簽學(xué)習(xí)目標(biāo)1了解HTML5和CSS3掌握了解熟悉響應(yīng)式Web設(shè)2響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介知識(shí)點(diǎn)概述

越來(lái)越多的人使用小屏幕設(shè)備上網(wǎng)，針對(duì)不同屏幕的設(shè)備進(jìn)行網(wǎng)頁(yè)制作成本非常大，這時(shí)，響應(yīng)式Web設(shè)計(jì)應(yīng)運(yùn)而生。響應(yīng)式Web設(shè)計(jì)（ResponsiveWebDesign）是由EthanMarcotte在2010年提出的，他將媒體查詢、柵格布局和彈性圖片合并稱為響應(yīng)式Web設(shè)計(jì)。[點(diǎn)擊播放視頻]響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介知識(shí)點(diǎn)概述越來(lái)越多的人使用3響應(yīng)式Web設(shè)計(jì)是和HTML5+CSS3互相配合與支持的，技術(shù)點(diǎn)包括：HTML5+CSS3基本網(wǎng)頁(yè)設(shè)計(jì)。1HTML5+CSS3HTML5中的viewport2提供可以配置視口的屬性。CSS3媒體查詢3

識(shí)別媒體類型，特征（屏幕寬度，像素比等）。流式布局4可以根據(jù)瀏覽器的寬度和屏幕的大小自動(dòng)調(diào)整效果。響應(yīng)式柵格系統(tǒng)5

依賴于媒體查詢，根據(jù)不同的屏幕大小調(diào)整布局。流式圖片隨流式布局進(jìn)行相應(yīng)縮放。6響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介響應(yīng)式Web設(shè)計(jì)是和HTML5+CSS3互相配合與支持的，技4使用HTML5+CSS3繪制HTML5的logo1頁(yè)面展示：本項(xiàng)目將使用HTML5+CSS3繪制出HTML5的logo，頁(yè)面效果如下所示。2技術(shù)要點(diǎn)：HTML5新特性HTML5基本語(yǔ)法CSS3新特性在HTML中引入樣式項(xiàng)目1-1-項(xiàng)目描述使用HTML5+CSS3繪制HTML5的logo1頁(yè)面展示：5知識(shí)點(diǎn)概述HTML5不僅僅是HTML規(guī)范的最新版本，它也代表了一系列Web相關(guān)技術(shù)的總稱，其中最重要的三項(xiàng)技術(shù)就是HTML5核心規(guī)范、CSS3（CascadingStyleSheet，層疊樣式表的最新版本）和JavaScript（一種腳本語(yǔ)言，用于增強(qiáng)網(wǎng)頁(yè)的動(dòng)態(tài)功能），這三項(xiàng)技術(shù)在后面的學(xué)習(xí)中會(huì)詳細(xì)講解。HTML的歷史可以追溯到很久以前，我們這里就不做討論了。本書(shū)的關(guān)注點(diǎn)在于HTML5帶給我們的全新感受。前導(dǎo)知識(shí)-HTML5新特性[點(diǎn)擊播放視頻]知識(shí)點(diǎn)概述HTML5不僅僅是HTML規(guī)范的最新6用瀏覽器打開(kāi)網(wǎng)址：/html/logo/。在該網(wǎng)站將看到HTML5的八大革新，如圖下所示。進(jìn)化而非顛覆語(yǔ)義網(wǎng)（Semantics）：提供了一組豐富的語(yǔ)義化標(biāo)簽。離線&存儲(chǔ)（Offline&Storage）：HTML5AppCache，LocalStorage，IndexedDB和FileAPI使Web應(yīng)用程序更加迅速，并提供了離線使用的能力。設(shè)備訪問(wèn)（DeviceAccess）：增強(qiáng)了設(shè)備感知能力使得Web應(yīng)用在電腦、pad、手機(jī)上均能使用。通信（Connectivity）：增強(qiáng)了通信能力，意味著增強(qiáng)了聊天程序的實(shí)時(shí)性和網(wǎng)絡(luò)游戲的順暢性。呈現(xiàn)（CSS3）：CSS3可以很高效的實(shí)現(xiàn)頁(yè)面特效，并不會(huì)影響頁(yè)面的語(yǔ)義和性能。性能和集成（Performance&Integration）：WebWorker讓瀏覽器可以多線程處理后臺(tái)任務(wù)而不阻塞用戶界面渲染。同時(shí)，性能檢測(cè)工具方便評(píng)估程序性能圖形和特效（3D,Graphics&Effects）：Canvas、SVG和WebGL等功能使得圖形渲染更高效，頁(yè)面效果更加炫酷。多媒體（Multimedia）：音頻視頻能力的增強(qiáng)是HTML5的最大突破！前導(dǎo)知識(shí)-HTML5新特性用瀏覽器打開(kāi)網(wǎng)址：/htm7HTML5以“簡(jiǎn)單至上，盡可能簡(jiǎn)化”為原則做了以下改進(jìn)：化繁為簡(jiǎn)簡(jiǎn)化DOCTYPE和字符集聲明；強(qiáng)化HTML5API，讓頁(yè)面設(shè)計(jì)更加簡(jiǎn)單；以瀏覽器的原生能力代替復(fù)雜的JavaScript代碼；精確定義的錯(cuò)誤恢復(fù)機(jī)制，如果頁(yè)面中有錯(cuò)誤，也不會(huì)影響整個(gè)頁(yè)面的顯示。前導(dǎo)知識(shí)-HTML5新特性HTML5以“簡(jiǎn)單至上，盡可能簡(jiǎn)化”為原則做了以下改進(jìn)：化繁8HTML5規(guī)范以“用戶至上”為宗旨。也就是說(shuō)在遇到?jīng)_突時(shí)，規(guī)范的優(yōu)先級(jí)如下：

用戶>頁(yè)面作者>實(shí)現(xiàn)者（瀏覽器）>規(guī)范開(kāi)發(fā)者（W3C/WHATWG）

>純理論。另外，HTML5還引入了一種新的安全模型來(lái)保證HTML5足夠安全。良好的用戶體驗(yàn)各大瀏覽器對(duì)HTML5的支持正在不斷完善，目前Chrome對(duì)HTML5的支持最好，F(xiàn)irefox、Opera、Safari、IE10對(duì)HTML5也有很好的支持。前導(dǎo)知識(shí)-HTML5新特性HTML5規(guī)范以“用戶至上”為宗旨。也就是說(shuō)在遇到?jīng)_突時(shí)，規(guī)9HTML文檔是由多種標(biāo)簽組成，一個(gè)HTML5的標(biāo)準(zhǔn)模板如下所示：基本語(yǔ)法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><!--這是注釋--></body></html><!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用的HTML版本，不可省略。<html>標(biāo)簽標(biāo)志著HTML文檔的開(kāi)始，</html>標(biāo)簽標(biāo)志著HTML文檔的結(jié)束，在它們之間的是文檔的頭部和主體內(nèi)容。lang屬性規(guī)定元素內(nèi)容的語(yǔ)言。<head>標(biāo)簽用于定義HTML文檔的頭部信息，主要用來(lái)封裝其他位于文檔頭部的標(biāo)簽，例如<title>、<meta>、<link>及<style>等，用來(lái)描述文檔的標(biāo)題、作者以及和其他文檔的關(guān)系等。一個(gè)HTML文檔只能含有一對(duì)<head>標(biāo)簽，絕大多數(shù)文檔頭部包含的數(shù)據(jù)不會(huì)真正作為內(nèi)容顯示在頁(yè)面中。<body>標(biāo)簽用于定義HTML文檔所要顯示的內(nèi)容。一個(gè)HTML文檔只能含有一對(duì)<body>標(biāo)簽，且<body>標(biāo)簽必須在<html>標(biāo)簽內(nèi)，位于<head>頭部標(biāo)簽之后，與<head>標(biāo)簽是并列關(guān)系。<!---->中的內(nèi)容用于對(duì)代碼進(jìn)行解釋，不會(huì)顯示到瀏覽器中。前導(dǎo)知識(shí)-HTML5基本語(yǔ)法HTML文檔是由多種標(biāo)簽組成，一個(gè)HTML5的標(biāo)準(zhǔn)模板如下所10CSS即層疊樣式表（CascadingStylesheet），主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS提供了豐富的功能，如字體、顏色、背景的控制及整體排版等。CSS3是CSS的最新版本，該版本提供了更加豐富且實(shí)用的規(guī)范，如：列表模塊、超鏈接、語(yǔ)言模塊、背景和邊框、顏色、文字特效、多欄布局、動(dòng)畫(huà)等等，這些規(guī)范的使用會(huì)在后面的單元中將依次講解。另外，響應(yīng)式設(shè)計(jì)就是通過(guò)CSS3的媒體查詢來(lái)實(shí)現(xiàn)的。前導(dǎo)知識(shí)-CSS3新特性CSS即層疊樣式表（CascadingStylesheet11任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)樣式，其基本語(yǔ)法如下所示：行內(nèi)式

<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">

內(nèi)容

</標(biāo)簽名>內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)簽中，并且用<style>標(biāo)簽定義，其基本語(yǔ)法如下所示：內(nèi)嵌式<style>

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style>前導(dǎo)知識(shí)-如何在HTML中引入樣式表任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)樣式，其基12鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語(yǔ)法格式如下：外鏈?zhǔn)?lt;linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/><link/>標(biāo)簽需要放在<head>頭部標(biāo)簽中，并且指定<link/>標(biāo)簽的三個(gè)屬性，具體如下：href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。type：定義所鏈接的文檔類型，“text/css”表示鏈接的外部文件為CSS樣式表。rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。前導(dǎo)知識(shí)-如何在HTML中引入樣式表鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣13為了更好的兼容不同內(nèi)核的瀏覽器，CSS3中部分屬性需要添加瀏覽器的私有前綴，將某個(gè)樣式以-xx-開(kāi)頭，具體如下：瀏覽器私有前綴-webkit--moz--ms--o-只有以Webkit為內(nèi)核的瀏覽器可以解析，如Chrome、Safari。只有以Gecko為內(nèi)核的瀏覽器可以解析，如Firefox。只有以Trident為內(nèi)核的瀏覽器可以解析，如IE。只有以Presto為內(nèi)核的瀏覽器可以解析，如Opera。前導(dǎo)知識(shí)-CSS3與瀏覽器為了更好的兼容不同內(nèi)核的瀏覽器，CSS3中部分屬性需要添加瀏14使用HTML5+CSS3繪制HTML5的logo本項(xiàng)目是由div塊級(jí)元素拼接而成，用CSS樣式控制每一塊的樣式和位置，頁(yè)面拼接的步驟如右圖所示。1頁(yè)面結(jié)構(gòu)：2實(shí)現(xiàn)細(xì)節(jié)：定位出整個(gè)頁(yè)面的背景區(qū)域“bg”，并實(shí)現(xiàn)背景光束定義“l(fā)ogo”樣式，并畫(huà)出盾牌的左半邊畫(huà)出盾牌的右半邊畫(huà)出淺橘色區(qū)域畫(huà)出“5”的左半邊畫(huà)出“5”的右半邊用色塊遮蓋多余的部分在盾牌上方，添加“HTML”圖片案例代碼（詳見(jiàn)教材代碼實(shí)現(xiàn)）項(xiàng)目1-1-項(xiàng)目分析使用HTML5+CSS3繪制HTML5的logo本項(xiàng)目是由d1521構(gòu)建移動(dòng)版旅游網(wǎng)站頁(yè)面頁(yè)面展示：本項(xiàng)目將使用HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽來(lái)構(gòu)建一個(gè)簡(jiǎn)單的頁(yè)面。與此同時(shí)，也通過(guò)本項(xiàng)目來(lái)回顧一下CSS的基礎(chǔ)知識(shí)。頁(yè)面效果如右圖所示。技術(shù)要點(diǎn)：HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽CSS選擇器盒子模型CSS浮動(dòng)與定位項(xiàng)目1-2-項(xiàng)目描述21構(gòu)建移動(dòng)版旅游網(wǎng)站頁(yè)面頁(yè)面展示：本項(xiàng)目將使用HTML5語(yǔ)16HTML5中常用的語(yǔ)義化標(biāo)簽，如下表所示。標(biāo)簽名描述<header>表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題。<section>頁(yè)面中的一個(gè)內(nèi)容區(qū)塊，比如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面的其他部分，可以和h1、h2…等元素結(jié)合起來(lái)使用，表示文檔結(jié)構(gòu)。<article>表示頁(yè)面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，比如一篇文章。<aside>表示<article>標(biāo)簽素內(nèi)容之外的、與<article>標(biāo)簽內(nèi)容相關(guān)的輔助信息?？捎米魑恼碌膫?cè)欄<hgroup>表示對(duì)整個(gè)頁(yè)面或頁(yè)面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。<figure>表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。<figcaption>定義<figure>標(biāo)簽的標(biāo)題。<nav>表示頁(yè)面中導(dǎo)航鏈接的部分。<footer>表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。HTML5語(yǔ)義化標(biāo)簽前導(dǎo)知識(shí)-HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽HTML5中常用的語(yǔ)義化標(biāo)簽，如下表所示。標(biāo)簽名描述<hea17傳統(tǒng)方式布局與語(yǔ)義化標(biāo)簽布局傳統(tǒng)方式布局語(yǔ)義化標(biāo)簽布局

注意：HTML中的標(biāo)簽與元素在HTML中，標(biāo)簽由尖括號(hào)包圍的；元素由開(kāi)始標(biāo)簽、結(jié)束標(biāo)簽和中間的內(nèi)容三部分組成，如：<title>Document</title>，title為元素名。在本旅游網(wǎng)站項(xiàng)目中，傳統(tǒng)方式布局與HTML5語(yǔ)義化標(biāo)簽布局的對(duì)比如下所示。前導(dǎo)知識(shí)-HTML5語(yǔ)義化結(jié)構(gòu)標(biāo)簽傳統(tǒng)方式布局與語(yǔ)義化標(biāo)簽布局傳統(tǒng)方式布局語(yǔ)義化標(biāo)簽布局18CSS選擇器的作用就是從HTML頁(yè)面中找出特定的某類元素。常用的幾類CSS選擇器如下表所示。常用的CSS選擇器選擇器代碼示例代碼說(shuō)明通用選擇器**{}選擇所有元素。標(biāo)簽選擇器元素名稱a{}、body{}、p{}根據(jù)標(biāo)簽選擇元素。類選擇器.<類名>.beam{}根據(jù)class的值選擇元素。id選擇器#<id值>#logo{}根據(jù)id的值選擇元素。屬性選擇器[<條件>][href]{}、[attr=”val”]{}根據(jù)屬性選擇元素。并集選擇器<選擇器>,<選擇器>em,strong{}同時(shí)匹配多個(gè)選擇器，取多個(gè)選擇器的并集。后代選擇器<選擇器><選擇器>.asideNavli{}先匹配第二個(gè)選擇器的元素，并且屬于第一個(gè)選擇器內(nèi)。子代選擇器<選擇器>><選擇器>ul>li{}匹配匹配第二個(gè)選擇器，且為第一個(gè)選擇器的元素的后代。兄弟選擇器<選擇器>+<選擇器>p+a{}匹配緊跟第一個(gè)選擇器并匹配第二個(gè)選擇器的元素，如緊跟p元素后的a元素。偽選擇器::<偽元素>或:<偽類>p::first-line{}、a:hover{}偽選擇器不是直接對(duì)應(yīng)HTML中定義的元素，而是向選擇器增加特殊的效果。偽選擇器比較特殊，分為兩種偽元素和偽類兩種。前導(dǎo)知識(shí)-CSS選擇器CSS選擇器的作用就是從HTML頁(yè)面中找出特定的某類元素。常19元素名描述::first-line匹配文本塊的首行。如p::first-line表示選中p元素的首行。::first-letter匹配文本內(nèi)容的首字母。::before在選中元素的內(nèi)容之前插入內(nèi)容。::after在選中元素的內(nèi)容之后插入內(nèi)容。元素名描述:root選擇文檔中的根元素，通常返回html。:first-child父元素的第一個(gè)子元素。:last-child父元素的最后一個(gè)子無(wú)素。:only-child父元素有且只有一個(gè)子元素。:only-of-type父元素有且只有一個(gè)指定類型的元素。:nth-child(n)匹配父元素的第n個(gè)子元素。:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素。:nth-of-type(n)匹配父元素定義類型的第n個(gè)子元素。:nth-last-of-type(n)匹配父元素定義類型的倒數(shù)n個(gè)子元素。:link匹配鏈接元素。:visited匹配用戶已訪問(wèn)的鏈接元素。:hover匹配處于鼠標(biāo)懸停狀態(tài)下的元素。:active匹配處于被激活狀態(tài)下的元素，包括即將點(diǎn)擊（按壓）。:focus匹配處于獲得焦點(diǎn)狀態(tài)下的元素。:enabled(:disabled)匹配啟用（禁用）狀態(tài)的元素。:checked匹配被選中的單選按鈕和復(fù)選框的input元素。:default匹配默認(rèn)元素。:valid(:invalid)根據(jù)輸入數(shù)據(jù)驗(yàn)證，匹配有效（無(wú)效）的input元素。:in-range(out-of-range)匹配在指定范圍之內(nèi)（之外）受限的input元素。偽類選擇器偽元素選擇器案例代碼（詳見(jiàn)教材demo1-1）前導(dǎo)知識(shí)-CSS選擇器元素名描述::first-line匹配文本塊的首行。如p::20CSS中的一個(gè)基本概念就是盒子模型，所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形區(qū)域，即元素的盒子。盒子由margin（外邊距）、border（邊框）、padding（內(nèi)邊距）、content（內(nèi)容）四部分組成。盒子的基本概念外邊距margin內(nèi)邊距padding邊框border內(nèi)容content前導(dǎo)知識(shí)-盒子模型CSS中的一個(gè)基本概念就是盒子模型，所謂盒子模型就是把HTM21網(wǎng)頁(yè)是由多個(gè)元素構(gòu)成的盒子排列而成的。而多個(gè)盒子之間會(huì)出現(xiàn)外邊距合并的現(xiàn)象，具體如下：多個(gè)盒子之間需要注意的問(wèn)題上下相鄰相鄰的塊元素垂直外邊距合并，如果上面的元素有下外邊距，下面的元素有上外邊距，則垂直邊距為兩者中的較大者。嵌套塊級(jí)元素的垂直外邊距合并，父元素沒(méi)有上內(nèi)邊距和邊框，則父元素與子元素的上外邊距合并為較大者。前導(dǎo)知識(shí)-盒子模型網(wǎng)頁(yè)是由多個(gè)元素構(gòu)成的盒子排列而成的。而多個(gè)盒子之間會(huì)出現(xiàn)外22知識(shí)點(diǎn)概述

在一個(gè)網(wǎng)頁(yè)中，默認(rèn)情況下塊級(jí)元素獨(dú)占一行，是自上而下排列，行內(nèi)元素自左向右排列，但是在實(shí)際的網(wǎng)頁(yè)布局中往往需要改變這種單調(diào)的排列方式，使網(wǎng)頁(yè)內(nèi)容變得豐富多彩，CSS的浮動(dòng)和定位完美的解決了這個(gè)問(wèn)題。前導(dǎo)知識(shí)-CSS浮動(dòng)與定位知識(shí)點(diǎn)概述在一個(gè)網(wǎng)頁(yè)中，默認(rèn)情況下塊級(jí)元素獨(dú)占一23CSS的浮動(dòng)可以通過(guò)float屬性進(jìn)行設(shè)置，默認(rèn)值為none（不浮動(dòng)）。CSS浮動(dòng)框1{float:right;}框1{float:none;}框1{float:left;}框1、2、3{float:left;}前導(dǎo)知識(shí)-CSS浮動(dòng)與定位CSS的浮動(dòng)可以通過(guò)float屬性進(jìn)行設(shè)置，默認(rèn)值為none24在網(wǎng)頁(yè)開(kāi)發(fā)中，如果需要網(wǎng)頁(yè)中的某個(gè)元素在網(wǎng)頁(yè)的特定位置出現(xiàn)，例如彈出菜單，這時(shí)可以通過(guò)CSS的position屬性進(jìn)行設(shè)置，示例如下：CSS定位position:relative;/*相對(duì)定位方式*/left:30px;/*距左邊線30px*/top:10px;/*距頂部邊線10px*/值描述static靜態(tài)定位（默認(rèn)定位方式）。relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位。absolute絕對(duì)定位，相對(duì)于static定位以外的第一個(gè)上級(jí)元素進(jìn)行定位。fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。邊偏移屬性描述top頂端偏移量，定義元素相對(duì)于其參照元素上邊線的距離。bottom底部偏移量，定義元素相對(duì)于其參照元素下邊線的距離。left左側(cè)偏移量，定義元素相對(duì)于其參照元素左邊線的距離。right右側(cè)偏移量，定義元素相對(duì)于其參照元素右邊線的距離用于設(shè)置菜單定位方式的常用屬性值如下表所示。用于設(shè)置元素具體位置的常用屬性值如下表所示。前導(dǎo)知識(shí)-CSS浮動(dòng)與定位在網(wǎng)頁(yè)開(kāi)發(fā)中，如果需要網(wǎng)頁(yè)中的某個(gè)元素在網(wǎng)頁(yè)的特定位置出現(xiàn)，25浮動(dòng)和定位的使用區(qū)別案例代碼（詳見(jiàn)教材demo1-2）其實(shí)浮動(dòng)的本意是用來(lái)解決圖片和文字排版問(wèn)題的，但是由于它十分好用，被大部分開(kāi)發(fā)者應(yīng)用到了網(wǎng)頁(yè)布局，并成為了公認(rèn)布局的一種方式。該圖中4個(gè)粉色部分使用浮動(dòng)的知識(shí)對(duì)頁(yè)面進(jìn)行布局，然后使用絕對(duì)定位知識(shí)創(chuàng)建了一個(gè)浮動(dòng)的div元素。需要注意的是，position:absolute會(huì)導(dǎo)致元素脫離文檔流，被定位的元素等于在文檔中不占據(jù)任何位置，在另一個(gè)層呈現(xiàn)。float也會(huì)導(dǎo)致元素脫離文檔流，但還在文檔或容器中占據(jù)位置，把文檔流和其他float元素向左或向右擠，并可能導(dǎo)致?lián)Q行。前導(dǎo)知識(shí)-CSS浮動(dòng)與定位浮動(dòng)和定位的使用區(qū)別案例代碼（詳見(jiàn)教材demo1-2）其實(shí)浮26z-index層疊等級(jí)屬性當(dāng)一個(gè)父元素中的多個(gè)子元素同時(shí)被定位，定位元素之間

溫馨提示

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

評(píng)論

0/150

提交評(píng)論