企業(yè)網(wǎng)站設(shè)計(jì)與制作

1、第六章 CSS層疊樣式表基礎(chǔ)（二） 理論部分CSS的基本語法是什么？行內(nèi)樣式和嵌入樣式語法有什么區(qū)別？選擇器都分為哪幾類？CSS樣式的優(yōu)先級都是什么？設(shè)置文本字體的大小應(yīng)用哪個(gè)屬性？在網(wǎng)頁中插入圖片應(yīng)使用哪個(gè)標(biāo)簽？浮動(dòng)屬性的意義是什么？對應(yīng)的屬性值都有哪些？課前小考2/39本章技能點(diǎn)了解行級標(biāo)簽與塊級標(biāo)簽了解CSS浮動(dòng)屬性掌握使用CSS設(shè)置超鏈接效果掌握使用CSS設(shè)置列表標(biāo)簽制作表格效果技能展示3/39本章結(jié)構(gòu)CSS設(shè)置超鏈接CSS的偽類別屬性背景圖片變換的超鏈接CSS層疊樣式表基礎(chǔ)（二）塊級標(biāo)簽與行級標(biāo)簽CSS樣式表的浮動(dòng)屬性設(shè)置項(xiàng)目列表標(biāo)簽分類浮動(dòng)屬性使用列表制作表格效果定位屬性4/39按

2、鈕式超鏈接塊級標(biāo)簽與行級標(biāo)簽3-15/39HTML標(biāo)簽分類塊級標(biāo)簽：顯示為“塊”狀，獨(dú)占一行前后斷行顯示，占據(jù)一整行具有寬度和高度常用作容器，“容納”其他塊級標(biāo)簽或行級標(biāo)簽行級標(biāo)簽：在一行內(nèi)按照先后順序顯示一般用于組織內(nèi)容，文本、圖片等塊級標(biāo)簽與行級標(biāo)簽3-26/39塊級標(biāo)簽基本塊級標(biāo)簽標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線標(biāo)簽布局塊級標(biāo)簽列表標(biāo)簽（有序、無序、定義）、分區(qū)標(biāo)簽（）行級標(biāo)簽圖像標(biāo)簽、超鏈接標(biāo)簽、范圍標(biāo)簽、換行標(biāo)簽表單相關(guān)的輸入框、單選按鈕 div內(nèi)可包括標(biāo)題、段落、無序列表、有序列表、定義列表、表格、表單等內(nèi)容 春望 國破山河在，城春草木深。 感時(shí)花濺淚，恨別鳥驚心。 烽火連三月，家書抵萬

3、金。 白頭搔更短，渾欲不勝簪。 div其實(shí)就是一個(gè)劃分邏輯區(qū)域的標(biāo)簽，常用作容器，div還可以包括普通的文字、圖片等內(nèi)容. 設(shè)置寬、高以及背景色塊級標(biāo)簽與行級標(biāo)簽3-37/39塊級標(biāo)簽與行級標(biāo)簽的顯示區(qū)別 一個(gè)div標(biāo)簽 標(biāo)題標(biāo)簽 一個(gè)段落標(biāo)簽，中間包括圖片標(biāo)簽和范圍標(biāo)簽塊級標(biāo)簽行級標(biāo)簽塊級標(biāo)簽獨(dú)占一行行級標(biāo)簽在一行內(nèi)逐一顯示CSS樣式浮動(dòng)屬性3-18/39浮動(dòng)屬性： float用于定義元素的浮動(dòng)方向改變塊級標(biāo)簽的顯示屬性，塊級標(biāo)簽不會(huì)獨(dú)占一行脫離常規(guī)文檔流而表現(xiàn)為向右或向左浮動(dòng) 屬性值none：默認(rèn)值，不浮動(dòng)left：左浮動(dòng)right：右浮動(dòng)CSS樣式浮動(dòng)屬性3-29/39浮動(dòng)屬性的顯示效果

4、#div1 width:150px; height:100px; background:#ccc; #div2 width:150px; height:150px; background:#3f3; #div3 width:400px; height:200px; background:#3cc; 第1塊第2塊第3塊默認(rèn)的常規(guī)文檔流：頁面內(nèi)容從上到下，從左到右排列。DIV塊換行顯示#div1 width:150px; height:100px; background:#ccc; float:right; #div2 width:150px; height:150px; background:#

5、3f3; #div3 width:400px; height:200px; background:#3cc; 第1塊第2塊第3塊向右浮動(dòng)，脫離常規(guī)文檔流CSS樣式浮動(dòng)屬性3-310/39多標(biāo)簽浮動(dòng)屬性的顯示效果1div width:350px; height:350px; background-color:#FF0; #one width:100px; height:100px; background-color:#F00; #two width:100px; height:100px; background-color:#00F; color:#fff;#three width:100px;

6、 height:100px; background-color:#0FF; 第一個(gè)分區(qū)標(biāo)簽 第二個(gè)分區(qū)標(biāo)簽 第三個(gè)分區(qū)標(biāo)簽 .float float:left; class=floatclass=floatclass=floatDIV塊元素失去“塊狀”換行顯示特征，變?yōu)樾袃?nèi)元素.float float:right; 右浮動(dòng)顯示效果HTML超鏈接標(biāo)簽11/39超鏈接標(biāo)簽 搜狐超鏈接顯示效果CSS的偽類別屬性2-112/39使用CSS修飾超鏈接樣式 a text-decoration:none; 搜狐 普通文字設(shè)置超鏈接無下劃線超鏈接顯示效果無下劃線普通文字效果訪問后的超鏈接效果CSS的偽類別屬性

7、2-213/39超鏈接偽類別屬性屬性含義a:link超鏈接普通樣式，即在瀏覽器中正常顯示的樣式a:hover鼠標(biāo)經(jīng)過超鏈接時(shí)顯示的樣式a:visited超鏈接被點(diǎn)擊過后顯示的樣式a:active此狀態(tài)為當(dāng)前激活狀態(tài)，即超鏈接被點(diǎn)擊時(shí)的狀態(tài)使用CSS偽類別修飾超鏈接效果14/39使用表格制作菜單欄結(jié)構(gòu)設(shè)置表格單元格樣式設(shè)置超鏈接樣式 首頁 資訊前沿 課程介紹 青鳥校區(qū) 明星學(xué)員 學(xué)員服務(wù) table td width:100px; line-height:20px; font-size:12px; text-align:center; background:#90bcff;a:link colo

8、r:#059; text-decoration:none;a:hover color:#ff0; text-decoration:underline;a:visited color:#000; text-decoration:none;文本行高文本字號水平居中背景色單元格寬度鼠標(biāo)經(jīng)過時(shí)超鏈接樣式設(shè)置顏色，有下劃線訪問過的超鏈接樣式設(shè)置顏色，無下劃線超鏈接正常顯示樣式設(shè)置顏色，無下劃線超鏈接正常顯示樣式鼠標(biāo)經(jīng)過時(shí)超鏈接樣式訪問過的超鏈接樣式制作鼠標(biāo)經(jīng)過時(shí)變色的表格15/39CSS偽類別可以應(yīng)用到其他標(biāo)簽鼠標(biāo)經(jīng)過變色的表格表格內(nèi)容樣式表內(nèi)容 員工計(jì)算機(jī)配置情況表 CPU內(nèi)存硬盤顯示器 IP地址 李

9、四Intel2G320G液晶 192.168.100.30 table font-size:12px; border:0px; width:450px; border-collapse:collapse; tr:hover background:#c4e4ff; td border:1px solid #000; caption font-size:18px; font-weight:bold; 表格基本樣式行的偽類別屬性鼠標(biāo)經(jīng)過時(shí)變色鼠標(biāo)經(jīng)過時(shí)表格整行變色按鈕式超鏈接2-116/39按鈕式超鏈接效果圖分析使用不同顏色背景顯示突出按下按鈕使用不同顏色的邊框顯示按鈕的按下效果按鈕式超鏈接2-21

10、7/39頁面內(nèi)容代碼設(shè)置超鏈接樣式a:link,a:visited display:block; font-size:12px; text-align:center; vertical-align:middle; width:100px; height:20px; float:left; line-height:22px;a:link,a:visited color:#a62020; background:#89bbff ; text-decoration:none; border-top:1px solid #eee; border-left:1px solid #eee; border-b

11、ottom:1px solid #777; border-right:1px solid #777;a:hover color:#821818; background:#3d8fff; text-decoration:none; border-top:1px solid #777; border-left:1px solid #777; border-bottom:1px solid #eee; border-right:1px solid #eee;設(shè)置超鏈接塊狀顯示，設(shè)置寬、高設(shè)置左浮動(dòng)，使超鏈接標(biāo)簽在一行顯示正常顯示和訪問后的樣式包括顏色、邊框、背景等鼠標(biāo)經(jīng)過時(shí)的樣式包括顏色、邊框、背景

12、等 首頁 資訊前沿 課程介紹 青鳥校區(qū) 明星學(xué)員 學(xué)員服務(wù)按鈕式超鏈接背景圖片變換的超鏈接2-118/39背景圖片變換超鏈接效果圖分析正常顯示和鼠標(biāo)經(jīng)過時(shí)使用不同的背景圖片超鏈接顯示效果背景圖片變換的超鏈接2-219/39頁面內(nèi)容代碼設(shè)置超鏈接樣式a:link,a:visited width:80px; height:29px; text-align:center; vertical-align:middle; float:left; line-height:34px; display:block;a:link,a:visited color:#fff; text-decoration:non

13、e; font-size:14px; font-weight:700; background:url(image/menubg.gif) 0px -29px no-repeat;a:hover background:url(image/menubg.gif) 0 0 no-repeat; text-decoration:none;設(shè)置超鏈接塊狀顯示，設(shè)置寬、高設(shè)置左浮動(dòng)，使超鏈接標(biāo)簽在一行顯示正常顯示和訪問后的樣式鼠標(biāo)經(jīng)過時(shí)的樣式 首頁 資訊前沿 課程介紹 青鳥校區(qū) 明星學(xué)員 學(xué)員服務(wù)設(shè)置背景圖片超鏈接顯示效果請思考行級標(biāo)簽與塊級標(biāo)簽的區(qū)別有哪些？請舉例說明浮動(dòng)屬性： float的作用有哪些？

14、超鏈接的偽類別屬性包括哪四種？分別是什么含義？小結(jié)20/39使用列表制作表格效果4-121/39頁面效果分析頁面包含三部分，頂部、中間以及底部頁面中超鏈接部分中間內(nèi)容部分使用列表實(shí)現(xiàn)頂部中部底部一個(gè)列表一個(gè)列表項(xiàng)使用列表制作表格效果4-222/39頁面內(nèi)容結(jié)構(gòu)頁面頂部部分內(nèi)容頁面中間部分內(nèi)容頁面底部部分內(nèi)容 Featured Classes | New Classes | ing Classes Sun,Sep 26 - 11:59 PM GRE Advantage - Anywhere By Kaplan TestPrep and Amissions pro $699.00 Explore

15、ing classes 超鏈接第二行為圖片超鏈接超鏈接使用列表制作表格效果4-323/39設(shè)置頁面樣式設(shè)置最外層ID為main分區(qū)標(biāo)簽樣式設(shè)置頂部ID為top分區(qū)標(biāo)簽樣式設(shè)置中間ID為btm的分區(qū)標(biāo)簽樣式設(shè)置底部ID為mid的分區(qū)標(biāo)簽樣式小圖標(biāo)對齊方式#top background:#f0f5f9; width:100%; #top a:link text-decoration: none; #top a:hover text-decoration: underline; #btm width: 100%; text-align: right; #btm a:link color: #0066

16、FF; text-decoration:none; #btm a:hover text-decoration:underline; #mid ul float: left; width: 142px;#mid ul li font-size: 13px; list-style-type: none;#mid img border:0; #mid span a:link font-size: 10px; color: #A8A8A8; font-weight: normal; text-decoration:none;#mid span a:hover text-decoration:under

17、line;#mid span img vertical-align:top;#main width:960px; border: 1px solid #ced3d7; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;設(shè)置整體寬度設(shè)置邊框樣式設(shè)置頂部背景色和寬度設(shè)置頂部超鏈接效果設(shè)置底部寬度和對齊方式設(shè)置底部超鏈接樣式設(shè)置列表寬度、左浮動(dòng)設(shè)置列表項(xiàng)無列表符號清除超鏈接圖片邊框#mid a:link color: #0066FF; text-decoration:none;#mid

18、 a:hover text-decoration:underline;設(shè)置圖片下方標(biāo)題超鏈接樣式超鏈接樣式使用列表制作表格效果4-424/39CSS樣式清除屬性（clear）和前一個(gè)浮動(dòng)標(biāo)簽換行隔開只對塊級元素有效顯示異常常見的清除屬性值含義clear:left在左側(cè)不允許有浮動(dòng)元素clear:right在右側(cè)不允許有浮動(dòng)元素clear:both在左右兩側(cè)均不允許有浮動(dòng)元素clear:none默認(rèn)值，允許兩側(cè)都有浮動(dòng)元素body font-size:20px; font-weight:bold; color:#FFF; #one background:#00f; width:100px; he

19、ight:100px; float:left; #two background:#f00; width:100px; height:100px; float:left; #three background:#0fF; width:300px; height:200px; 第一塊 第二塊 第三塊clear:both;浮動(dòng)顯示效果設(shè)置清除屬性后的顯示效果為列表制作表格效果添加清除屬性 在中間部分最后添加一個(gè)分區(qū)標(biāo)簽設(shè)置清除屬性，并設(shè)置高度為0px，不影響顯示效果CSS樣式定位屬性3-125/39CSS樣式定位屬性（position）確定標(biāo)簽定位位置常用屬性值absolute：絕對定位，相對于第一個(gè)

20、非默認(rèn)定位的父標(biāo)簽的定位fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位relative：相對定位，相對于標(biāo)簽原始位置進(jìn)行的定位static：默認(rèn)值，沒有定位根據(jù)正常情況顯示使用“l(fā)eft”、“top”、“right”、“bottom”設(shè)置位置CSS樣式定位屬性3-226/39相對定位絕對定位固定定位#main border:2px solid #000; width:300px; #one background:#FF0; width:200px; height:100px; #two background:#00F; width:50px; height:30px; 3個(gè)分區(qū)標(biāo)簽相互嵌套#t

21、wo position:relative; left:50px; top:20px; 設(shè)置相對定位設(shè)置定位位置20px50px#two position:absolute; right:50px; bottom:20px; 設(shè)置絕對定位設(shè)置定位位置20px50px#main position:relative; 更改父標(biāo)簽定位方式20px50px#main position:relative; #two position:fixed; right:50px; bottom:20px; 設(shè)置相對定位設(shè)置定位位置20px50pxCSS樣式定位屬性3-327/39同級標(biāo)簽定位顯示效果標(biāo)簽設(shè)置相對定位不影響其他標(biāo)簽的顯示情況標(biāo)簽設(shè)置固定定位或絕對定位標(biāo)簽顯示效果類似于浮動(dòng)屬性標(biāo)簽所占的父標(biāo)簽高度為0默認(rèn)顯示情況第一塊設(shè)置相對定位第一塊設(shè)置絕對定位第二塊