您現在的位置: 网站首頁 / 網站建設 / 正文

超鏈接僞類-Web標准(div+css)教程

作者: admin 发布: 2015-1-26 22:40:11 分类: 網站建設 閱讀: 次 查看評論

  今天我們開始學習《十天學會web標准(div+css)》超鏈接僞類,包含以下內容和知識點:

  一、鏈接的四種樣式

  二、將鏈接轉換爲塊狀

  三、用css制作按鈕

  四、首字下沈

  一、超鏈接的四種樣式

  本來計劃這節課放到第九章中講解,但下邊的章節都涉及到了,所以提前來學習一下,上節課講解的內容比較多,這節課就少講些,只要理解了僞類,就輕松多了。

  超鏈接可以說是網頁發展史上一個偉大的發明,它使得許多頁面相互鏈接從而構成一個網站。說到超鏈接,它涉及到一個新的概念:僞類,我們先看下超鏈接的四種樣式:

  a:link {color: #FF0000} /* 未访问的链接 */

  a:visited {color: #00FF00} /* 已访问的链接 */

  a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

  a:active {color: #0000FF} /* 选定的链接 */

  以上分別定義了超鏈接未訪問時的鏈接樣式,已訪問的鏈接樣式,鼠標移上時鏈接樣式和選定的鏈接樣式。之所以稱之爲僞類,也就是說它不是一個真實的類,正常的類是以點開始,後邊跟一個名稱,而它是以a開始後邊跟個冒號,再跟個狀態限定字符;比如第三個a:hover的樣式,只有當鼠標移動到該鏈接上時它才生效,而a:visited只對已訪問過的鏈接生效。僞類使得用戶體驗大大提高,比如我們可以設置鼠標移上時改變顔色或下劃線等屬性來告知用戶這個是可以點擊的,設置已訪問過的鏈接的顔色變灰暗或加刪除線告知用戶這個鏈接的內容已訪問過了。

  下面來做一個默認狀態下是藍色,鼠標放上是紅色加下劃線,選定(按下)時爲紫色,已訪問過爲灰色加刪除線的實例來講解一下。首先插入兩個帶超鏈接的內容:

  <p><a href="#">这里是链接</a></p>

  <p><a href="10.html">这里也是链接</a></p>

  

  從上圖中可以看出,插入的超鏈接默認是藍色來下劃線的,這是標簽的默認樣式所致,下來我們在css樣式中定義

  

  

  

  设置完a:link的样式后,下面分别设置a:visited ,a:hover ,a:active的样式

  

  

  

  生成的源代碼如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  a:link { color: #06F; text-decoration: none; }

  a:visited { color: #999; text-decoration: line-through; }

  a:hover { color: #F00; text-decoration: underline; }

  a:active { color: #F0F; }

  </style>

  </head>

  <body>

  <p><a href="#">这里是链接</a></p>

  <p><a href="10.html">这里也是链接</a></p>

  </body>

  </html>

  注意:四種狀態的順序一定不能顛倒,否則有些不生效

  二、將鏈接轉換爲塊級元素

  鏈接在默認狀態下是內聯元素,轉換爲塊級元素後可以獲得更大的點擊區域,可以設置寬度和高度,將鏈接轉換爲塊狀,只需增加一個display:block的css屬性即可。

  

  

  

  

  

  a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

  这样设置的结果是全局a都执行这个样式显示,下面设置一下鼠标划过时 的状态,其它几种状态设置方法相同

  

  

  

  代碼如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

  a:hover { color: #FFF; text-decoration: none; background: #333; }

  </style>

  </head>

  <body>

  <p><a href="#">这里是链接</a></p>

  <p><a href="10.html">这里也是链接</a></p>

  </body>

  </html>

  三、用css制作按鈕

  学会了把超链接转换为块级元素,想制作个css按钮简直太简单了,只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首頁的免费注册按钮来讲解,设置最常用的默认样式和鼠标移上时的样式,如下图

  

  首先需要准備默認狀態和鼠標劃過狀態的圖片如下:

  

  

  修改之前的html如下,然後重新定義css樣式:

  <p><a href="#">免费注册</a></p>

  

  

  

  

  代碼如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(?upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }

  a:hover { background: url(?upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

  </style>

  </head>

  <body>

  <p><a href="#">免费注册</a></p>

  </body>

  </html>

  本例中運用到了背景圖片,有關背景圖片的詳細運用將在下一節中講解

  四、首字下沈

  首字下沈是css僞類上的又一個運用,它可以直接通過css樣式表向某個選擇器中的文本首字母添加特殊的樣式,而不需要把首字添加一個標簽或通過程序來實現,今天以制作word裏的首字下沈爲例來講解,應用如下僞元素:

  :first-letter

  在頁面中添加如下一段內容,只用設置樣式就可以實現首字下沈了:

  <p>標准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標准,DIV+CSS布局入門教程,網頁布局實例,css布局實例,div+css模板,div+css實例解析,網站重構,網頁代碼,水晶圖標,幻燈廣告圖片.教程適合初學者循序漸進學習!</p>

  爲了便于觀察效果,我們設置p的樣式如下:

  p { width: 400px; line-height: 1.5; font-size: 14px; }

  然後設置p:first-letter的樣式

  

  

  

  代碼如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  p { width: 400px; line-height: 1.5; font-size: 14px; }

  p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

  </style>

  </head>

  <body>

  <p>標准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS視頻教程,web2.0標准,DIV+CSS布局入門教程,網頁布局實例,css布局實例,div+css模板,div+css實例解析,網站重構,網頁代碼,水晶圖標,幻燈廣告圖片.教程適合初學者循序漸進學習!</p>

  </body>

  </html>

  文章出处:标准之路 编辑:杨雨晨思

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表