網(wǎng)頁制作案例教程課件 清華大學(xué)出版社第9章使用CSS布局規(guī)劃網(wǎng)頁

1、 網(wǎng)頁制作案例教程 毋建軍 鄭寶昆 郭銳 編著 清華大學(xué)出版社第9章 使用CSS布局規(guī)劃網(wǎng)頁本章學(xué)習(xí)目標(biāo)（知識(shí)要點(diǎn)）n掌握CSS布局網(wǎng)頁n掌握DIV+CSS布局網(wǎng)頁n掌握AP DIV布局網(wǎng)頁本章學(xué)習(xí)導(dǎo)航nCSS布局網(wǎng)頁是一種非常流行的網(wǎng)頁布局方式，能夠做到使網(wǎng)頁元素精確定位，美觀的效果，本章主要介紹創(chuàng)建CSS、DIV+CSS和AP DIV布局網(wǎng)頁。n本章內(nèi)容在全書知識(shí)結(jié)構(gòu)中所處位置如圖所示 基礎(chǔ)篇HTML篇CSS篇JavaScript篇提高篇網(wǎng)頁設(shè)計(jì)與開發(fā)流程（AscentSys醫(yī)藥商務(wù)系統(tǒng)）網(wǎng)頁制作基礎(chǔ)HTML基礎(chǔ)網(wǎng)頁基本元素設(shè)計(jì)網(wǎng)頁布局規(guī)劃設(shè)計(jì)交互式網(wǎng)頁表單的設(shè)計(jì)與使用利用模板和庫創(chuàng)建網(wǎng)頁

2、CSS樣式表使用CSS布局規(guī)劃網(wǎng)頁JavaScript網(wǎng)頁應(yīng)用Javascript概述網(wǎng)頁中常見Flash制作Web服務(wù)器創(chuàng)建網(wǎng)站發(fā)布、測試和維護(hù)9.1 CSS布局網(wǎng)頁入門n9.1.1 CSS盒模型簡介內(nèi)容padding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-leftborder-rightmargin-topmargin-bottommargin-leftmargin-right圖9-1-1 盒子模型n9.1.2 常用的CSS布局屬性n（1）邊界（margin）n1）邊界屬性n邊界屬性m

3、argin是一個(gè)不可繼承的屬性，包括上邊界（margin-top）、下邊界（margin-bottom）、左邊界（margin-left）、右邊界（margin-right）。這些元素屬性是用來設(shè)置邊界的，它們可以取的值有長度length、百分比percentage。百分比的值要參考上級(jí)元素的寬度。語法格式為：nmargin: margin-top margin-right margin-bottom margin-leftn例：nBODYmargin-top:10pt;margin-right:20pt;margin-bottom:30pt;margin-left:40ptn2）使用單側(cè)邊界

4、屬性n若body體里是margin，那margin可以取1到4個(gè)值。如果margin只被賦予了一個(gè)值，那就表示上、下、左、右邊界都使用同樣數(shù)值，它們的順序不能改變。除了margin可以設(shè)置四個(gè)邊界外，其他的四個(gè)特性只能設(shè)置與它們相對(duì)應(yīng)的一條邊界。如果被賦予了兩個(gè)或三個(gè)數(shù)值，沒有指定值的邊距，它的值將和與它相對(duì)的邊距值相同。n3）相鄰邊界屬性n 如果在頁面中同時(shí)對(duì)多個(gè)元素使用邊界屬性，并且這些元素相鄰，那么這些元素的邊界部分會(huì)根據(jù)具體情況有不同的現(xiàn)實(shí)效果，當(dāng)兩個(gè)相鄰元素在垂直方向上設(shè)置了邊界值，兩者的邊界距離并不是兩者的邊界值的和，而是兩者中邊界較大的那個(gè)。n4）在內(nèi)聯(lián)元素中使用邊界屬性n上述的

5、邊界屬性設(shè)置都是針對(duì)塊元素的，而在內(nèi)聯(lián)元素里使用邊界屬性的顯示效果是不同的。當(dāng)對(duì)內(nèi)聯(lián)元素設(shè)置垂直邊界時(shí)，邊界屬性不能改變內(nèi)聯(lián)元素的垂直大小，也就是該屬性設(shè)置將無意義。而在水平方向上的顯示效果和塊元素一致。n（2）填充（padding）n填充用來描述BOX的邊框和內(nèi)容之間插入多少空間。不但為元素設(shè)置了補(bǔ)白屬性，而且增加了元素所占有的空間。語法格式為：npadding: 長度值/百分比值n例如：n.mn height: 50px;n width: 20px;n padding:20px;nn（3）邊框（border）n平常我們在查看HTML文檔時(shí)，看到一段文字，并不會(huì)把它作為一個(gè)BOX，實(shí)際上BO

6、X是有邊框的，只是平時(shí)不顯示出來罷了，而border就是用來描述BOX邊框的。Border屬性分為邊框?qū)挾龋╞order-width）、邊框顏色（border-color）、邊框樣式（border-style）。n（4）文本與背景n從CSS的基本語句可以看出，屬性是CSS非常重要的部分。如果熟練掌握了CSS的各種屬性將會(huì)使頁面的編輯更加得心應(yīng)手。CSS的屬性包括很多種，如字體屬性、顏色和背景屬性、文本屬性、”容器”屬性、分級(jí)屬性、鼠標(biāo)屬性等。在這節(jié)中，我們主要來分析以下字體屬性和文本屬性。 屬性屬性 屬性含義屬性含義 屬性值屬性值text-align設(shè)定文本的對(duì)齊方式left、right、ce

7、nter、justifytext-decoration用來設(shè)定文本的刪除線、下劃線或者圍繞文本的線以及閃爍文本等，默認(rèn)值是無效果none。所畫的線顏色同文本本身的顏色相同，線的厚度跟瀏覽器相關(guān)。None、underline(下劃線下劃線)、overline（在文本（在文本頂端畫一條線）、頂端畫一條線）、line-through（在文本中間畫一條線）、（在文本中間畫一條線）、blink（文本閃爍）（文本閃爍）text-indent設(shè)定文本首行縮進(jìn)、line-height設(shè)定每行之間的距離Normal（默認(rèn)行高）、數(shù)值（行高值，需要寫單（默認(rèn)行高）、數(shù)值（行高值，需要寫單位）、乘數(shù)（無單位，表示是

8、字體的倍數(shù)）、百分位）、乘數(shù)（無單位，表示是字體的倍數(shù)）、百分比（基于比（基于font-size設(shè)置行高）設(shè)置行高）letter-spacing設(shè)定字母之間的距離Normal（默認(rèn)不插入任何空間）、長度數(shù)值（設(shè)（默認(rèn)不插入任何空間）、長度數(shù)值（設(shè)定字母間距，如為負(fù)數(shù)，則縮小間距）定字母間距，如為負(fù)數(shù)，則縮小間距）word-spacing設(shè)定單詞之間的距離同同letter-spacingtext-transform使文本從大寫改為小寫或小寫改為大寫等。Capitalize（首字母大寫）、（首字母大寫）、uppercase（所有（所有小寫字母改為大寫）、小寫字母改為大寫）、Lowercase（大寫

9、字母改（大寫字母改為小寫）、為小寫）、none、inherit（使用包含盒子的值）（使用包含盒子的值）vertical-align設(shè)定了元素在垂直方向上的位置Baseline、sub、super、top、text-top、m i d d l e 、 b o t t o m 、 t e x t - b o t t o m 、color設(shè)定文本的字體顏色設(shè)定文本的字體顏色所有所有表9-1-1 常用文本屬性 n（5）顏色與背景n在早起的網(wǎng)頁中，只存在黑白灰三種顏色，單調(diào)乏味，css提供了控制顏色和背景的功能，這和只用html控制有很大不同。關(guān)于顏色背景的屬性主要包括顏色的屬性、背景顏色、背景圖像、背

10、景重復(fù)、背景附件、背景位置等。n（6）列表n1）list-style-type屬性nlist-style-type屬性是用來修改用于列表項(xiàng)的標(biāo)志類型的，列表項(xiàng)的左側(cè)是有符號(hào)或者是編號(hào)的，比如無序列表中可能是圓點(diǎn)，方塊等，有序列表中可能是字母或者數(shù)字等。如果要將這些符號(hào)或者數(shù)字修改就需要該屬性。n2）list-style-image屬性nlist-style-image屬性可以將用戶的圖像文件當(dāng)作項(xiàng)目編號(hào)，語法格式為：n選擇器list-style-image : url(圖像地址)n示例代碼為：nul li list-style-image : url(xxx.gif)n3）list-style

11、-position屬性n當(dāng)列表項(xiàng)目的文本很長時(shí)，就會(huì)有段落文本縮排的問題，該屬性用來放置列表中的列表項(xiàng)中第二行文本的對(duì)齊方式。n（7）表單nCSS的格式化能力不僅對(duì)文本、圖片等，還可以對(duì)表單進(jìn)行格式化設(shè)置，使信息更容易閱讀，幫助瀏覽者完成項(xiàng)目分類等。n1）標(biāo)簽n在設(shè)計(jì)表單標(biāo)簽的樣式時(shí)，可以按照其他的html塊設(shè)置進(jìn)行，例如：nform fieldsetmargin-left:10px; border:0 solid;nlabel border: 1px; dotted gray;nlegend color:red;n通過css可以為標(biāo)簽、字段等設(shè)置統(tǒng)一的格式。n2）文本輸入字段n可以對(duì)文本框設(shè)

12、置字體、前景色和背景色等。例如：nInput type=”text”n background-color: red;n Color:white;n nTextarea font-family: Tahoma; height: 30%;n3）按鈕及復(fù)選框n按鈕和復(fù)選框都是input屬性的，它們在css設(shè)置屬性時(shí)只要在input關(guān)鍵字后加上具體屬性即可設(shè)置其樣式。n4）選擇列表n在html中通過select標(biāo)簽和option標(biāo)簽可以設(shè)置選擇列表，同樣在css中也可以設(shè)置選擇列表的樣式。例如：nSelect width:50%nOptionvalue=n9.1.3 CSS布局網(wǎng)頁方法n（1）定位屬性

13、n1）定位屬性positionnPosition屬性可以控制如何以及在何處顯示某個(gè)特定的元素，該屬性是不可以繼承的，語法格式為：nposition: static/ relative/ absolute/ fixedn2）層疊定位屬性z-indexn該屬性是為了定義頁面元素的層疊順序，屬性的取值是沒有單位的數(shù)字，而且可以為負(fù)數(shù)，它只是表示了某個(gè)元素相對(duì)其他元素的層疊次序。n（2）浮動(dòng)n1）浮動(dòng)屬性floatn在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，只能在豎直方向和其他元素依次排列，不能并排，而浮動(dòng)屬性則使得塊級(jí)元素的表現(xiàn)有所不同。nFloat屬性默認(rèn)取值為none，也就是標(biāo)準(zhǔn)流通常的情況

14、，float的另外兩個(gè)取值為：nLeft：標(biāo)簽向左邊浮動(dòng)。nRight：標(biāo)簽向右邊浮動(dòng)。n2）相鄰固定元素n在HTML中，兩塊由包起來的塊元素會(huì)按照?qǐng)D9-1-14所示排列塊1塊2圖9-1-14未加浮動(dòng)的兩個(gè)固定元素n而如果給塊1設(shè)置了向左浮動(dòng)，則排列會(huì)變?yōu)閳D9-1-15所示。塊1塊2圖9-1-15 塊1設(shè)置左浮動(dòng)n3）浮動(dòng)元素相鄰n當(dāng)多個(gè)浮動(dòng)元素相鄰的時(shí)候，如圖9-1-18所示，所有的塊都采用了向左浮動(dòng)，則所有的塊都會(huì)緊挨著向左靠齊，直到超過頁面的寬度，則會(huì)換行繼續(xù)靠左對(duì)齊。圖9-1-18 浮動(dòng)元素相鄰n4）清除浮動(dòng)屬性n由于在一些瀏覽器上浮動(dòng)元素的顯示效果會(huì)不同，所以，在現(xiàn)實(shí)需求中有時(shí)需要清

15、除這些浮動(dòng)屬性，清除浮動(dòng)屬性即clear屬性。n9.1.4 CSS布局和Table布局的區(qū)別nCSS布局與傳統(tǒng)表格布局的最大區(qū)別在于：原來的定位都是采用表格，通過表格的間距或者用無色透明的GIF圖片來控制布局版塊的間距；而css則采用層(div)來定位，通過層的margin，padding，border等屬性來控制版塊的間距。9.2 DIV+CSS布局網(wǎng)頁n9.2.1 DIV+CSS布局網(wǎng)頁簡介nDiv是專門用于布局設(shè)計(jì)的容器對(duì)象，div標(biāo)簽也是成對(duì)出現(xiàn)，即和兩個(gè)標(biāo)簽，將內(nèi)容放在兩個(gè)標(biāo)簽之間。div除了可以直接放入文本，也可以放入其他標(biāo)簽，也可以多個(gè)div進(jìn)行嵌套使用，最終目的就是合理的標(biāo)識(shí)出

16、我們的頁面區(qū)域。nHTML中的對(duì)象有兩類，一類是block即塊狀對(duì)象，塊狀對(duì)象指的是當(dāng)前對(duì)象顯示為一個(gè)方塊，默認(rèn)的現(xiàn)實(shí)狀態(tài)下，將占據(jù)整行，其他的對(duì)象在下一行顯示。另一類是行間對(duì)象或者內(nèi)聯(lián)元素，這種對(duì)象允許下一個(gè)對(duì)象與它本身在一行中顯示。ndiv是屬于塊狀對(duì)象，它的最終樣式根據(jù)CSS的功能編寫的，實(shí)現(xiàn)了實(shí)現(xiàn)和樣式分離，而且由它來設(shè)計(jì)的網(wǎng)頁布局更靈活，不像表格設(shè)計(jì)的布局那樣死板，不好轉(zhuǎn)換。n9.2.2 DIV+CSS布局網(wǎng)頁分類n（1）單行單列n（2）單行兩列n（3）單行三列n（4）頂行三列9.3 AP DIV布局網(wǎng)頁n（1）AP Div的定義及特性n1）所謂AP Div，是指存放文本、圖像、表單

17、和插件等網(wǎng)頁內(nèi)容的容器，可以想象成是一張一張疊加起來的透明膠片，每張透明膠片上都有不同的畫面，它用來控制瀏覽器窗口中網(wǎng)頁內(nèi)容的位置、層次。n2）特性：AP Div最主要的特性就是它是浮動(dòng)在網(wǎng)頁內(nèi)容之上的；也就是說，可以在（不影響其他網(wǎng)頁元素情況下）網(wǎng)頁上任意改變其位置，實(shí)現(xiàn)對(duì)AP Div的準(zhǔn)確定位；把頁面元素放入AP Div中可以使用戶對(duì)頁面操作的布局更加輕松。n3）AP Div元素還有一些其他的重要特性。AP Div元素可以重疊n（2）繪制AP Div的步驟：n1）將光標(biāo)放在文檔插入點(diǎn)，在“布局”面板中單擊“繪制AP Div”按鈕。n2）在文檔窗口中拖動(dòng)畫出AP Div元素，按住Ctrl可畫

18、多個(gè)AP Div元素。也可以通過復(fù)制、粘貼，快速制作出多個(gè)類似的AP Div元素。n3）每個(gè)AP Div元素中添加相應(yīng)的文字和圖片。n4）為元素命名并調(diào)整好各元素的位置，可以通過菜單“修改”|“排列順序”命名操作。n（3）與時(shí)間軸結(jié)合的動(dòng)畫效果n1）添加AP Div元素，并加入相應(yīng)的圖片或文字。n2）通過“窗口”菜單，調(diào)出時(shí)間軸。n3）把剛添加的AP Div元素拖動(dòng)到時(shí)間軸上。n4）右擊時(shí)間軸，選擇“記錄AP元素的路徑”命令，拖動(dòng)AP Div元素在屏幕中移動(dòng)。n5）選中時(shí)間軸上的“自動(dòng)播放”和“循環(huán)”按鈕，查看效果。n（4）與行為結(jié)合的交互效果nAP Div元素屬性的一個(gè)重要功能就是顯示/隱藏

19、功能，與“行為”中顯示/隱藏元素結(jié)合并利用光標(biāo)的OnMouseOver和OnMouseOut事件制作出交互效果。n實(shí)現(xiàn)的步驟如下：n1）插入四個(gè)AP Div元素并命名，在其中加入對(duì)應(yīng)的四張大圖片。n2）同時(shí)選中新加入的四元素和“kuang”元素，通過修改菜單調(diào)整它們的位置相同。n3）在AP元素面板中把“kuang”元素拖到四元素的上面，達(dá)到擋板的作用。n4）設(shè)置AP Div元素的可見性讓四個(gè)大圖片先隱藏。n5）通過菜單“窗口”“行為”調(diào)出行為面板，選中“zgt”，單擊+，顯示/隱藏元素，選中“zgd“元素單擊顯示，確定；并把行為的觸發(fā)條件改為“onMouseOver”；實(shí)現(xiàn)效果光標(biāo)放在中國館的

20、小圖像上，在框內(nèi)出現(xiàn)中國館的大圖片。n6）通過菜單“窗口”調(diào)出行為面板，選中“zgt”，單擊+，顯示/隱藏元素，選中“zgd“單擊隱藏，確定；并把行為的觸發(fā)條件改為“onMouseOut”。 實(shí)現(xiàn)光標(biāo)離開中國館的小圖像上，在框內(nèi)中國館的大圖片消失的效果。9.4項(xiàng)目案例學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 案例描述案例描述 學(xué)習(xí)和使用DIV+CSS布局網(wǎng)頁。根據(jù)CSS布局方法，使用Dreamweaver CS5制作醫(yī)藥商務(wù)系統(tǒng)網(wǎng)站系統(tǒng)網(wǎng)頁，如圖9-4-1所示。案例要點(diǎn)案例要點(diǎn) CSS布局規(guī)劃網(wǎng)頁的方法、常用的CSS布局屬性的設(shè)置。案例實(shí)施案例實(shí)施 （1）選擇“開始”“所有程序”“Adobe Dreamweaver

21、CS5”，啟動(dòng)Adobe Dreamweaver CS5，新建一站點(diǎn)，將images、Scripts和flash素材文件夾復(fù)制到本站點(diǎn)文件夾中。（2）選擇“文件”“新建”菜單項(xiàng)，打開“新建文檔”對(duì)話框，選擇“空白頁”“HTML”“無”，單擊“創(chuàng)建”按鈕，新建一個(gè)網(wǎng)頁。（3）在打開的空白文檔中，選擇“文件”“保存”菜單項(xiàng)，將文件保存在根目錄下，文件名為index.html。（4）在頁面index.html的文檔編輯區(qū)的【標(biāo)題】文本框里，將標(biāo)題命名為“醫(yī)藥商務(wù)網(wǎng)站”。案例實(shí)施案例實(shí)施 （5）選擇“文件”“新建”菜單項(xiàng)，打開“新建文檔”對(duì)話框，選擇“空白頁”“CSS”，單擊“創(chuàng)建”按鈕，新建CSS文

22、檔。（6）在站點(diǎn)文件夾中新建一個(gè)css文件夾，將剛建立的css文檔保存到該文件夾中，并命名為style.css。（7）在style.css文檔中，設(shè)置網(wǎng)頁中每個(gè)元素邊界屬性margin值為0、填充屬性padding值為0，其語句為：*margin:0;padding:0;，加上這句就可以刪除瀏覽器這些默認(rèn)值，方便后面的設(shè)置。（8）在style.css文檔中，設(shè)置網(wǎng)頁body的margin、padding、font-size和color的默認(rèn)屬性值，其語句為：bodymargin:0;padding:0;font-size:12px;color:#666666;。（9）在style.css文檔中

23、，設(shè)置網(wǎng)頁中標(biāo)題、列表、表單的margin和padding默認(rèn)屬性值，其語句為：h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,inputmargin:0;padding:0案例實(shí)施案例實(shí)施 （10）點(diǎn)擊“css樣式”面板中的附加樣式表圖標(biāo) ，則會(huì)彈出如圖9-4-2所示的“鏈接外部樣式表”對(duì)話框，目的是把剛建好的style.css鏈接到index.html網(wǎng)頁中。案例實(shí)施案例實(shí)施 （11）將index.html分為五個(gè)區(qū)域，分別為：top、nav、centent、link和footer，分別代表網(wǎng)頁的logo部分、導(dǎo)航條部分、中間主體部分、友情鏈接部分和底部的版權(quán)部分。（1

24、2）在style.css文檔中，設(shè)定top屬性的初始值#topwidth:760px;height:110px;margin:0 auto;.top_zwidth:304px;height:110px;float:left;.top_ywidth:456px;height:110px;float:right;（13）在index.html文檔中，將光標(biāo)放置在top部分，點(diǎn)擊“插入”|“常用”面板的插入圖像按鈕 ，彈出插入圖像對(duì)話框。案例實(shí)施案例實(shí)施 （14）選中剛插入的圖片，在屬性面板中的“類”選擇top_z類來設(shè)定其屬性，如圖9-4-4所示。案例實(shí)施案例實(shí)施 （15）在index.html文

25、檔中，將光標(biāo)放置在剛插入的圖片的后面，點(diǎn)擊“插入”|“常用”面板的插入媒體的SWF按鈕 ，彈出“選擇SWF”對(duì)話框。（16）選中剛插入的flash，在屬性面板中的“類”選擇top_y類來設(shè)定其屬性（17）在dreamweaver cs5設(shè)計(jì)窗口中效果如圖9-4-7所示。案例實(shí)施案例實(shí)施 （18）在style.css文檔中，設(shè)定nav屬性、nav ul即項(xiàng)目列表屬性、nav ul li即列表項(xiàng)屬性以及nav ul li a即列表項(xiàng)超鏈接屬性的初始值，代碼如下：#navwidth:760px;height:23px;background:#578cb8;margin:0 auto; positio

26、n:relative;#nav ulborder:#FFFFFF 1px solid;#nav ul lifloat:left;#nav ul li a,#nav ul li a:visiteddisplay:block;color:#FFFFFF;font-size:14px; text-decoration:none;width:100px;height:23px;line-height:23px;text-align:center;border-right:#FFFFFF 1px solid;案例實(shí)施案例實(shí)施 （19）在index.html文檔中，將光標(biāo)放置在nav區(qū)域，插入項(xiàng)目列表，代

27、碼如下： 首頁 IT服務(wù) 醫(yī)藥商務(wù)系統(tǒng) 員工招聘 聯(lián)系我們 案例實(shí)施案例實(shí)施 （20）在dreamweaver cs5設(shè)計(jì)窗口中效果如圖9-4-8所示。案例實(shí)施案例實(shí)施 （21）在style.css文檔中，設(shè)定centent區(qū)域?qū)傩?、centent左側(cè)區(qū)域?qū)傩院蚦entent右側(cè)區(qū)域?qū)傩裕浯a如下：#cententwidth:760px;height:313px;margin:10px auto 10px; clear:both;.leftwidth:182px;height:313px;float:left.rightwidth:569px;height:313px;float:right

28、;border:#c0c0c0 1px solid;（22）在index.html文檔中，centent區(qū)域分為left和right兩個(gè)區(qū)域，其代碼如下： 案例實(shí)施案例實(shí)施 （23）經(jīng)過上述步驟后，在dreamweaver cs5設(shè)計(jì)窗口中效果如圖9-4-9所示。案例實(shí)施案例實(shí)施 （24）在style.css文檔中，設(shè)定centent區(qū)域中l(wèi)eft區(qū)域的需要的類，其代碼如下：.left_swidth:182px;height:228px;background:#f5f5f5; .left_s h1width:162px;height:25px; background:url(./images/

29、left_h1bj.gif) no-repeat 10px 9px; line-height:25px;padding-left:20px;margin-top:10px;.left_s h1 a,left_s h1 a:visitedfont-size:14px;color:#5f8eb8; .chawidth:100px;height:17px; background:url(./images/left_ul.gif) no-repeat left top;line-height:17px;padding-left:35px;margin-left:15px;.cha a,.cha a:v

30、isitedcolor:#076392;.cha1width:100px;height:17px; background:url(./images/left_ul1.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha1 a,.cha1 a:visitedcolor:#076392;.cha2width:100px;height:17px; background:url(./images/left_ul2.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha2 a,.cha2 a:visitedcolor:#076392;.cha3width:100px;height:17px; background:url(./images/left_ul3.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha3 a,.cha3 a:visitedcolor:#076392;.dengluwidth:180px;height:97px;border:#