Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 div css網頁布局中下劃線text-decoration使用教程

div css網頁布局中下劃線text-decoration使用教程

發布時間:2020-05-07   編輯:www.4271936.live
jquery中文網為您提供div css網頁布局中下劃線text-decoration使用教程等資源,歡迎您收藏本站,我們將為您提供最新的div css網頁布局中下劃線text-decoration使用教程資源
在css div網頁制作中,下劃線的可能在a超鏈接中使用最常見,現在我們來學習一下如何更友好的設置下劃線text-decoration。

常見和常用的下劃線樣式

1、文字帶下劃線的方式顯示

使用html中<u>標簽即可對加u標簽的文字加下劃線
 
但是注意的時候u標簽是以<u>開始</u>結束的一對標簽,<u>我是被加下劃線的</u>

2、超鏈接文字下劃線-css 超鏈接詳細介紹

我們常常需要讓帶超鏈接的文字,以有下劃線方式顯示,而鼠標放上去下劃線不顯示方式顯示帶鏈接的文字,接下來我們通過css對超鏈接下劃線設置
使用代碼text-decoration,可進css手冊查看text-decoration詳細介紹
語法:
text-decoration : none || underline || blink || overline || line-through

text-decoration參數:
none :  無裝飾
blink :  閃爍
underline :  下劃線
line-through :  貫穿線
overline :  上劃線
實例
 

根據圖例看出“div css”被加入css鏈接,同時在css樣式也設置了css屬性a被加下劃線(a{ text-decoration:underline;}),但鼠標放上去(a:hover{ text-decoration:none;})下劃線則被去掉的

3、對超鏈接文字鼠標放上去出現下劃線

根據第二點(2、超鏈接文字下劃線)中通過css來讓超鏈接文字帶下劃線,鼠標放上去則去掉下劃線來說,第三點則是剛好與第二點向反,超鏈接自然不顯示下劃線a{ text-decoration:none;},而鼠標放上去出現下劃線a:hover{ text-decoration:underline;}。

4、對某區域鼠標放上去出現下劃線-對象下劃線
 
這個在我們普遍使用,我們可以對其div設置一個class樣式(id與class區別)如:.ys:hover{ text-decoration:underline; cursor:pointer;}, 解釋cursor這個是鼠標標簽(cursor介紹),pointer這個是手指形式顯示。
 
html源代碼,頁面源文件
通過這樣對“ys”設置了css樣式,則在瀏覽器中當鼠標放到文字上時就會出現下劃線,而這里不是因為有超鏈接才有下劃線,同超鏈接原理相同。

您可能感興趣的文章:
使用JQUERY進行后臺頁面布局控制DIV實現左右式
瀑布流布局并自動加載實現代碼
jQuery實現切換頁面布局使用介紹
jQuery建立一個按字母順序排列的友好頁面索引(兼容IE6/7/8)
jQuery布局插件UI Layout簡介及使用方法
2012年開發人員的16款新鮮的jquery插件體驗分享
電商網站怎么規劃好網站內部鏈接詳解
jQuery實現等比例縮放大圖片讓大圖片自適應頁面布局
如何設計網站結構與地址URL?
jQuery UI 應用不同Theme的辦法

[關閉]
微信下载APP完成任务如何赚钱 私募资产配置基金 广东省快乐十分预测网 股票融资融券什么意思多少钱 股票网有哪些 北京pk10最好预测软件 安徽11选5号码推荐 中国a股最大的股票 快3app安卓版客户端 股票开户在线开户 3d之家开机号码查询