Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務7、8 鏈接偽類和CSS樣式面板；id選擇器、偽選擇器和表格樣式_第1頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務7、8 鏈接偽類和CSS樣式面板；id選擇器、偽選擇器和表格樣式_第2頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務7、8 鏈接偽類和CSS樣式面板；id選擇器、偽選擇器和表格樣式_第3頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務7、8 鏈接偽類和CSS樣式面板；id選擇器、偽選擇器和表格樣式_第4頁
Web前端開發(fā)任務驅動式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務7、8 鏈接偽類和CSS樣式面板；id選擇器、偽選擇器和表格樣式_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

任務7鏈接偽類和CSS樣式面板第四單元CSS3基礎鏈接偽類CSS樣式面板掌握學習目標網頁中常見的超鏈接樣式了解:學習目標任務目標實戰(zhàn)演練——制作散文欣賞網頁任務目標實戰(zhàn)演練——制作熱點新聞列表知識準備1.鏈接偽類默認的超鏈接樣式：鏈接偽類：<a>標簽的偽類超鏈接狀態(tài)a:link未訪問過的超鏈接a:visited已經訪問過的超鏈接a:hover鼠標經過或懸停在超鏈接上a:active鼠標按下而未放開時的超鏈接定義順序：遵循“愛恨原則”，即“LoVe-HAte”原則知識準備示例：鏈接偽類的使用<styletype="text/css">a:link{color:#F60;text-decoration:none;}a:visited{color:#F60;text-decoration:none;}a:hover{color:#00F;text-decoration:underline;}a:active{color:#690;text-decoration:none;}</style><body><ahref="#">商城首頁</a><ahref="#">潮流飾品</a><ahref="#">母嬰童裝</a><ahref="#">家裝家紡</a><ahref="#">手機數碼</a></body>知識準備2.CSS樣式面板類別視圖列表視圖設置屬性視圖附加樣式表新建CSS規(guī)則編輯樣式刪除CSS規(guī)則實戰(zhàn)演練制作散文欣賞網頁案例描述：設計并制作散文欣賞網頁，網頁效果如下。其中光標圖標設置成了“help”樣式，錨點鏈接的四種狀態(tài)（a:link、a:visited、a:hover、a:active）均設置了不同的樣式。強化訓練案例描述：設計并制作熱點新聞列表，網頁效果如下（左）。當鼠標懸停在新聞標題上時，樣式效果如圖（右）。制作熱點新聞列表任務小結0102鏈接偽類CSS樣式面板課后實訓設計并制作“幫助中心”頁面，效果如圖所示。默認效果鼠標懸停超鏈接效果鼠標激活超鏈接效果任務8id選擇器、偽選擇器和表格樣式第四單元CSS3基礎id選擇器表格掌握學習目標偽選擇器了解:學習目標任務目標實戰(zhàn)演練——制作鞋子尺碼對照單強化訓練——制作嬰兒身高體重標準表知識準備1.id選擇器id屬性：用于唯一標識某個標簽元素。id屬性值不能重復，它在當前文檔頁面中必須是唯一的。id選擇器：為標有特定id的HTML元素指定特定的樣式。語法格式：

#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}知識準備示例：id選擇器的使用<styletype="text/css">#one{color:#FFF;background-color:#06C;}#two{font-size:20px;color:#F00;}</style><body><pid="one">背景顏色為藍色，字顏色為白色</p><pid="two">文字大小為20像素，顏色為紅色</p></body>知識準備元素名示例描述:linka:link選擇所有未訪問的鏈接:visiteda:visited選擇所有訪問過的鏈接:hovera:hover選擇鼠標懸停鏈接上的狀態(tài):activea:active選擇鼠標單擊鏈接時的狀態(tài)2.偽選擇器偽類選擇器知識準備2.偽選擇器偽類選擇器元素名示例描述:rootroot 選擇文檔的根元素，通常是返回html:first-childp:first-child匹配屬于任意元素的第一個子元素的<p>元素:last-child p:last-child選擇所有p元素的最后一個子元素:only-childp:only-child選擇所有僅有一個子元素的p元素:only-of-typep:only-of-type選擇所有僅有一個子元素為p的元素:nth-child(n)p:nth-child(2)選擇所有p元素的父元素的第二個子元素:nth-last-child(n)p:nth-last-child(2)選擇所有p元素倒數的第二個子元素:nth-of-type(n)p:nth-of-type(2)選擇所有p元素第二個為p的子元素:nth-last-of-type(n)p:nth-last-of-type(2)選擇所有p元素倒數的第二個為p的子元素知識準備2.偽選擇器偽類選擇器元素名示例描述:focusinput:focus選擇獲得焦點狀態(tài)下的元素:enabled(:disabled)input:enabled(:disabled)選擇啟用（禁用）狀態(tài)的表單元素:checkedinput:checked被選中的單選按鈕或復選框:valid(:invalid)input:valid(:invalid)驗證輸入數據，匹配有效（無效）的input元素:notinput:not(.radio)選擇除去應用了radio類之外的所有input元素知識準備2.偽選擇器偽元素選擇器元素名示例描述:first-letterp:first-letter選擇p段落的首字母:first-linep:first-line選擇p元素的首行:beforeh1:before在元素h1的內容前面插入新內容，必須配合content屬性指定要插入的具體內容:afterh2:after在元素h1的內容后面插入新內容，必須配合content屬性指定要插入的具體內容知識準備3.表格新建表格：新建HTML文件，選擇“插入

表格”菜單命令，打開“表格”對話框。知識準備3.表格創(chuàng)建一個3行3列表格。<tablewidth="200"border="1"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>知識準備3.表格合并單元格：右擊知識準備3.表格設置對齊方式：實戰(zhàn)演練案例描述：設計并制作鞋子尺碼對照單，網頁效果如下。制作鞋子

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論