網(wǎng)絡(luò)營(yíng)銷(xiāo)27divcss教程_第1頁(yè)
網(wǎng)絡(luò)營(yíng)銷(xiāo)27divcss教程_第2頁(yè)
網(wǎng)絡(luò)營(yíng)銷(xiāo)27divcss教程_第3頁(yè)
網(wǎng)絡(luò)營(yíng)銷(xiāo)27divcss教程_第4頁(yè)
網(wǎng)絡(luò)營(yíng)銷(xiāo)27divcss教程_第5頁(yè)
已閱讀5頁(yè)，還剩81頁(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)介

Chapter3CSSdiv+css教程Page

2本章主要內(nèi)容0、基礎(chǔ)知識(shí)1、CSS概述2、CSS基礎(chǔ)語(yǔ)法3、CSS選擇器4、CSS主要屬性5、CSS核心機(jī)制-盒子模型6、CSS重點(diǎn)和難點(diǎn)-定位7、綜合示例基礎(chǔ)知識(shí)瀏覽器1首款商業(yè)化瀏覽器Netscape發(fā)布(1994年10月13日)2.微軟IE6.0

(2001年8月27日)3.Opera推出首款Windows瀏覽器Opera2.1(1997年1月1日)4.網(wǎng)景創(chuàng)立開(kāi)源項(xiàng)目Mozilla(1998年2月23日)5.蘋(píng)果Safari進(jìn)軍瀏覽器市場(chǎng)(2003年1月7日)6.Firefox

2.0發(fā)布（2006年10月）7.谷歌推出Chrome瀏覽器(2008年9月2日)8.IE8.0發(fā)布（2009年3月）9.IE9.0發(fā)布(2010年09年16)Page

3基礎(chǔ)知識(shí)瀏覽器模式

當(dāng)瀏覽器廠(chǎng)商開(kāi)始創(chuàng)建于標(biāo)準(zhǔn)兼容的瀏覽器時(shí)，他們希望確保向后兼容性。為了實(shí)現(xiàn)這一點(diǎn)，他們創(chuàng)建了兩種表現(xiàn)形式：標(biāo)準(zhǔn)模式和怪異模式(quirksmode)。怪異模式通常模擬老式瀏覽器（比如IE6,在標(biāo)準(zhǔn)模式中使用正確的框模型，在怪異模式中使用老式的專(zhuān)有框模型)Page

4基礎(chǔ)知識(shí)DOCTYPE切換瀏覽器根據(jù)DOCTYPE是否存在來(lái)選擇相應(yīng)的模式，DOCTYPE切換是瀏覽器用來(lái)區(qū)分遺留文檔和符合標(biāo)準(zhǔn)的文檔的手段。無(wú)論是否編寫(xiě)了有效的CSS,如果選擇了錯(cuò)誤的DOCTYPE,那么頁(yè)面就將以怪異模式表現(xiàn)。因此，一定要在站點(diǎn)的每個(gè)頁(yè)面上包括形式完整的DOCTYPE聲明。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">Page

5一、CSS概述1、什么是CSS？

CSS：層疊樣式表(CascadingStyleSheet),定義了如何顯示HTML元素，用來(lái)控制網(wǎng)頁(yè)的樣式和布局。Page

6<html><head> <title>Hello!</title></head><body><h2>通過(guò)樣式表來(lái)改變網(wǎng)頁(yè)外表</h2><p>歡迎來(lái)到CSS世界</p><p>css給我們帶來(lái)豐富多彩的世界</p></body></html>Demo1未設(shè)計(jì)CSS的頁(yè)面simplewithoutcss.html<head><styletype="text/css">h2{color:red;font-size:46px;font-family:宋體}#p1{text-indent:10px;background:blue;font-family:黑體}p{text-indent:20px;background:green;font-family:黑體} </style></head><body><h2>通過(guò)樣式表來(lái)改變網(wǎng)頁(yè)外表</h2><pid="p1">歡迎來(lái)到CSS世界</p><p>css給我們帶來(lái)豐富多彩的世界</p></body>Page

7Demo1

帶有CSS的頁(yè)面Simple.htmlPage

8Page

92、CSS作用第一，簡(jiǎn)化網(wǎng)頁(yè)的代碼，提高訪(fǎng)問(wèn)速度外部的CSS文件會(huì)被瀏覽器保存在緩存里，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量。第二，便于維護(hù) (1)便于修改網(wǎng)站樣式:只要修改css文件，就可改變整個(gè)網(wǎng)站的風(fēng)格特色。避免一個(gè)個(gè)網(wǎng)頁(yè)的修改，大大減少重復(fù)勞動(dòng)的工作量；(2)可以重用樣式；第三，頁(yè)面內(nèi)容和顯示樣式分離

Page

10山經(jīng)網(wǎng)站的CSS文件Page

11二、CSS基礎(chǔ)語(yǔ)法1、CSS語(yǔ)法由三部分組成：選擇器、屬性和值Page

12selector{property:value}selector:選擇器,希望定義樣式的HTML標(biāo)簽;property:相應(yīng)標(biāo)簽的屬性;value:屬性值;例如：p{color:#ff0000;font-size:12px}

2、注意事項(xiàng)1、多個(gè)屬性值用分號(hào)隔開(kāi),最后一個(gè)可加也可不加;2、如下寫(xiě)法可讀性更好些；Page

13p{

text-align:center;

color:black;

font-family:arial;}

3、CSS對(duì)大小寫(xiě)不敏感，但在選擇器中對(duì)class和id名稱(chēng)敏感；4、注釋符號(hào)/*注釋內(nèi)容*/3、如何使用CSS?Page

141、外部樣式表:先建立外部樣式表文件(.css)，然后在head內(nèi)使用link標(biāo)簽.鏈接(LinkingtoaStyleSheet)<head>

<title>titleofarticle</title>

<linkrel=“stylesheet”href=“../main.css”type=“text/css”>

</head>body{font-size:10px;}

h1{font-size:15px;font-weight:bold;color:maroon}

h2{font-size:13px;font-weight:bold;color:blue}

p{font-family:"Arial";color:black}main.css如何使用CSS?-續(xù)(2)內(nèi)部樣式表：直接在<head>標(biāo)簽內(nèi)插入<style>...</style>塊對(duì)象.(EmbeddingaStyleBlock)Page

15<html><head>

<styletype="text/css">

body{font-size:10px;}

h1{font-size:15px;font-weight:bold;color:maroon}

h2{font-size:13px;font-weight:bold;color:blue}

p{font-family:"Arial";color:black}

</style></head><body></body>如何使用CSS?-續(xù)3、內(nèi)聯(lián)樣式：在標(biāo)簽的style屬性中定義樣式(InlineStyles)Page

16<pstyle=“font-size:14px;color:red;">

這一行被增加了左右的外補(bǔ)丁<p>注意：不推薦使用該方式！將結(jié)構(gòu)與表現(xiàn)混雜在一起，喪失樣式表原有的優(yōu)勢(shì)！注意：應(yīng)用次序當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？Page

17缺省設(shè)置外部樣式表(<link>鏈接的樣式表)內(nèi)部樣式表(位于<style>標(biāo)簽定義的樣式）內(nèi)聯(lián)樣式（利用標(biāo)簽的style屬性定義的樣式）內(nèi)聯(lián)樣式最高優(yōu)先權(quán)，然后<style>樣式,<link>樣式,最后是缺省值三、CSS選擇器1、元素選擇器2、ID選擇器；3、類(lèi)選擇器；4、派生選擇器；5、其他Page

18CSS選擇器-續(xù)1、元素選擇器：以HTML標(biāo)簽作為選擇器。Page

19table{line-height:20px;font-size:12px}h1,h2{font-size:14px;width:120px;}

a{text-decoration:none;}2、ID選擇器:為指定id的HTML標(biāo)簽應(yīng)用樣式,以#來(lái)定義；#note{width:200px;height:200px;background-color:#0000FF;border:1pxdotted#000;}<divid="note“></div>CSS選擇器-續(xù)Page

203、類(lèi)(class)選擇器：以.號(hào)定義；.note{width:200px;height:200px;background-color:#0000FF;border:1pxdotted#000;}<divclass="note“></div><h1class="center">title1</h1><p

class=“center”>para1</p>

.center{text-align:center}

cssselector.htmlCSS選擇器-續(xù)4、派生選擇器:通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式。Page

21<ol><li><span>第一篇</span>

CSS</li><li><span>第二篇</span>Javascript</li></ol>

lispan{font-style:italic;font-weight:bold;font-size:20px;

}

ahover.htmlCSS選擇器-續(xù)<divid="news"> <span>2001級(jí)新生入學(xué)</span> <p>9月10日至12日，我校2010級(jí)新生順利入學(xué)..</p> </div>Page

22經(jīng)常將元素、id、class、后代選擇器組合使用也可。#news{width:200px;height:200px;border:1pxsolidblue;}#newsspan{background-color:#FFFF00; font-weight:bold; font-size:20px; font-family:黑體; text-indent:15px;}CSS選擇器-續(xù)Page

235、其他(1)通用選擇器:可以匹配所有元素,用*號(hào)表示,用來(lái)對(duì)頁(yè)面上所有元素應(yīng)用樣式；a:link{color:#FF0000}/*未訪(fǎng)問(wèn)的鏈接*/a:visited{color:#00FF00}/*已訪(fǎng)問(wèn)的鏈接*/a:hover{color:#FF00FF}/*鼠標(biāo)移動(dòng)到鏈接上*/a:active{color:#0000FF}/*選定的鏈接*/(2)偽類(lèi):用于向某些選擇器添加特殊的效果,比如鏈接的狀態(tài)。*{padding:0px;margin:0px;}注意：書(shū)寫(xiě)順序link、visited、hover、active四、主要屬性主要的CSS屬性包括了字體類(lèi)、文本類(lèi)、背景類(lèi)、定位類(lèi)、布局類(lèi)等等。具體參見(jiàn)《CSS2中文手冊(cè)》。Page

24五、CSS核心機(jī)制-盒子模型(BoxModel)Page

251、盒子模型概述2、盒子的四個(gè)要素3、盒子大小計(jì)算4、盒子外邊距合并5、總結(jié)（一）盒子模型概述盒子模型是CSS的基石,指定標(biāo)簽如何顯示；頁(yè)面上的每個(gè)元素都被當(dāng)成一個(gè)矩形盒子,占據(jù)一定的頁(yè)面空間,這個(gè)盒子由內(nèi)容(content)、內(nèi)邊距(填充,padding)、邊框(border)和外邊距(空白邊,margin)組成；Page

26盒子模型概述（續(xù)）任何web頁(yè)面都是由很多這樣的盒子，通過(guò)不同排列組合而成，盒子之間相互影響，要掌握盒子模型需要從以下2個(gè)方面去理解：?jiǎn)蝹€(gè)盒子的內(nèi)部結(jié)構(gòu)；多個(gè)盒子之間的相互關(guān)系；Page

27（二）盒子模型的四個(gè)要素內(nèi)容(Content)：盒子里面所裝的內(nèi)容;內(nèi)邊距(填充,padding):內(nèi)容到邊界之間的距離；邊框(border)：盒子本身；外邊距(空白邊,margin)：與其他盒子之間的距離；Page

28-》默認(rèn)情況下,盒子邊框是無(wú),背景色是透明的,所以,看不到盒子Page

29margin:margin-left/margin-right/margin-top/margin-bottompadding:padding-left/padding-right/padding-top/padding-bottom盒子示意圖Demo2理解盒子模型Page

30<divid="wrap"><divid="box">BoxModel</div></div>#box{width:100px;height:50px;padding:20px;border:5pxsolidred;background:teal;margin:20px;}Content的高度與寬度Demo2–續(xù)Page

31Content:元素內(nèi)容,可以是文本、圖像等等。此例是BoxModelPadding:圍繞在內(nèi)容外的邊距。此例是padding：20px;Border:設(shè)置在內(nèi)邊距外的邊框，包括大小、顏色；此例是border:5pxsolidred;Margin:圍繞在邊框外的邊距大小。此例是margin:20px;Width:元素內(nèi)容的寬度。此例是width:100px;Height:元素內(nèi)容的高度。此例是height:50px;1、邊框(border)每個(gè)標(biāo)簽可以設(shè)置4個(gè)方向的邊框。Page

32注意:border-style必須設(shè)置,否則無(wú)法顯示邊框！邊框樣式(border-style)-必須設(shè)置Page

33Page

34Demo3設(shè)置h1的邊框，上下左為黑色邊框，右邊為紅色Page

35h1{ border:1pxsolidblack; border-right-color:red;}注意：border和border-right-color的書(shū)寫(xiě)順序2、內(nèi)邊距(填充，padding)padding區(qū)域在border與content之間；背景色和背景圖像會(huì)覆蓋padding和content組成的區(qū)域；Page

36設(shè)置內(nèi)邊距(填充)的大小Page

37注意：padding不可以為負(fù)值3、外邊距(margin)外邊距(margin)在border之外,margin區(qū)域不應(yīng)用背景;CSS中margin默認(rèn)值為0,但瀏覽器會(huì)提供預(yù)定樣式;Page

38設(shè)置margin的大小Page

39注意：margin可以為負(fù)值，而且很多情況下需要使用負(fù)值。（三）、盒子大小的計(jì)算Page

40盒子實(shí)際寬度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right盒子大小的計(jì)算-續(xù)Page

41盒子實(shí)際高度=margin-top+border-top+padding-top+width+padding-bottom+border-bottom+margin-bottomExample2Page

42<divid="box">計(jì)算在網(wǎng)頁(yè)占據(jù)多大空間？</div>#box{width:200px;margin:20px;padding:20px;border:solid1px#000000;}注意：在CSS

中，width

和height

指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸但是，IE5.x和IE6在怪異模式中使用自己的非標(biāo)準(zhǔn)框架模型，這些瀏覽器的width不是內(nèi)容的寬度，而是：width=content+padding+borderPage

43(四)、盒子外邊距合并外邊距合并是指，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。存在如下幾種情形的外邊距的合并：Page

44Page

45合并前合并后Page

46發(fā)生嵌套時(shí),若設(shè)父元素的邊框和填充,父元素的上下pading會(huì)和子元素的上下margin發(fā)生合并。若父元素的邊框或填充不為0，不存在疊加的問(wèn)題。-續(xù)上頁(yè)P(yáng)age

47合并前合并后經(jīng)驗(yàn):如果有盒子嵌套，要調(diào)整外面盒子和里面盒子之間的距離，一般用外面盒子的padding來(lái)調(diào)整,不要用里面盒子的margin,這樣可以避免外邊距疊加的現(xiàn)象出現(xiàn)。行內(nèi)元素之間的水平margin不會(huì)疊加Page

48（五）、盒模型總結(jié)Page

49關(guān)于盒模型，注意一下幾點(diǎn)：1、邊框border默認(rèn)值為0，即不顯示，而padding和margin都無(wú)法看到，只能看到它們對(duì)元素的影響；2、margin可以設(shè)負(fù)值，而padding不可以；3、行內(nèi)元素如a,span,img,input等,高度寬度設(shè)置無(wú)效的，其寬度就是自身文字或者圖片的寬度；定義上下外邊距不影響行高。4、大部分html元素的margin,padding默認(rèn)值為0，但有少數(shù)元素的瀏覽器默認(rèn)值不為0，例如:body,p,ul,li,form標(biāo)記等，有必要先設(shè)置為0；盒模型總結(jié)-續(xù)Page

50對(duì)padding,margin等屬性值的簡(jiǎn)寫(xiě)：盒模型總結(jié)-續(xù)Page

51注意：

只有標(biāo)準(zhǔn)文檔流中塊元素的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。補(bǔ)充：瀏覽器的怪異模式與標(biāo)準(zhǔn)模式quirks

mode和strictmode是瀏覽器解析css的兩種模式1、歷史原因早期瀏覽器對(duì)css解析時(shí),未遵守w3c標(biāo)準(zhǔn),此時(shí)的瀏覽器的解析模式稱(chēng)為怪異模式！后來(lái),隨著w3c標(biāo)準(zhǔn)的重要,瀏覽器開(kāi)始依照w3c標(biāo)準(zhǔn)解析Css,稱(chēng)為標(biāo)準(zhǔn)模式！

因此,為了支持早期在怪異模式下開(kāi)發(fā)的站點(diǎn),瀏覽器并未放棄怪異模式,所以瀏覽器當(dāng)解釋頁(yè)面時(shí),首先得判讀采用哪種模式進(jìn)行解釋?zhuān)?、瀏覽器如何判斷采用哪種模式呢？

采用doctype聲明！瀏覽器根據(jù)doctype是否存在以及是何種doctype來(lái)確定。Page

52怪異模式與標(biāo)準(zhǔn)模式-續(xù)3、兩種模式的區(qū)別？最大的不同就是提現(xiàn)在對(duì)盒模式的解釋上Page

53<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"""><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""">標(biāo)準(zhǔn)模式的Doctype的聲明如下：Page

54設(shè)置為標(biāo)準(zhǔn)模式后，是不是就沒(méi)有問(wèn)題了呢？標(biāo)準(zhǔn)模式確實(shí)會(huì)讓IE對(duì)CSS的解釋合理很多,但事情并沒(méi)有那么簡(jiǎn)單。不同瀏覽器即使同樣在標(biāo)準(zhǔn)模式,其對(duì)CSS的理解仍然有所差異,而差異當(dāng)中最多只可能有一個(gè)是正確的,甚至可能全部都是錯(cuò)誤的!六、CSS重點(diǎn)和難點(diǎn)-定位與浮動(dòng)Page

551、塊元素與行內(nèi)元素2、相對(duì)定位3、絕對(duì)定位4、浮動(dòng)定位position:relative/absloute;浮動(dòng)float:left/right;Page

56首先，得把瀏覽器窗口看成一個(gè)坐標(biāo)系統(tǒng)(一)塊元素與行元素塊元素:Block

element,默認(rèn)狀態(tài)下每次都占據(jù)一整行，后面內(nèi)容必須再新起一行顯示，可以有效設(shè)置其width、height、margin等值;<p>,<div>,<h1>..<h6>,<ul><li>,<table>…等行內(nèi)元素:Inlineelement(內(nèi)聯(lián)元素),默認(rèn)狀態(tài)下其內(nèi)容在一行內(nèi)進(jìn)行顯示，設(shè)置其高度和寬度無(wú)效；<span>,<a>,<img>,<input>等；

Page

57Page

581、每個(gè)塊元素都獨(dú)占一行;行元素則在一行內(nèi)顯示;2、可以利用元素的display屬性進(jìn)行轉(zhuǎn)換；

3、塊元素一般用作容器,可以容納其他塊元素和行元素,而行元素只能容納文本或者其他行元素;4、行元素的高度寬度設(shè)置無(wú)效，其寬度就是自身文字或者圖片的寬度；Demo塊元素與行元素display:inline/block/none;文檔流(normaldocumentstream)Page

59不使用其他與排列和定位相關(guān)的特殊css規(guī)則時(shí)，各種元素的排列規(guī)則，即各元素框的位置由元素在(X)Html中的位置決定。塊元素占滿(mǎn)整個(gè)一行，在頁(yè)面中豎向排列；行內(nèi)元素在同一行內(nèi)橫向排列；普通流下的盒子排列方式(二)相對(duì)定位（position:relative）相對(duì)定位:對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置(left/right/top/bottom),讓這個(gè)元素“相對(duì)于”它的原始位置進(jìn)行上下左右移動(dòng)。Page

60注意：在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。（三）絕對(duì)定位(position:absolute)對(duì)元素進(jìn)行絕對(duì)定位，將position屬性值設(shè)為absolute。再通過(guò)屬性left/right/top/bottom決定將盒子放置在哪里設(shè)置為絕對(duì)定位的元素框?qū)奈臋n流完全刪除,文檔流中其它元素的布局就像絕對(duì)定位的元素不存在一樣，相對(duì)于其包含塊進(jìn)行位置移動(dòng)(包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊)元素絕對(duì)定位后將變成一個(gè)塊級(jí)框，而不論原來(lái)是塊級(jí)框還是行內(nèi)框。Page

61絕對(duì)定位Page

62絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于最初的包含塊。最初的包含塊可能是Body。相對(duì)定位與絕對(duì)定位的比較1、定位方式：相對(duì)定位是相對(duì)于元素初始位置進(jìn)行定位，而絕對(duì)定位則是相對(duì)于最近的已定位的父元素；2、文檔流：相對(duì)定位后，元素原本所占的空間仍保留；而絕對(duì)定位后，元素框從文檔流完全刪除，其它元素的布局就像絕對(duì)定位的元素不存在一樣。Page

63（四）浮動(dòng)Page

64如何創(chuàng)建如下所示的文字環(huán)繞圖片的樣式？浮動(dòng)本質(zhì)上是用來(lái)干什么的？Page

65浮動(dòng)出現(xiàn)的意義其實(shí)只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已。而我們目前用浮動(dòng)實(shí)現(xiàn)頁(yè)面布局本不是浮動(dòng)該干的事情。headerbarSidebarMaincontent SidebarFooterbar用浮動(dòng)實(shí)現(xiàn)頁(yè)面布局其實(shí)不是本職工作！Page

66浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含元素或另一個(gè)浮動(dòng)元素的邊框?yàn)橹埂Ｓ捎诟?dòng)元素不在文檔的普通流中，所以普通流中的塊框表現(xiàn)得就像浮動(dòng)元素不存在一樣,將忽略該元素并填補(bǔ)他原先的空間。浮動(dòng)主要用于實(shí)現(xiàn)文字環(huán)繞圖片以及頁(yè)面布局。float：none/left/right浮動(dòng)-續(xù)例1，框1向右浮動(dòng)Page

67框1框2框3不浮動(dòng)的框框1框2框3框1向右浮動(dòng)當(dāng)把框1向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣Float示例例2，框1向左浮動(dòng)Page

68框1框3框1向左浮動(dòng)當(dāng)框1向左浮動(dòng)，它脫離文檔流并且向左移動(dòng)，直到左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，框2向上移動(dòng),實(shí)際上框1覆蓋住框2，使框2從視圖中消失。例3，全部向左浮動(dòng)Page

69框2框1框3所有框向左浮動(dòng)情形1：如果把所有三個(gè)框都向左移動(dòng)，那么框1向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。例3，全部向左浮動(dòng)Page

70框2框1框3框3下降

情形2:如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。

情形3:如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”；框2框1框3框3被框1”卡住”了補(bǔ)充：關(guān)于文字行和清理浮動(dòng)框旁邊的文字行被縮短，從而給浮動(dòng)框留出空間,文字圍繞浮動(dòng)框。因此,創(chuàng)建浮動(dòng)框可以使文本圍繞圖像：Page

71文字環(huán)繞圖片浮動(dòng)框清理-續(xù)要想阻止元素圍繞浮動(dòng)框,需要對(duì)該元素應(yīng)用clear

屬性。

clear:left、right、both或none,表示元素框的哪些邊不應(yīng)該挨著浮動(dòng)框。

clear屬性主要用于控制浮動(dòng)元素的后繼元素的行為,缺省地,后繼元素將向上移動(dòng),以填補(bǔ)由于前面元素的浮動(dòng)而空出的可用空間。Page

72Demo-(文字環(huán)繞圖片-清除浮動(dòng))Page

73Demo：

假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。清理浮動(dòng).news{ background-color:gray; border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}<divclass="news"> <imgsrc="eg_smile.gif"/> <p>sometext</p></div>Code：Page

74因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的div不占據(jù)空間，因此視覺(jué)在沒(méi)有形成包含關(guān)系，如何解決？浮動(dòng)元素脫離父框解決：Page

75.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}.clear{clear:both;}<divclass="news"> <imgsrc="eg_smile.gif"/> <p>sometext</p>

<divclass="clear"></div></div>關(guān)于float的注意事項(xiàng)：1、應(yīng)該為所有浮動(dòng)元素設(shè)定寬度(除非＜img＞元素,因其具有隱含寬度)。如果不設(shè)寬度,結(jié)果將是不可預(yù)知的。2、和正常文檔流中的元素不同,浮動(dòng)元素的垂直邊距不會(huì)疊加。3、浮動(dòng)元素只能浮動(dòng)至左側(cè)或右側(cè),沒(méi)有浮動(dòng)至中間一說(shuō)。4、一個(gè)元素浮動(dòng)后,會(huì)往右或左浮動(dòng)直至遇到容器邊緣。如果向同一方向再浮動(dòng)一個(gè)元素,會(huì)浮動(dòng)直至碰到前一個(gè)浮動(dòng)元素的邊緣。如果浮動(dòng)更多元素,將一個(gè)挨一個(gè)排列，直至該行已無(wú)法容納更多浮動(dòng)元素,換行繼續(xù)排列。Page

76七、綜合示例實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局Page

77簡(jiǎn)單的3列的浮動(dòng)布局131布局131布局2八、CSS注意事項(xiàng)、技巧1、不要在屬性值與單位之間留有空格。例如,“margin-left:20px”2、必須明確定義單位，除非值為0；在html中可以寫(xiě)width=“100”,但在CSS中必須設(shè)為width=“100px”3、class和Id名字不能用數(shù)字開(kāi)頭,且區(qū)分大小寫(xiě)；如,#aaa與#AAA是不同的；4、可以同時(shí)為一個(gè)Html標(biāo)簽設(shè)置多個(gè)規(guī)則通常寫(xiě)法<pclass=“a”></p>；同時(shí)設(shè)置多規(guī)則<pclass=“ab”></p>；5、書(shū)寫(xiě)正確的鏈接樣式順序:link,:visited,:hover,:activePage

78注意事項(xiàng)與技巧-續(xù)6、CSS最近優(yōu)先原則:如果對(duì)一個(gè)元素定義多次樣式,則以最近優(yōu)先,最近一級(jí)的樣式將覆蓋其他樣式定義；Page

79CSS:p{color:red}.blue{color:blue}.yellow{color:yellow}HTML<p>此處什么顏色？</p><pclass="blue">此處什么顏色？</p><pclass="blue"style="color:green">

此處什么顏色？</p><pclass=“blueyellow”>此處什么顏色</p><pclass=“yellowblue”>此處顯示何種顏色？</p>(1)注意樣式的幾個(gè)優(yōu)先級(jí)（遞減）

--元素的style屬性>head區(qū)<style>塊>外部引用文件css(2)優(yōu)先級(jí)

溫馨提示

  • 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)論