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

1、第三講第三講部分規(guī)劃新聞導(dǎo)航基于列表的規(guī)劃基于列表的規(guī)劃新聞列表新聞列表 運用無序列表：運用無序列表：div-ul-li 重慶重慶 發(fā)改委發(fā)改委 河南河南 演示案例演示案例11：新聞列表：新聞列表列表屬性2-1 列表li常用屬性 list-style 列表風(fēng)格屬性值屬性值方式方式語法實現(xiàn)語法實現(xiàn)示例示例none無風(fēng)格無風(fēng)格list-style:none; 刷牙刷牙 洗臉洗臉disc實心圓（實心圓（默默認(rèn)類型）認(rèn)類型）list-style:disc; 刷牙刷牙 洗臉洗臉circle空心圓空心圓list-style:circle; 刷牙刷牙 洗臉洗臉square實心正方形實心正方形list-sty

2、le:square; 刷牙刷牙 洗臉洗臉decimal數(shù)字（數(shù)字（默認(rèn)默認(rèn)類型）類型）list-style:decimal1. 刷牙刷牙2. 洗臉洗臉list-style屬性規(guī)定的屬性規(guī)定的列表風(fēng)格列表風(fēng)格列表屬性2-2 列表屬性的典型運用：導(dǎo)航菜單列表屬性的典型運用：導(dǎo)航菜單 li list-style:none; 重慶重慶 設(shè)置列表為設(shè)置列表為none去去掉圓點掉圓點演示案例演示案例12：導(dǎo)航菜單：導(dǎo)航菜單例如12款式表body font:12px/20px Tahoma;img border:0;li list-style:none;.sidebar float:left; width:

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

4、olor背風(fēng)光背風(fēng)光 background-image背景圖背景圖 background-repeat背景圖反復(fù)方式背景圖反復(fù)方式 background-position位置坐標(biāo)、偏移量位置坐標(biāo)、偏移量四類平四類平鋪效果鋪效果演示案例演示案例13：背景屬性：背景屬性背景屬性2-2div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px背景出現(xiàn)的程度和背景出現(xiàn)的程度和垂直位置坐標(biāo)，實垂直位置坐標(biāo)，實現(xiàn)各種拍偏移效果現(xiàn)各種拍偏移效果 設(shè)置背景圖片、不設(shè)置背景圖片、不反復(fù)平鋪反復(fù)平鋪 各種偏移各種偏移效

5、果效果 演示案例演示案例14：背景的偏移量：背景的偏移量例如12HTML 重慶涉黑富豪 發(fā)改委：4萬億 河南2個 超鏈接超鏈接超鏈接 超鏈接超鏈接-實現(xiàn)頁面間的導(dǎo)航實現(xiàn)頁面間的導(dǎo)航鏈接文本或圖像鏈接文本或圖像鏈接地址目的鏈接地址目的 燦坤蒸氣電熨斗燦坤蒸氣電熨斗根本語法鏈接在新鏈接在新窗口中翻窗口中翻開開 鏈接熱點文本或圖像鏈接熱點文本或圖像例如12HTML 重慶涉黑富豪 發(fā)改委：4萬億 河南2個 鏈接到當(dāng)前頁面鏈接到當(dāng)前頁面超鏈接款式例如12款式表body font:12px/20px Tahoma;img border:0;li list-style:none;a color:#33588

6、4; 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; margin:2px 0 12px 0;超鏈接款式超鏈接款式超鏈接款式的特殊性超鏈接款式的特殊性文本或圖像加上鏈接，將失文本或圖像加上鏈接，將失去原款式而承繼鏈接的款式去原款式而承繼鏈接的款式超鏈接

7、款式的特點加鏈接后，加鏈接后，圖片圖片/文本款文本款式的變化式的變化 超鏈接款式的四種形狀超鏈接款式的四種形狀 未訪問形狀未訪問形狀a:link 已訪問形狀已訪問形狀a:visited 鼠標(biāo)移上形狀鼠標(biāo)移上形狀a:hover 激活選定形狀激活選定形狀a:active 可以分別設(shè)置可以分別設(shè)置鏈接的四種形鏈接的四種形狀的款式狀的款式超鏈接偽類款式超鏈接偽類款式偽偽 類類示示 例例說說 明明a:linka:linkcolor:#999;未訪問狀態(tài)未訪問狀態(tài)a:visiteda:visitedcolor:#333;已訪問狀態(tài)已訪問狀態(tài)a:hovera:hovercolor:#ff7300; 鼠標(biāo)移上

8、狀態(tài)鼠標(biāo)移上狀態(tài)a:activea:activecolor:#999;激活選定狀態(tài)（鼠激活選定狀態(tài)（鼠標(biāo)點擊未釋放時）標(biāo)點擊未釋放時）采用選擇器：形狀的方式分別定采用選擇器：形狀的方式分別定義款式，普通稱為偽類義款式，普通稱為偽類如何設(shè)置超鏈接的款式 .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; /style 家用電器家用電器 手機數(shù)碼手機數(shù)碼演示例如演示例如15：偽類：偽類1、先定義共有款式：表示、先定義共有款式：表示.nai類類下下標(biāo)簽中的鏈接款式標(biāo)簽中的鏈接款式 設(shè)置超鏈接款式的步驟：設(shè)

9、置超鏈接款式的步驟： 1、確定頁面一切鏈接款式能否一樣，否那么分開定、確定頁面一切鏈接款式能否一樣，否那么分開定義義 2、先定義四個形狀共有款式，再分別定義其他形狀、先定義四個形狀共有款式，再分別定義其他形狀2、再單獨定義某個形、再單獨定義某個形狀特有的款式狀特有的款式導(dǎo)航版塊的鏈接款式導(dǎo)航版塊的鏈接款式普通和頁面款式不同，普通和頁面款式不同，需單獨定義需單獨定義三類運用款式的方式三類運用款式的方式內(nèi)部款式表內(nèi)部款式表 外部款式表外部款式表 行內(nèi)款式行內(nèi)款式如何運用款式3-1 . /款式定義款式定義 /HTML內(nèi)容內(nèi)容HTML和和CSS在同一文在同一文件，方便開發(fā)時修正，件，方便開發(fā)時修正，款

10、式和內(nèi)容分別不夠徹款式和內(nèi)容分別不夠徹底，不利于頁面復(fù)用底，不利于頁面復(fù)用三類運用款式的方式三類運用款式的方式內(nèi)部款式表內(nèi)部款式表 外部款式表外部款式表 行內(nèi)款式行內(nèi)款式如何運用款式3-2.nav li apadding:8px 10px;. /CSS款式定義款式定義 /HTML內(nèi)容內(nèi)容分別定義分別定義*.css和和*.html文件，款式和文件，款式和內(nèi)容徹底分別，多個內(nèi)容徹底分別，多個網(wǎng)頁可共享同一網(wǎng)頁可共享同一CSS演示例如演示例如2：外部款式表：外部款式表三類運用款式的方式三類運用款式的方式內(nèi)部款式表內(nèi)部款式表 外部款式表外部款式表 行內(nèi)款式表行內(nèi)款式表如何運用款式3-3 日用百貨日用百

11、貨單獨定義某個元素的款單獨定義某個元素的款式，靈敏方便。但由于式，靈敏方便。但由于內(nèi)容與款式混寫在一同，內(nèi)容與款式混寫在一同，應(yīng)盡量少用或不用應(yīng)盡量少用或不用演示例如演示例如3：行內(nèi)款式表：行內(nèi)款式表各類款式有承繼各類款式有承繼各類款式的優(yōu)先級各類款式的優(yōu)先級閱讀器默許設(shè)置閱讀器默許設(shè)置外部款式表文件外部款式表文件 內(nèi)部款式表內(nèi)部款式表 行內(nèi)款式表行內(nèi)款式表 ID選擇器選擇器類選擇器類選擇器標(biāo)簽選擇器標(biāo)簽選擇器 款式的優(yōu)先級3-1 由低到高，由低到高，“近近者優(yōu)先原那么者優(yōu)先原那么款式的優(yōu)先級3-2“日用百貨鏈接日用百貨鏈接 .nav ul li a:linkcolor:blue; 家用電器家用電器 手機數(shù)碼手機數(shù)碼 日用百貨日用百貨 內(nèi)部款式表內(nèi)部款式表外部款式表外部款式表行內(nèi)款式表行內(nèi)款式表紅色紅色藍(lán)色藍(lán)色演示例如演示例如16：款式優(yōu)先級：款式優(yōu)先級款式的優(yōu)先級3-3購物車的款式購物車的款式 #nav_id width:300px;background: #ccc; .nav height:100px; ba