div+css布局教程-課件_第1頁(yè)
div+css布局教程-課件_第2頁(yè)
div+css布局教程-課件_第3頁(yè)
div+css布局教程-課件_第4頁(yè)
div+css布局教程-課件_第5頁(yè)
已閱讀5頁(yè)，還剩35頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

DIV+CSS布局教程

TheTutorialofcss+div

1PPT課件div+css布局教程目錄：1.CSS基礎(chǔ)知識(shí)2.網(wǎng)頁(yè)布局常用屬性3.網(wǎng)頁(yè)布局實(shí)例4.Web標(biāo)準(zhǔn)化思想與網(wǎng)頁(yè)重構(gòu)

2PPT課件一、CSS基礎(chǔ)知識(shí)

1.css簡(jiǎn)介2.css語(yǔ)法

3.選擇器

4.實(shí)用小技巧div+css布局教程3PPT課件1、css簡(jiǎn)介CSS指層疊樣式表(CascadingStyleSheets)

CSS語(yǔ)言是一種標(biāo)記語(yǔ)言,它不需要編譯,可以直接由瀏覽器執(zhí)行樣式通常存儲(chǔ)在樣式表中

外部樣式表通常存儲(chǔ)在CSS文件中外部樣式表可以極大提高工作效率

4PPT課件2、css語(yǔ)法CSS語(yǔ)法由三部分構(gòu)成：選擇器、屬性和值：P{color:#ff0000;background:#000000;}其中“p”,我們稱(chēng)為選擇器，指明我們要給“p”定義樣式；樣式聲明寫(xiě)在一對(duì)大括號(hào)“{}”中；Color和background稱(chēng)為“屬性”，不通屬性之間用“；”分隔“#ff0000”和“#000000”是屬性的值5PPT課件2、css語(yǔ)法幾點(diǎn)值得注意的地方：1、選擇器的分組可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開(kāi)。（有助于優(yōu)化樣式表，提高效率）例子：h1{color:green;}h2{color:green;}h3{color:green;}我們可以這樣寫(xiě)：h1,h2,h3{color:green;}

樣式太臃腫了，該減肥了!6PPT課件2、css語(yǔ)法幾點(diǎn)值得注意的地方：2、繼承及其問(wèn)題根據(jù)CSS，子元素從父元素繼承屬性。

例子：body{font-family:Verdana,sans-serif;}根據(jù)上面這條規(guī)則，站點(diǎn)的body元素將使用Verdana字體通過(guò)CSS繼承，子元素將繼承最高級(jí)元素（在本例中是body）所擁有的屬性（這些子元素諸如p,td,ul,ol,ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字體被所有的子元素繼承，又該怎么做呢？比方說(shuō)，你希望段落的字體是Times。我們可以這樣寫(xiě)：p{font-family:Times,"TimesNewRoman",serif;}

7PPT課件2、css語(yǔ)法幾點(diǎn)值得注意的地方：3、層疊次序當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？樣式表分為：瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）

優(yōu)先級(jí)為：內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head>標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。8PPT課件2、css語(yǔ)法幾點(diǎn)值得注意的地方：4、高效的CSS（1）使用外聯(lián)樣式代替內(nèi)聯(lián)樣式和內(nèi)部樣式表不推薦使用：<pstyle=“color:red”></p>或者是：<styletype=“text/css”>p{color:red;}</style>(2)使用組選擇器

h1,h2,h3{color:green;}(3)使用繼承不推薦使用：td{font-size:12px;}p{font-size:12px;}li{font-size:12px;}…應(yīng)該這樣寫(xiě)body{font-size:12px;}9PPT課件2、css語(yǔ)法幾點(diǎn)值得注意的地方：（4）使用簡(jiǎn)記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應(yīng)該這樣寫(xiě)margin:1px3px4px2px;10PPT課件3、選擇器1、CSS派生選擇器

ulli{font-weight:bold;}定義ul內(nèi)li標(biāo)簽的樣式Pspana{font-weight:bold;}定義段落下a標(biāo)簽的樣式可以使用派生選擇器給一個(gè)元素內(nèi)的子元素定義樣式。兩個(gè)元素之間用空格表示。11PPT課件3、選擇器2、id選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以“#”來(lái)定義。例子：#red{color:red;}#green{color:green;}

注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次。

12PPT課件3、選擇器2、類(lèi)選擇器在CSS中，類(lèi)選擇器以一個(gè)點(diǎn)號(hào)顯示：例子：.center{text-align:center}

注意：類(lèi)名的第一個(gè)字符不能使用數(shù)字

13PPT課件4、實(shí)用小技巧1、橋接樣式表方法在一些大型的項(xiàng)目中，由于樣式表文件過(guò)多，使用橋接樣式表可以便捷高效的管理這些樣式。14PPT課件4、實(shí)用小技巧書(shū)寫(xiě)方式為：@importurl(color.css);@imporpurl(type.css);引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.15PPT課件4、實(shí)用小技巧2、關(guān)于ID和Class命名的規(guī)范總體思想：語(yǔ)義化的命名16PPT課件4、實(shí)用小技巧個(gè)人推薦在開(kāi)發(fā)過(guò)程中逐漸形成自己的命名規(guī)范，如header/footer/main/hd/bd/nav/box/mode等，使用連字符“-”如site-nav/quick-menu/secondaryContent/。

但回到具體情況，不同的項(xiàng)目也應(yīng)該根據(jù)具體情況對(duì)命名方式作出選擇，不同方式的命名規(guī)則應(yīng)該結(jié)合使用，大型網(wǎng)站，如淘寶，更適合使用語(yǔ)義命名結(jié)合的方式，對(duì)于頁(yè)面的樣式修改，能快速敏捷地做出相應(yīng)調(diào)整，對(duì)于制作，能快速地拼湊，而大部分宣稱(chēng)型的單頁(yè)，個(gè)人更推薦使用結(jié)構(gòu)化的命名方式，頁(yè)面制作者能方便快速地完成頁(yè)面，而不用多把時(shí)間陷近命名的考慮中，17PPT課件二、網(wǎng)頁(yè)布局常用屬性

1.css盒子模型2.css定位和浮動(dòng)div+css布局教程18PPT課件1、css盒子模型19PPT課件1、css盒子模型在CSS中，width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的尺寸。假設(shè)框的每個(gè)邊上有10個(gè)像素的外邊距和5個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到100個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為70像素#box{width:70px;margin:10px;padding:5px;}20PPT課件1、css盒子模型CSS盒子模型是在網(wǎng)頁(yè)布局中必須用到的，其中常用的屬性有：Margin（外邊距）,padding

(內(nèi)邊距)分別有上下左右四個(gè)屬性，topbottomleftright例子：h1{margin:10px0px15px5px;}

順序?yàn)樯?、右、下、左順時(shí)針旋轉(zhuǎn)

Padding屬性的寫(xiě)法與margin一樣。21PPT課件1、css盒子模型需要注意的地方：CSS外邊距合并外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。22PPT課件1、css盒子模型當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：23PPT課件2、css定位和浮動(dòng)CSS為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來(lái)通常需要使用多個(gè)表格才能完成的任務(wù)。CSS的定位和浮動(dòng)是控制布局的重要方法。通過(guò)定位和浮動(dòng)能夠解決在表格時(shí)代往往需要代碼才能完成的布局。有效的減少了代碼量，使得頁(yè)面結(jié)構(gòu)更加清晰，代碼更加精簡(jiǎn)。24PPT課件2、css定位和浮動(dòng)我們首先必須了解一個(gè)概念：“塊級(jí)元素”，“行內(nèi)元素”常見(jiàn)的塊級(jí)元素有：div,ul,p,h1常見(jiàn)行內(nèi)元素有：span,strong行內(nèi)元素就是在一行內(nèi)的元素，只能放在行內(nèi)；塊級(jí)元素，就是一個(gè)四方塊，可以放在頁(yè)面上任何地方。塊級(jí)無(wú)素的顯著特點(diǎn)是：每個(gè)塊級(jí)元素都是從一個(gè)新行開(kāi)始顯示，而且其后的無(wú)素也需另起一行進(jìn)行顯示。（我們可以利用這個(gè)特性對(duì)不同的塊進(jìn)行不同的排列，這樣就形成了網(wǎng)頁(yè)的布局。）

在網(wǎng)頁(yè)布局中，我們使用塊級(jí)元素進(jìn)行版面的搭建，使用行內(nèi)元素對(duì)塊級(jí)元素里面的內(nèi)容進(jìn)行修飾25PPT課件2、css定位和浮動(dòng)例子：<div>ab<span>c</span>defg</div>這里的div為塊級(jí)元素，span為行內(nèi)元素。我們可以把塊級(jí)元素比喻為一個(gè)大的容器，而行內(nèi)元素就是其中的某一個(gè)小容器。了解了塊級(jí)元素與行內(nèi)元素之后，我們就可以利用定位和浮動(dòng)屬性對(duì)塊級(jí)元素進(jìn)行排列布局了。26PPT課件2、css定位和浮動(dòng)1，定位div{position:relative;}//相對(duì)定位div{position:absolute;}//絕對(duì)定位CSS相對(duì)定位

概念：元素沒(méi)有脫離文檔流，還是普通流定位模型的一部分，會(huì)對(duì)文檔流中其它元素布局產(chǎn)生影響?？梢岳斫鉃椋涸O(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。27PPT課件2、css定位和浮動(dòng)1，定位例子：#box_relative{position:relative;left:30px;top:20px;}

我們看見(jiàn)，框2脫離原來(lái)的位置，相對(duì)與原占位空間偏移了一定的距離。但是框2原本的占位空間沒(méi)有消失。所以相對(duì)定位不會(huì)對(duì)布局格式產(chǎn)生影響。（實(shí)例演示）28PPT課件2、css定位和浮動(dòng)1，定位絕對(duì)定位概念：設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。可以理解為：絕對(duì)定位的元素的位置相對(duì)于最近的已設(shè)置相對(duì)定位的父元素，如果文檔中的元素沒(méi)有已設(shè)置為相對(duì)定位的父元素，那么它的位置相對(duì)于最初的包含塊（body的左上角）。

29PPT課件2、css定位和浮動(dòng)1，定位絕對(duì)定位例子：#box_relative{position:absolute;left:30px;top:20px;}

絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同。（實(shí)例演示）30PPT課件2、css定位和浮動(dòng)1，定位絕對(duì)定位提示：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。可以通過(guò)設(shè)置z-index屬性來(lái)控制這些框的堆放次序?？偨Y(jié):相對(duì)定位的元素不會(huì)脫離文檔流，占用文檔流的空間.絕對(duì)定位的元素脫離文檔流，偏移不影響文檔流中的其它元素.絕對(duì)定位的元素以最近的定位祖先元素為參照物。

絕對(duì)定位應(yīng)用——容器在瀏覽器中垂直居中31PPT課件2、css定位和浮動(dòng)2，浮動(dòng)概念：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。屬性：float

：left;float:right;

用法：請(qǐng)看下圖，當(dāng)把框1向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：

32PPT課件2、css定位和浮動(dòng)2，浮動(dòng)網(wǎng)頁(yè)布局中的應(yīng)用：在網(wǎng)頁(yè)布局中，浮動(dòng)是必須使用到的方法。我們常常利用浮動(dòng)使指定的塊移動(dòng)到我們需要的地方。比如兩列，或者三列的布局。比如橫向的菜單等等……實(shí)例：如何讓三列橫向排列。33PPT課件2、css定位和浮動(dòng)2，浮動(dòng)浮動(dòng)的兄弟：清理浮動(dòng)屬性：clear;clear屬性的值可以是left、right、both或none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

為什么要用到清理浮動(dòng)，我們來(lái)看一個(gè)例子。34PPT課件三、網(wǎng)頁(yè)布局實(shí)例

div+css布局教程QQformac頁(yè)面分析35PPT課件四、web標(biāo)準(zhǔn)化思想與網(wǎng)頁(yè)重構(gòu)

所謂web標(biāo)準(zhǔn)化，有兩層含義。一、就是W3C系列規(guī)范，html4.0，xhtml1.0，css2.1，ECMAScript，DOM,XML等等，作為一個(gè)頁(yè)面工程師，要學(xué)會(huì)熟讀標(biāo)準(zhǔn)，認(rèn)識(shí)和了解標(biāo)準(zhǔn)。W3C標(biāo)準(zhǔn)就是讓頁(yè)面在不同的終端都可以運(yùn)行，讓使用各種終端的用戶(hù)都能瀏覽你的頁(yè)面，也就是跨越平臺(tái)，獲得更大眾化的用戶(hù)的使用。

div+css布局教程36PPT課件四、web標(biāo)準(zhǔn)化思想與網(wǎng)頁(yè)重構(gòu)

二、結(jié)構(gòu)，表現(xiàn)，行為三者的分離。結(jié)構(gòu)是嚴(yán)格的語(yǔ)義化HTML文檔編寫(xiě)，CSS是HTML頁(yè)面的視覺(jué)處理，行為是通過(guò)用戶(hù)行為的觸發(fā)去動(dòng)態(tài)改變頁(yè)面，內(nèi)容修改，功能的完成等等。分離不是簡(jiǎn)單的文件的分離，而是嚴(yán)格的分工的分離，不要用table去布局

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論