TP03 網(wǎng)頁局部布局.ppt

1、網(wǎng)頁局部布局,第三講,局部布局新聞導(dǎo)航,基于列表的布局,新聞列表,使用無序列表：div-ul-li, 重慶 發(fā)改委 河南 ,列表屬性2-1,列表（li）常用屬性 list-style （列表風(fēng)格）,list-style屬性規(guī)定的列表風(fēng)格,列表屬性2-2,列表屬性的典型應(yīng)用：導(dǎo)航菜單, li list-style:none; 重慶 ,設(shè)置列表為none去掉圓點,示例12樣式表,body font:12px/20px Tahoma; img border:0; li list-style:none; .sidebar float:left; width:157px; .sidebar h1 cle

2、ar:both; .side_list height:250px; background:url(./Images/sidebarbg.gif) no-repeat; margin:2px 0 12px 0;,設(shè)置背景圖片,級聯(lián)式選擇器,示例12HTML, 重慶涉黑富豪 發(fā)改委：4萬億 河南2個 ,級聯(lián)式選擇器表示樣式之作用到選擇器所定義類別下嵌套的標(biāo)簽、類別或ID選擇器,背景屬性2-1,背景屬性： background （縮寫形式） background-color（背景色 ） background-image（背景圖 ） background-repeat（背景圖重復(fù)方式 ） backgr

3、ound-position（位置坐標(biāo)、偏移量）,四類平鋪效果,背景屬性2-2,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出現(xiàn)的水平和垂直位置坐標(biāo)，實現(xiàn)各種拍偏移效果,設(shè)置背景圖片、不重復(fù)平鋪,各種偏移效果,示例12HTML, 重慶涉黑富豪 發(fā)改委：4萬億 河南2個 ,超鏈接,超鏈接,超鏈接-實現(xiàn)頁面間的導(dǎo)航,鏈接文本或圖像,鏈接地址（目標(biāo)）, 燦坤蒸氣電熨斗 ,基本語法,鏈接在新窗口中打開, 鏈接熱點文本或圖像,示例12HTML, 重慶涉黑富豪 發(fā)改委：4萬億 河南2個 ,鏈

4、接到當(dāng)前頁面,超鏈接樣式,示例12樣式表,body font:12px/20px Tahoma; img border:0; li list-style:none; a color:#335884; text-decoration:none; a:hover color:#f00; text-decoration:underline; .sidebar float:left; width:157px; .sidebar h1 clear:both; .side_list height:250px; background:url(./Images/sidebarbg.gif) no-repeat

5、; margin:2px 0 12px 0;,超鏈接樣式,超鏈接樣式的特殊性 文本或圖像加上鏈接，將失去原樣式而繼承鏈接的樣式,超鏈接樣式的特點,加鏈接后，圖片/文本樣式的變化,超鏈接樣式的四種狀態(tài) 未訪問狀態(tài)（a:link ） 已訪問狀態(tài)（a:visited ） 鼠標(biāo)移上狀態(tài)（a:hover ） 激活選定狀態(tài)（a:active ）,可以分別設(shè)置鏈接的四種狀態(tài)的樣式,超鏈接偽類樣式,超鏈接偽類樣式,采用選擇器：狀態(tài)的方式分別定義樣式，一般稱為偽類,如何設(shè)置超鏈接的樣式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font

6、-size:20px; 家用電器 手機(jī)數(shù)碼 ,1、先定義共有樣式：表示.nai類下標(biāo)簽中的鏈接樣式,設(shè)置超鏈接樣式的步驟： 1、確定頁面所有鏈接樣式是否相同，否則分開定義 2、先定義四個狀態(tài)共有樣式，再分別定義其他狀態(tài),2、再單獨定義某個狀態(tài)特有的樣式,導(dǎo)航版塊的鏈接樣式一般和頁面樣式不同，需單獨定義,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-1, . /樣式定義 /HTML內(nèi)容 ,HTML和CSS在同一文件，方便開發(fā)時修改，樣式和內(nèi)容分離不夠徹底，不利于頁面復(fù)用,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-2,.nav li apaddi

7、ng:8px 10px; . /CSS樣式定義, /HTML內(nèi)容 ,分別定義*.css和*.html文件，樣式和內(nèi)容徹底分離，多個網(wǎng)頁可共享同一CSS,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式表,如何應(yīng)用樣式3-3, 日用百貨 ,單獨定義某個元素的樣式，靈活方便。但因為內(nèi)容與樣式混寫在一起，應(yīng)盡量少用或不用,各類樣式有繼承 各類樣式的優(yōu)先級 瀏覽器默認(rèn)設(shè)置 外部樣式表文件 內(nèi)部樣式表 行內(nèi)樣式表 ID選擇器 類選擇器 標(biāo)簽選擇器,樣式的優(yōu)先級3-1,由低到高，“近者優(yōu)先”原則,樣式的優(yōu)先級3-2,“日用百貨”鏈接, .nav ul li a:linkcolor:blue; 家用電器 手機(jī)數(shù)碼 日用百貨 ,內(nèi)部樣式表,外部樣式表,行內(nèi)樣式表,紅色,藍(lán)色,樣式的優(yōu)先級3-3,購物車的樣式, #nav_id width:300px;background: #ccc; .nav height:100px; background: