Web編程基礎 第3章 CSS學習資料_第1頁
Web編程基礎 第3章 CSS學習資料_第2頁
Web編程基礎 第3章 CSS學習資料_第3頁
Web編程基礎 第3章 CSS學習資料_第4頁
Web編程基礎 第3章 CSS學習資料_第5頁
已閱讀5頁，還剩75頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第3章CSS

內容提要3.4偽類和偽對象3.3CSS的使用方式3.2CSS的基本語法3.1CSS概述3.5CSS樣式屬性3.1CSS概述CSS指的是CascadingStyleSheets，即層疊樣式表，是一種設計網頁樣式及布局的技術。所謂“層疊”，實際上指的是將顯示樣式與顯示內容分離。為了解決設計樣式和風格的問題，1997年，W3C在頒布HTML4標準的同時也發布了樣式表的第一個標準CSS1.0。從2010年開始，W3C已開始了對CSS3的研發，現在大部分的瀏覽器已支持CSS3，下一版的CSS4仍處在開發過程中。3.2CSS的基本語法使用CSS有許多優點，主要表現在：可以方便地控制頁面布局；整個網站可以統一風格，只要整個網站使用統一的CSS文件即可；網站的風格維護起來簡單，只需要更改相應的CSS文件；由于HTML文件基本上只包含內容，而不包括樣式，因而結構簡化，體積更小，下載更快，更加靈活，可讀性增強；瀏覽器的界面更友好；CSS的定義是由三部分組成的，包括選擇符（selector）、屬性（properties）、屬性的取值（value）。其語法為：selector{property1:value;property2:value;…propertyN:value}其中：selector是選擇符，最常見的選擇符是HTML標簽；property是選擇符的屬性，value為選擇符的屬性值。多個選擇符屬性之間使用分號隔開。可以使用單個選擇符，也可以使用多個選擇符，選擇符之間用逗號隔開，即將一組屬性值應用于多個選擇符，例如：h1,h2,p{background-color:#00FF00;color:red}css1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-HTML選擇符</title><styletype="text/css">body{ background-color:yellow}h1,h2,p{ background-color:#00FF00; color:red}</style></head><body>

這是body內的文字<br/><h1>這是標題1文字</h1><h2>這是標題2文字</h2><p>這是段落文字</p></body></html>CSS1.html的顯示結果3.2.1CSS選擇符選擇符指的是要修改的元素。CSS中常用的選擇符包括HTML選擇符、類選擇符、id選擇符。1．HTML選擇符所有的HTML標簽都可以作為CSS的選擇符，HTML選擇符后是對應的元素的屬性及屬性值，指定了HTML選擇符的樣式后，當前頁面中的相應元素會自動套用定義的樣式。HTML選擇符后的屬性必須是對應的標簽元素的有效屬性，否則屬性和屬性值無效，例如：p{text-align:center;

color:red}將段落的對齊方式設置成居中對齊，文字顏色為紅色。2．類選擇符如果要對頁面中的元素定義不同的格式，僅使用標簽選擇符是不夠的，還需要類選擇符。類選擇符在選擇符之前需要加一個實心的圓點，表示選擇符的類型是類選擇符。其格式為：selector.classname{property1:value;property2:value;…}例如：p.left{text-align:left}p.center{text-align:center}要使用類選擇符定義的樣式，需要在標簽中利用class屬性指定，例如：<pclass=“left”>這是居左顯示的段落</p><pclass=“center”>這是居中顯示的段落</p>使用類選擇符時，也可以不指定具體的選擇符，直接使用“.”加類名，或者在“.”前添加“*”。這樣可以使不同的選擇符共享樣式，提高代碼的重用性。如果要對頁面中的多種元素分類定義不同的格式，可以使用這種方式。其語法為：.classname{property1:value;…propertyN:value;}css2.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-類選擇符</title><styletype="text/css">.one{ color:red; font-size:12pt;}.two{ color:green; font-size:14pt;}.three{ color:#800080; font-size:16pt;}</style></head><body><h1class="one">這是引用one類樣式的標題1</h1><pclass="one">這是引用one類樣式的段落</p><pclass="two">這是引用two類樣式的段落</p><pclass="three">這是引用three類樣式的段落</p></body></html>CSS2.html的顯示結果3．id選擇符當需要為某一個元素單獨設計樣式時，可以使用id選擇符。使用id選擇符可以為每個元素的具體對象定義不同的模式，使用id選擇符要先為設計樣式的對象定義一個id屬性。id選擇符是唯一的，不同的元素的id值是不能重復的。例如：<divid=“top”></div>然后使用以下方式定義top的樣式：#top{property1:value;property2:value;…}css3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-id選擇符</title><styletype="text/css">#top{ color:blue; font-size:18pt; font-family:黑體; background-color:#FFB6C1;}</style></head><body><divid="top">

白日依山盡<br/>

黃河入海流<br/>

欲窮千里目<br/>

更上一層樓</div></body></html>CSS3.html的顯示結果4．其它選擇符除了以上幾種常用的選擇符之外，在CSS中還會用到組合選擇符、包含選擇符等。組合選擇符是使用逗號將各個選擇符隔開，使多類元素共享樣式。包含選擇符是使用空格分隔各個選擇符，選擇符之間必須是包含關系時，才能使用樣式。css4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-包含選擇符</title><styletype="text/css">pem{ color:red; font-size:16pt;}</style></head><body><p><em>p元素中的em元素，紅色，16pt</em></p><em>非p元素中的em元素，黑色，默認大小</em></body></html>CSS4.html的顯示結果3.2.2CSS的繼承CSS的繼承指的是當標簽具有嵌套關系時，內部標簽自動擁有外部標簽的不沖突的樣式的性質。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的子元素。但是當子元素與父元素的屬性樣式出現沖突時，子元素的樣式具有較高的優先級。但是，在CSS中，有些屬性不允許繼承，例如border屬性沒有繼承性，如果border屬性可以繼承，則某些元素，例如文字的顯示樣式會比較奇怪。多數邊框類的屬性都沒有繼承性。css5.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-CSS的繼承</title><styletype="text/css">div{ color:red; font-size:10pt; font-weight:bold; font-family:黑體; border:1pxsolid#000;}p{ color:blue; font-size:12pt; font-style:italic;}em{

color:green;}</style></head><body><p>這是藍色，12pt，斜體，默認宋體</p><div><p>這是藍色，12pt，斜體，加粗，黑體

</p></div><br/><div>這是紅色，10pt，加粗，黑體，有邊框</div><br/><div>這是紅色，10pt，黑體<br/><em>我是em元素的文字，綠色文字周圍無邊框</em></div></body></html>CSS5.html的顯示結果3.3CSS的使用方式在HTML頁面中使用CSS主要有四種方法，即內嵌方式、內部樣式表、使用<link>標記鏈接外部樣式表、使用CSS的@import標記導入樣式表。1．內嵌方式內嵌方式指的是將CSS規則混合在HTML標簽中使用的方式。CSS規則作為HTML標簽的style屬性值。例如：<astyle=“font-family:黑體;font-style:italic;font-size:16pt;color:red”>這是使用樣式的超級鏈接</a>內嵌樣式只對其所在的標簽起作用，其它的同類標簽不受影響。css6.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-內嵌樣式表</title></head><body><astyle="font-family:黑體;font-style:italic;font-size:16pt;color:red">使用內嵌樣式的超級鏈接</a><br/><br/><a>普通的超級鏈接</a></body></html>CSS6.html的顯示結果2．內部樣式表內部樣式表指的是在HTML文檔的<head>標記內嵌入樣式表，格式如下：<styletype=“text/css”>selector{property1:value;property2:value;…}…</style>css7.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-內部樣式表</title><styletype="text/css">body{font-family:楷體;font-size:16pt;

color:green;}a{font-family:黑體;font-size:14pt;color:#FF9600;}</style></head><body>

這是正文中的字體<br/><p>這是段落中的文字，會繼承正文字體的樣式</p><a>這是超級鏈接1</a><br/><a>這是超級鏈接2</a></body></html>CSS7.html的顯示結果內部樣式表的作用范圍是當前的HTML頁面，樣式表中定義的選擇符的格式會應用到當前文件中所有的匹配選擇符上，本章示例中，css1.html至css5.html都屬于內部樣式表的用法。有些低版本的瀏覽器可能不支持<style>標記，此時，瀏覽器會忽略<style>標記，<style>標記內的內容會以文本的形式顯示到頁面上。為了避免此種情況的發生，可以在<style>標記之后添加“<!--”，在</style>標記之前添加“-->”。3．使用<link>標記鏈接外部樣式表外部樣式表是使用一個單獨的文件保存樣式規則，擴展名為“.css”，需要使用樣式表的HTML文件鏈接樣式表文件。鏈接樣式表使用<link>標簽，此標簽作為<head>的子標簽使用，指明當前HTML頁面和鏈接的樣式表之間的關系，其格式為：<linkhref=“…”rel=“stylesheet”type=“text/css”/>其中：href是外部樣式表的路徑，一般使用相對路徑；rel指的是被鏈接的文件的類型，stylesheet表示被鏈接的是CSS文件；type指的是被鏈接的文件的內容類型；style.css:@CHARSET"UTF-8";body{ font-family:楷體; font-size:16pt; color:green;}a{ font-family:黑體; font-size:14pt; color:#FF9600;}div{ color:red; font-size:10pt; font-weight:bold; font-family:黑體; border:1pxsolid#000;}p{ color:blue; font-size:12pt; font-style:italic;}css8.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS應用示例-外部樣式表</title><linkhref="css/style.css"rel="stylesheet"type="text/css"/></head><body><a>我是超級鏈接</a><div>我是DIV</div><p>我是段落</p></body></html>CSS8.html的顯示結果在使用樣式表的各種方法中，外部樣式表使用最為常見，使用外部樣式表有以下優點：多個樣式可以重復利用，一個外部CSS文件可以被多個網頁使用；修改、維護簡單。當需要修改樣式時，只需要修改CSS文件，不需要修改頁面源代碼；可以有效地減少頁面的代碼量，提高網頁的加載速度，CSS可以駐留在緩存中，再次使用時不需要加載；整個網站的風格很容易統一，只要網站中的文件都鏈接同樣的CSS文件即可；4．使用@import標記導入樣式表除了可以使用<link>標記鏈接外部樣式表之外，還可以使用CSS提供的@import標記導入樣式表，其格式如下：<styletype=“text/css”>@importurl(“…”);</style>css9.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-使用@import標記導入樣式表</title><style>@importurl("css/style.css");</style></head><body><a>我是超級鏈接</a><div>我是DIV</div><p>我是段落</p></body></html>CSS9.html的顯示結果使用<link>鏈接樣式表和使用@import標記導入樣式表的方法類似，但是二者仍有區別。主要再現在以下幾點：（1）<link>屬于XHTML標簽，@import屬于CSS標記。<link>標簽除了可以鏈接CSS文件之外，還可以鏈接其它的外部資源，而@import標記只能導入CSS文件。（2）當頁面加載時，<link>鏈接的外部資源會同時被加載；而@import標記導入的CSS文件會等到頁面全部下載完成后再被加載，所以使用@import標記導入CSS的頁面有可能剛開始顯示時并沒有樣式。（3）@import標記只有IE5以上的才能支持，而<link>標簽無此限制。5．各種樣式表的優先級以上各種使用樣式表的優先級順序為：內嵌樣式表>內部樣式表>外部樣式表>瀏覽器的默認設置3.4.1偽類偽類是一種特殊的類選擇符，是能夠被支持CSS的瀏覽器自動識別的特殊的選擇符。偽類的最大的用途就是為超級鏈接在不同的狀態下定義不同的樣式效果。偽類的語法是在原有的選擇符后加一個偽類，如：selector:pseudo-class{property1:value;property2:value;…}偽類是在CSS中已經定義好的，不能象類選擇符一樣使用別的名字，可以解釋為對象在某個特殊狀態下的樣式。常用的偽類有：1．selector:link{sRules}（sRules表示樣式規則）：設置a對象在未被訪問前的樣式，對于無href屬性的a對象，此偽類不起作用。2．selector:link{sRules}：設置a對象在鼠標懸停在其上時的樣式。3．selector:active{sRules}：設置a對象被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。4．selector:visited{sRules}：設置a對象在其鏈接地址已被訪問過時的樣式。css10.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-偽類</title><styletype="text/css">a:link{font-size:14pt;text-decoration:underline;color:red}a:visited{font-size:12pt;text-decoration:none;color:green}a:hover{font-size:16pt;text-decoration:none;color:#FFCC00}a:active{font-size:18pt;text-decoration:underline;color:blue}</style></head><body><ahref="">我是超級鏈接1</a><br/><ahref="">我是超級鏈接2</a><br/><ahref="">我是超級鏈接3</a><br/><ahref="">我是超級鏈接4</a><br/></body></html>超級連接1是還沒有訪問過的狀態，超級鏈接2和超級鏈接3是已訪問過的狀態，超級鏈接4是將鼠標懸浮在其上時的狀態。3.4.2偽對象偽對象通過對插入到文檔中的虛構元素進行觸發從而實現特定的樣式。偽對象主要包括：1．selector:after,before{sRules}

2．selector:first-letter{sRules}3．selector:first-line{sRules}css11.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例－偽對象的使用</title><styletype="text/css">div:first-line{ font-weight:bold; color:red; font-size:14pt;}p:first-letter{ color:green; font-size:18pt;}</style></head><body><div>我是div的第一行<br/>我是div的第二行</div><p>我是段落p</p></body></html>CSS11.html的顯示結果3.5CSS樣式屬性可以使用豐富的樣式規則來為網頁中的元素設計顯示樣式，CSS樣式屬性大致分為文字、文本、背景、定位、邊框、布局、列表、光標、濾鏡等。1．文字屬性文字屬性功能可取值font-family字體例如隸書，TimesNewRoman等，當指定多種字體時，用逗號分隔，當字體由多個單詞組成時，由雙引號括起來font-size字號absolute-size:根據對象字體調節；relative-size:根據父對象字體調節；length:相對于父對象字體的尺寸，不可為負值。font-style樣式normal:正常；italic:斜體；oblique:傾斜；font-weight加粗normal:正常；lighter:細體；bold:粗體；bolder:特粗體；color文字顏色取英文單詞，或#rrggbb，或#rgbcss12.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-文字屬性的使用</title><styletype="text/css">p{ font-family:楷體; font-size:18pt; font-style:italic; font-weight:bold; color:blue;}h1{font-family:楷體;font-size:20pt;

color:red;}</style></head><body><h1>黃鶴樓送孟浩然之廣陵</h1><br/><palign="center">故人西辭黃鶴樓<br/>煙花三月下揚州<br/>孤帆遠影碧空盡<br/>惟見長江天際流<br/></p></body></html>CSS12.html的顯示結果2．文本屬性文本屬性功能取值word-spacing英文單詞之間的間隔默認值為0，可取正值（間隔增大）或負值（間隔減小）letter-spacing字符或漢字之間的間隔同上text-indent文本縮進可以使用絕對單位（cm,mm,in,pt,pc），也可以使用相對單位（em,ex,px）或者百分比text-align水平對齊方式left:左對齊；center:居中對齊；right:右對齊；justify:兩端對齊；vertical-align垂直對齊方式top:頂端對齊；bottom:底部對齊；baseline:基線對齊；middle:居中對齊；line-height行高參照text-indent屬性text-transform文字大小寫uppercase:所有文字大寫顯示；lowercase:所有文字小寫顯示；capitalize

:每個單詞的首字母大寫；none:默認，無轉換；text-decoration文字修飾none:默認；underline:下劃線；overline:上劃線；line-through:刪除線；blink:閃爍；inherit:繼承父元素；css13.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例－文本屬性</title><styletype="text/css">div{text-indent:30px;text-align:left;line-height:25px;letter-spacing:5px;text-decoration:underline;}</style></head><body><div>

天將降大任于斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。

</div></body></html>CSS13.html的顯示結果3．背景屬性背景屬性功能取值background-color背景顏色取英文單詞，或#rrggbb，或#rgbbackground-image背景圖片絕對路徑或相對路徑表示的url

background-repeat背景圖片的平鋪方式repeat-x:橫向平鋪；repeat-y:縱向平鋪；norepeat:不平鋪；background-attachment背景是否隨內容滾動scroll:背景圖像隨內容滾動；fixed:背景圖像不隨內容滾動。background-position背景的水平和垂直位置left,right,top,bottom或精確的值css14.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-背景屬性</title><styletype="text/css">body{color:#FF9600;font-family:黑體;font-size:18pt;background-image:url(image/back.jpg);background-repeat:repeat-y;background-attachment:fixed;}</style></head><body>范仲淹：蘇幕遮<br/>碧云天，黃葉地，秋色連波，波上寒煙翠。山映斜陽天接水，芳草無情，更在斜陽外。<br/>黯鄉魂，追旅思。夜夜除非，好夢留人睡。明月樓高休獨倚，酒入愁腸，化作相思淚。<br/><br/>范仲淹：漁家傲<br/>塞下秋來風景異。衡陽雁去無留意。四面邊聲連角起。千嶂里。長煙落日孤城閉。<br/>濁酒一杯家萬里。燕然未勒歸無計。羌管悠悠霜滿地。人不寐。將軍白發征夫淚。<br/></body></html>CSS14.html的顯示結果4．定位屬性定位屬性功能取值position是否定位及定位方式static:無特殊定位；relative:相對定位，對象不可層疊；absolute:絕對定位，對象可以層疊；top、right、bottom、left與父對象的上，右，下，左的距離auto:無特殊定位；自定義數值:%或長度，只有position取值為absolute或relative，此值才有效clip設置對象的可視區域auto:自動；shape:按照形狀定義顯示overflow設置當內容超過對象大小時如何顯示內容auto:根據內容確定是否需要顯示滾動條；visible:默認值，內容顯示在對象邊框之外；hidden:超出邊框的內容不顯示；scroll:顯示滾動條vertical-align設置對象的垂直對齊方式top,middle,bottom等z-index設置對象的層疊順序auto:遵循父對象的定位；自定義的數值：無單位的整數值，可為負數，較大值的對象會覆蓋較小值的對象css15.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-定位屬性</title></head><body><divstyle="position:absolute;background-color:#33CCFF;width:250px;height:100px;display:inline"><divstyle="position:relative;top:10px;left:10px;width:100px;height:100px;background-color:#FFCC00;">春曉<br/>春眠不覺曉<br/>處處聞啼鳥<br/>夜來風雨聲<br/>花落知多少</div><divstyle="position:relative;top:-40px;left:120px;width:100px;height:100px;background-color:#FF9966">靜夜思<br/>床前明月光<br/>疑是地上霜<br/>舉頭望明月<br/>低頭思故鄉</div></div></body></html>CSS15.html的顯示結果5．邊框屬性利用CSS邊框屬性可以設置對象邊框的顏色、樣式以及寬度。使用對象的邊框屬性之前，必須先設定對象的高度及寬度，或者將對象的position屬性設置成absolute。（1）邊框顏色定義邊框顏色使用border-color屬性，對象有上方、右方、下方、左方四個邊框，對邊框顏色賦值時有以下幾種方式：四個參數：按上方、右方、下方、左方的順序賦值；例如：border-color:redgreenblueblack;一個參數：顏色作用于四個邊框；例如border-color:red;二個參數：按照上下，左右的順序賦值；例如：border-color:redgreen;上下邊框為紅色，左右邊框為綠色；三個參數：按照上，左右，下的順序賦值；例如：border-color:redgreenblue;上邊框為紅色，左右邊框為綠色，下邊框為藍色；（2）邊框樣式定義邊框樣式使用border-style屬性，邊框樣式的參數的個數及賦值方式與邊框顏色類似，邊框樣式的可取值及其解釋如表所示。邊框樣式取值none無邊框，無論邊框寬度設為多大hidden隱藏邊框dotted點線邊框dashed虛線邊框solid實線邊框double雙線邊框groove3D凹槽邊框ridge菱形邊框inset3D內嵌邊框outset3D凸邊框（3）邊框寬度使用border-width來定義，寬度的取值可以使用關鍵字或自定義的數值，寬度的參數的個數及賦值方式與邊框顏色類似。可使用的關鍵字有medium、thin、thick。medium指默認寬度；thin小于默認寬度；thick大于默認寬度。若要使邊框寬度只對某一個邊框有效，只需要在border-width中加入邊框位置即可，例如border-left-width:thin;。邊框的屬性也可以使用border復合屬性按照寬度、樣式、顏色的順序定義。css16.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>CSS使用示例-邊框屬性</title><styletype="text/css">div.b1{border:2pxdashed#FF9600;}div.b2{border:4pxdoublered;}</style></head><body><divclass="b1"style="position:absolute;background-color:#33CCFF;width:250px;height:100px;display:inline"><divclass="b2"style="position:relative;top:10px;left:10px;width:100px;height:100px;background-color:#FFCC00;">春曉<br/>春眠不覺曉<br/>處處聞啼鳥<br/>夜來風雨聲<br/>

溫馨提示

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

評論

0/150

提交評論