第7章 設(shè)計(jì)超鏈接樣式_第1頁(yè)
第7章 設(shè)計(jì)超鏈接樣式_第2頁(yè)
第7章 設(shè)計(jì)超鏈接樣式_第3頁(yè)
第7章 設(shè)計(jì)超鏈接樣式_第4頁(yè)
第7章 設(shè)計(jì)超鏈接樣式_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章設(shè)計(jì)超鏈接樣式掌握超鏈接的概念掌握內(nèi)部鏈接、外部鏈接和錨點(diǎn)鏈接使用靈活使用CSS設(shè)置超鏈接樣式學(xué)習(xí)目標(biāo)010203本章任務(wù)任務(wù)1定義超鏈接任務(wù)2定義超鏈接樣式任務(wù)3案例實(shí)現(xiàn)——幾何圖形的導(dǎo)航菜單任務(wù)1定義超鏈接任務(wù)描述

本任務(wù)是制作一個(gè)中國(guó)象棋游戲簡(jiǎn)介網(wǎng)頁(yè)，當(dāng)點(diǎn)擊網(wǎng)頁(yè)導(dǎo)航處的“中國(guó)象棋”、“游戲大廳”、“玩家登錄”、“進(jìn)入房間”、“棋手對(duì)弈”時(shí)，會(huì)跳轉(zhuǎn)到當(dāng)前網(wǎng)頁(yè)中對(duì)應(yīng)位置的詳細(xì)內(nèi)容介紹，而點(diǎn)擊頁(yè)面中的“返回頂部”時(shí)，頁(yè)面又跳轉(zhuǎn)回頂部導(dǎo)航處圖8-1-1：中國(guó)象棋游戲布局代碼樣式代碼任務(wù)分析為詳細(xì)內(nèi)容介紹處的知識(shí)點(diǎn)標(biāo)題添加錨點(diǎn)在頂部導(dǎo)航處的“中國(guó)象棋”、“游戲大廳”、“玩家登錄”、“進(jìn)入房間”、“棋手對(duì)弈”添加指向各錨點(diǎn)的錨點(diǎn)鏈接在頂部導(dǎo)航處的添加錨點(diǎn)為頁(yè)面中的“返回頂部”關(guān)鍵字添加指向頂部導(dǎo)航處錨點(diǎn)的錨點(diǎn)鏈接實(shí)現(xiàn)思路掌握超鏈接的概念布局代碼樣式代碼基本語(yǔ)法常用屬性<a>標(biāo)簽語(yǔ)法：<ahref="鏈接地址">鏈接內(nèi)容</a>屬性描述href鏈接的目標(biāo)地址name給鏈接命名title添加提示文字target指定鏈接的目標(biāo)窗口基本語(yǔ)法target常用窗口屬性值描述_self在當(dāng)前窗口中打開鏈接文檔（默認(rèn)打開方式）_blank在新窗口中打開鏈接文檔_parent在父窗體中打開鏈接文檔_top在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體基礎(chǔ)案例操作在同一個(gè)網(wǎng)站內(nèi)部，通過(guò)內(nèi)部鏈接來(lái)指向并訪問(wèn)屬于該站點(diǎn)內(nèi)的網(wǎng)頁(yè)。用法1．內(nèi)部鏈接左側(cè)布局代碼如下：<!DOCTYPEhtml><html><head><title>超鏈接</title></head><body><ahref="2.html">點(diǎn)擊！鏈接到2.html頁(yè)面</a></body></html>右側(cè)布局代碼如下：<!DOCTYPEhtml><html><head><title>超鏈接</title></head><body>歡迎訪問(wèn)本頁(yè)面</body></html>基礎(chǔ)案例操作在不同網(wǎng)站上，通過(guò)外部鏈接跳轉(zhuǎn)并訪問(wèn)不屬于該站點(diǎn)上的網(wǎng)頁(yè)用法2．外部鏈接布局代碼如下：<!DOCTYPEhtml><html><head><title>超鏈接</title></head><body><ahref="">點(diǎn)擊！鏈接百度頁(yè)面</a></body></html>基礎(chǔ)案例操作瀏覽當(dāng)前的網(wǎng)頁(yè)時(shí)，如果頁(yè)面過(guò)長(zhǎng)，這時(shí)就可以創(chuàng)建錨點(diǎn)鏈接，即在網(wǎng)頁(yè)上建立一個(gè)書簽?zāi)夸洠c(diǎn)擊目錄上的項(xiàng)目就能自動(dòng)跳轉(zhuǎn)到相應(yīng)內(nèi)容上。用法3．錨點(diǎn)鏈接練一練任務(wù)實(shí)現(xiàn)<div><div><h3>  <ahref="#introduce"name="top">中國(guó)象棋</a>     <ahref="#hall">游戲大廳</a>   <ahref="#login">玩家登錄</a>   <ahref="#room">進(jìn)入房間</a>   <ahref="#play">棋手對(duì)弈</a>   <imgsrc="img/chess.jpg"width="700"></div><divclass="cont"><h2align="center"><aname="introduce"></a>中國(guó)象棋游戲簡(jiǎn)介</h2><p>  中國(guó)象棋是起源于中國(guó)的一種棋，屬于二人對(duì)抗性游戲的一種，在中國(guó)有著悠久的歷史。中國(guó)象棋是中國(guó)棋文化，也是中華民族的文化瑰寶，它源遠(yuǎn)流長(zhǎng)，趣味濃厚，基本規(guī)則簡(jiǎn)明易懂。中國(guó)象棋使用方形格狀棋盤，圓形棋子共有32個(gè)，紅黑二色各有16個(gè)棋子，擺放和活動(dòng)在交叉點(diǎn)上。雙方交替行棋，先把對(duì)方的將（帥）“將死”的一方獲勝。</p><h3><aname="hall">游戲大廳</a>>><ahref="#top">返回頂部</a></h3><p>  玩家選擇了棋牌類型以后，即可進(jìn)入游戲大廳，在游戲大廳中靜等3秒，即可進(jìn)入游戲登錄界面。游戲大廳風(fēng)格選用古式簡(jiǎn)約大方。之所以選擇古式簡(jiǎn)約風(fēng)，是因?yàn)槠迮祁惐揪驮从诠糯?lt;/p><imgsrc="img/1.jpg"alt=""width="500"><h3><aname="login">玩家登錄</a>>><ahref="#top">返回頂部</a></h3><p>  玩家初次登錄中國(guó)象棋游戲時(shí)，需注冊(cè)相關(guān)信息，包括用戶名、密碼等等信息，下次玩游戲時(shí)通過(guò)用戶名和密碼登錄游戲即可。</p><imgsrc="img/2.jpg"alt=""width="500"><h3><aname="room">進(jìn)入房間</a>>><ahref="#top">返回頂部</a></h3><p>  玩家玩游戲前，需要先進(jìn)入房間，而玩家房間是根據(jù)玩家選擇的游戲模式而創(chuàng)建的，其中人機(jī)匹配和隨機(jī)對(duì)弈是系統(tǒng)自動(dòng)創(chuàng)建的房間，而好友對(duì)戰(zhàn)則通過(guò)雙方其中一方創(chuàng)建房間，然后在邀請(qǐng)另一方，待另一方同意進(jìn)入房間后，方可開始游戲。</p><imgsrc="img/3.jpg"alt=""width="500"><h3><aname="play">棋手對(duì)弈</a>>><ahref="#top">返回頂部</a></h3><p>  棋手對(duì)弈模塊，主要分為三種對(duì)弈模式，分別是人機(jī)匹配、好友對(duì)戰(zhàn)和隨機(jī)對(duì)弈。人機(jī)匹配和隨機(jī)對(duì)弈是根據(jù)玩家的當(dāng)前水平（初級(jí)、中級(jí)、高級(jí)）匹配同等級(jí)的對(duì)手相互對(duì)弈。</p><imgsrc="img/4.jpg"alt=""width="500"></div></div>布局代碼任務(wù)描述任務(wù)分析任務(wù)實(shí)現(xiàn)CSS代碼/*頁(yè)面整體布局*/div{width:1000px;margin:0auto;text-align:center;}/*刪除超鏈接的下劃線*/a{text-decoration:none;}/*設(shè)置文字標(biāo)題和內(nèi)容的對(duì)齊方式以及位置*/.contp,.conth3{text-align:left;padding:0150px;}p{font-size:20px;}樣式代碼任務(wù)描述任務(wù)分析任務(wù)2定義超鏈接樣式任務(wù)描述本任務(wù)是制作一個(gè)商品秒殺活動(dòng)頁(yè)面，通過(guò)給展示的商品圖片添加超鏈接，當(dāng)點(diǎn)擊某張圖片時(shí)，彈出該商品的詳細(xì)介紹頁(yè)圖8-2-1：商品秒殺活動(dòng)頁(yè)面布局代碼樣式代碼任務(wù)分析實(shí)現(xiàn)思路1使用image標(biāo)簽添加4張圖片，并通過(guò)CSS設(shè)置其位置。2給每張圖片添加超鏈接，并設(shè)置其href屬性。靈活使用CSS設(shè)置超鏈接樣式布局代碼樣式代碼基本語(yǔ)法偽類選擇器設(shè)置超鏈接文本：a{屬性：屬性值}偽類選擇器描述a:link{屬性：屬性值}設(shè)置超鏈接的默認(rèn)樣式，也即正常瀏覽時(shí)的樣式a:visited{屬性：屬性值}設(shè)置超鏈接被點(diǎn)擊訪問(wèn)過(guò)后的樣式a:hover{屬性：屬性值}設(shè)置鼠標(biāo)劃過(guò)超鏈接時(shí)的樣式a:active{屬性：屬性值}設(shè)置超鏈接被點(diǎn)擊時(shí)，也即被激活時(shí)的樣式，如鼠標(biāo)單擊之后，到鼠標(biāo)被松開之間的這段時(shí)間的樣式基礎(chǔ)案例操作去除超鏈接自帶的下劃線，并設(shè)置超鏈接文本的字體顏色、大小等用法1.設(shè)置超鏈接基本樣式布局代碼如下：<body><div><ul><li><ahref="">點(diǎn)擊！鏈接到百度首頁(yè)</a></li><li><ahref="">點(diǎn)擊！鏈接到搜狗首頁(yè)</a></li><li><ahref="">點(diǎn)擊！鏈接到騰訊首頁(yè)</a></li></ul></div></body>CSS代碼如下：a{text-decoration:none;font-size:30px;color:orange;}基礎(chǔ)案例操作通過(guò)a:link、a:visited、a:hover、a:active4個(gè)偽類選擇器設(shè)置超鏈接在不同鏈接狀態(tài)下的樣式。用法2、設(shè)置不同鏈接狀態(tài)下的樣式布局代碼如下：<body><div><ul><li><ahref="">點(diǎn)擊！鏈接到百度首頁(yè)</a></li><li><ahref="">點(diǎn)擊！鏈接到搜狗首頁(yè)</a></li><li><ahref="">點(diǎn)擊！鏈接到騰訊首頁(yè)</a></li></ul></div></body>CSS代碼如下：a{text-decoration:none;font-size:30px;}a:link{color:blue;}a:hover{color:red;}a:visited{color:black;}基礎(chǔ)案例操作不僅可以給文本添加鏈接，還可以給圖片添加鏈接，當(dāng)點(diǎn)擊該圖片時(shí)，鏈接到目標(biāo)地址文件。用法3、設(shè)置圖像鏈接練一練任務(wù)實(shí)現(xiàn)布局代碼<div><h2>活動(dòng)秒殺</h2><!--添加圖片，并且為圖片添加超鏈接--><ahref="img/link1.png"><imgsrc="img/act11.png"alt=""></a><ahref="img/link2.png"><imgsrc="img/pic11.png"alt=""></a><ahref="img/link3.png"><imgsrc="img/computerArt11.png"alt=""></a><ahref="img/link4.png"><imgsrc="img/tel11.png"alt=""></a><palign="center">點(diǎn)擊商品，進(jìn)入商品詳情</p></div>任務(wù)描述任務(wù)分析任務(wù)實(shí)現(xiàn)/*頁(yè)面整體大小和位置*/div{width:1135px;margin:0auto;border:1pxsolidgray;}p{font-size:25px;}CSS樣式代碼任務(wù)描述任務(wù)分析任務(wù)3案例實(shí)現(xiàn)——幾何圖形的導(dǎo)航菜單任務(wù)描述結(jié)合列表，通過(guò)設(shè)置4種偽類樣式代碼，為文字的超鏈接添加好看的背景，使網(wǎng)頁(yè)看起來(lái)更具有

溫馨提示

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

評(píng)論

0/150

提交評(píng)論