第2章-網(wǎng)頁樣式(編輯修改稿)
2024-09-12 02:27 本頁面
【文章內(nèi)容簡介】 指示文本 crosshair 鼠標(biāo)呈現(xiàn)十字狀 CSS設(shè)置鼠標(biāo)形狀 cursor{cursor:pointer。} 背景樣式 背景圖像 背景顏色 背景圖像 背景顏色 div標(biāo)簽 div標(biāo)簽的用法 網(wǎng)頁布局 排版網(wǎng)頁內(nèi)容 語法 div網(wǎng)頁內(nèi)容 …/div header { width:200px。 height:280px。 } …… div id=header網(wǎng)頁內(nèi)容 …/div 寬 高 網(wǎng)頁背景 背景顏色 backgroundcolor 背景圖像 backgroundimage 背景顏色值：十六進(jìn)制方法表示 transparent 示例 6：背景顏色 設(shè)置背景圖像 背景圖像 backgroundimage屬性 背景重復(fù)方式 backgroundrepeat屬性 背景定位 backgroundposition屬性 backgroundimage:url(圖片路徑 )。 repeat：沿水平和垂直兩個方向平鋪 norepeat：不平鋪，即只顯示一次 repeatx：只沿水平方向平鋪 repeaty：只沿垂直方向平鋪 值 含義 Xpos Ypos 單位： px， Xpos表示水平位置， Ypos表示垂直位置 X% Y% 使用百分比表示背景的位置 X、 Y方向關(guān)鍵詞 水平方向的關(guān)鍵詞： left、 center、 right 垂直方向的關(guān)鍵詞： top、 center、 bottom 設(shè)置背景 示例 背景屬性 background屬性 .title { fontsize:18px。 fontweight:bold。 color:FFF。 textindent:1em。 lineheight:35px。 background:C00 url(../image/) 205px 10px norepeat。 } 背景樣式簡寫 背景顏色 背景圖像 背景定位 背景不重復(fù)顯示 列表樣式 21 liststyletype liststyleimage liststyleposition liststyle 值 說明 語法示例 none 無標(biāo)記符號 liststyletype:none。 disc 實心圓，默認(rèn)類型 liststyletype:disc。 circle 空心圓 liststyletype:circle。 square 實心正方形 liststyletype:square。 decimal 數(shù)字 liststyletype:decimal 列表樣式 22 liststyleimage liststyleposition inside outside liststyle li { liststyleimage:url(image/)。 liststyletype:circle。 } li { liststyleimage:url(image/)。 liststyletype:circle。 liststyleposition:outside。 } li { liststyle:circle outside url(image/)。 } 示例 示例 8：列表樣式 列表圖標(biāo)效果 練習(xí) 4— 家用電器商品分類頁面 需求說明 電器分類無下劃線，鼠標(biāo)懸浮超鏈接時顯示下劃線。 分類內(nèi)容超鏈無下劃線，鼠標(biāo)懸浮至超鏈接時字體顏色為棕紅色（ F60），顯示下劃線。 練習(xí) 完成時間： 10分鐘 18px、加粗、行距 3背景色 0f7cbf，縮進(jìn) 1字符 14px、加粗、行距 30px、背景色 e4f1fa、字體顏色0f7cbf 12px、行距 20px，字體顏色 666666 練習(xí) 5— 暢銷書排行榜頁面 21 訓(xùn)練要點 設(shè)置頁面的背景屬性 使用 CSS設(shè)置超鏈接樣式 使用 CSS設(shè)置列表樣式 需求說明 使用無序列表制作暢銷書排行榜頁面 超鏈接無下劃線，鼠標(biāo)懸浮至超鏈接時顯示下劃線 指導(dǎo) 16px、縮進(jìn) 1字符，行距30px，綠色背景 518700 背景圖像 淺綠色背景 f3f4df、 12px，行距 28px，文本顏色 1a66b3 背景圖標(biāo) 完成時間： 10分鐘 小結(jié) 使用 CSS設(shè)置字體的大小、類型、風(fēng)格、粗細(xì)等。 使用 CSS設(shè)置文本顏色、行距、首行縮進(jìn)、對齊方式、文本裝飾等。 使用 CSS設(shè)置超鏈接在不同狀態(tài)下的樣式。 使用 CSS設(shè)置頁面背景顏色、背景圖片，為列表設(shè)置列表自定義圖標(biāo)。 使用 CSS設(shè)置列表項的類型、列表圖像及列表符號顯示位置。 盒子模型 盒子模型 網(wǎng)頁布局的基礎(chǔ) 與生活中的盒子相似 紙盒 填充部分 盒內(nèi)物品 紙盒外圍間隙 盒子模型 盒子模型屬性 邊框 (border) 內(nèi)邊距 (padding) 元素內(nèi)容 外邊距 (margin) 盒子模型 盒子模型平面結(jié)構(gòu)圖 盒子模型屬性的共同點 順時針分為：上右下左 4個方向 3個屬性都可以分別設(shè)置各個方向?qū)傩灾? 3個屬性都可以同時設(shè)置 4個方向?qū)傩灾? 3個屬性都占據(jù)空間 盒子模型 盒子模型三維立體結(jié)構(gòu)圖 第一層 第二層 第三層 第四層 第五層 邊框 邊框 bordercolor borderwidth borderstyle 屬性 說明 示例 bordertopcolor 上邊框顏色 bordertopcolor:369。 borderrightcolor 右邊框顏色 borderrightcolor:369。 borderbottomcolor 下邊框顏色 borderbottomcolor:fae45b。 borderleftcolor 左邊框顏色 borderleftcolor:efcd56。 bordercolor 四個邊框為同一顏色 bordercolor:eeff34。 上、下邊框顏色 ： 369 左、右邊框顏色 ： 000 bordercolor:369 000。 上邊框顏色 ： 369 左、
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1