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

下載本文檔

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

文檔簡介

DIV+CSS布局教程

TheTutorialofcss+div

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

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

1.css簡介2.css語法

3.選擇器

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

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

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

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

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

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

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

優(yōu)先級為：內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head>標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。8PPT課件2、css語法幾點(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)該這樣寫body{font-size:12px;}9PPT課件2、css語法幾點(diǎn)值得注意的地方：（4）使用簡記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應(yīng)該這樣寫margin:1px3px4px2px;10PPT課件3、選擇器1、CSS派生選擇器

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

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

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

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

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

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

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

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

順序?yàn)樯稀⒂?、下、左順時針旋轉(zhuǎn)

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

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

概念：元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產(chǎn)生影響。可以理解為：設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。27PPT課件2、css定位和浮動1，定位例子：#box_relative{position:relative;left:30px;top:20px;}

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

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

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

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

：left;float:right;

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

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

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

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

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

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

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

溫馨提示

  • 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

提交評論