第六章上機常用的CSS屬性相關回顧1、2、3、上機目標使用背景屬性使用邊框?qū)傩允褂脽o序列表實現(xiàn)簡單的菜單設置超鏈接的裝飾線熟悉常用的CSS樣式屬性教員講解上機目標訓練技能點background-image屬性background-repeat屬性background-position屬性border-top、border-right、border-bottom、border-left屬性border-width屬性border-style屬性border-color屬性border屬性background屬性width屬性display屬性階段1訓練技能點background-image屬性background-repeat屬性background-position屬性階段1有時候，對于一個區(qū)域的背景圖像，我們希望只出現(xiàn)一次，而不是重復平鋪；有時候還想要精確地指定背景圖像出現(xiàn)的位置。階段1CSS中background-repeat屬性可以設置背景圖像是否重復平鋪以及向哪個方向平鋪；background-postion屬性可以使用像素或百分比指定背景圖像開始出現(xiàn)的位置階段1<styletype="text/css"> #mytable{ width:500px;height:150px; background:#fedcbaurl(image/eg_bg.gif)no-repeatscroll20%20px; }</style>9階段1？共性問題集中講解階段2技能要點border-top、border-right、border-bottom、border-left屬性border-width屬性border-style屬性border-color屬性階段2有時候，我們想對一個區(qū)域的頂、右、底、左四個邊框分別進行設置。階段2使用border-top、border-right、border-bottom、border-left屬性可以對四個邊框分別設置；另外使用border-width（border-style、border-color）設置邊框粗細（線型、顏色）時，支持四個值，這四個值依次表示頂、右、底、左邊框的粗細（線型、顏色）。階段2<styletype="text/css"> #myp{ border:none;border-top:4pxsolidblue;border-bottom:2pxdottedred; } #mytxt{ border-width:1px;border-style:nonenonesolidnone;border-color:gray; }</style><divid="mydiv">右邊是個文本框：<inputid="mytxt"name="txt"value="只有底邊框的文本框"/><pid="myp">這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p></div>14階段2？共性問題集中講解階段3技能要點border屬性background屬性width屬性display屬性階段3一般網(wǎng)站的網(wǎng)頁頂部都有網(wǎng)站的導航菜單，點擊各個菜單項可以轉(zhuǎn)到不同的欄目。我們要在網(wǎng)頁中實現(xiàn)一個簡單的菜單。可以將整個菜單菜單看作是一個無序列表，每個列表項目就是一個菜單項；菜單項被點擊后要能夠鏈接到其它欄目頁面，所以列表項目中應該包含超鏈接；鼠標移動到菜單項上方時菜單項背景會變色，表明它即將被用戶點擊，這一點可以通過超鏈接的hover偽類來實現(xiàn)。<ulid="menu"> <li><ahref="#">網(wǎng)站首頁</a></li> <li><ahref="#">課程體系</a></li> <li><ahref="#">師資力量</a></li> <li><ahref="#">學員論壇</a></li></ul><style> #menu{ border:1pxsolid#abcdef; background-color:#efefef; } #menuli{ display:inline;width:100px; border:1pxsolid#fedcba; text-align:center } #menulia{ text-decoration:none; } #menulia:hover{ width:100%; background-color:#cccccc; }</style>18階段3？共性問題集中講解階段4超鏈接在瀏覽器中默認是有下劃線的。我們希望頁面中大部分超鏈接沒有任何裝飾線，但局部區(qū)域的超鏈接既有上劃線也有下劃線。先針對超鏈接a標簽定義HTML標簽選擇器，再針對局部區(qū)域的超鏈接定義類選擇器，并為局部區(qū)域的容器定義id屬性，使用id和類名構(gòu)成上下文選擇器。階段5參考本章理論部分的范例進