欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識學(xué)堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時手機:13896886023
  • ·QQ 咨 詢：361652718 513960520
當(dāng)前位置 > 首頁 > 知識學(xué)堂 > 網(wǎng)站建設(shè)知識
CSS學(xué)習(xí)教程:制作網(wǎng)頁中的虛線
更新時間：2012-05-20 | 發(fā)布人：本站 | 點擊率：650 次

1、CSS邊框虛線

這里通過邊框?qū)傩缘奶摼�邊框border控制虛線。以下設(shè)置的css 高度(css height)和css 寬度（css width）為350像素是為了便于觀看演示 其它意思。
一、四邊為虛線邊框
border:1px dashed #000; 黑色虛線邊框
實例：
CSS代碼： .webjx{border:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="webjx">我的四邊為黑色虛線邊框</div>
這里設(shè)置邊框縮寫方式定義webjx選擇器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
CSS代碼： .webjx-1{border-left:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="webjx-1">我的左邊為黑色虛線邊框</div>
這里設(shè)置了左邊一邊為黑色虛線邊框

三、右邊為虛線：
CSS代碼： .webjx-2{border-right:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="webjx-2">我的右邊為黑色虛線邊框</div>
這里設(shè)置了右邊一邊為黑色虛線邊框

四、頂部邊（上邊）為虛線：
CSS代碼： .webjx-3{border-top:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="webjx-3">我的上邊為黑色虛線邊框</div>
這里設(shè)置了頂邊（上邊線）一邊為黑色虛線邊框

五、底部邊（下邊）為虛線：
CSS代碼： .webjx-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼： <div class="webjx-4">我的下邊為黑色虛線邊框</div>
這里設(shè)置了底邊（下邊線）一邊為黑色虛線邊框

六、任意一邊不為虛線，其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框
CSS代碼： .webjx-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代碼： <div class="webjx-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>
這里通過先設(shè)置了該對象四邊為黑色1px虛線邊框，緊接著又設(shè)置一邊邊線為0的設(shè)置，這樣相當(dāng)于設(shè)置了3邊的邊框虛線屬性，但是這里注意邊框?qū)傩栽O(shè)置前后順序。

以上實例完整DIV+CSS代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虛線 webjx實例說明www.webjx.com</title>
<style>
.webjx{ border:1px dashed #000; height:50px; width:350px}
.webjx-1{border-left:1px dashed #000; height:50px;width:350px}
.webjx-2{border-right:1px dashed #000; height:50px;width:350px}
.webjx-3{border-top:1px dashed #000; height:50px;width:350px}
.webjx-4{border-bottom:1px dashed #000; height:50px;width:350px}
.webjx-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.webjx.com實例 */
</style>
</head>
<body>
www.webjx.com css虛線實例實例<br>
<div class="webjx">我四邊為虛線邊框</div><br>
<div class="webjx-1">我的左邊為黑色虛線邊框</div><br>
<div class="webjx-2">我的右邊為黑色虛線邊框</div><br>
<div class="webjx-3">我的上邊為黑色虛線邊框</div><br>
<div class="webjx-4">我的下邊為黑色虛線邊框</div><br>
<div class="webjx-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框?qū)嵗?lt;/div>
</body>
</html>

 

以上演示各種顏色的虛線邊框

2、超鏈接虛線下劃線

我們常常會設(shè)置被鏈接的文字內(nèi)容要么帶鏈接有虛線的下劃線，或鼠標(biāo)移動到有鏈接的文字上出現(xiàn)虛線下劃線，這個怎么實現(xiàn)的呢，這里為大家介紹關(guān)于CSS超鏈接的虛線下劃線。

一、帶鏈接文字有虛線下劃線
這里也是通過CSS border邊框?qū)傩詠砜刂瞥溄觓對象的CSS樣式。

演示CSS代碼：
a{ border-bottom:1px dashed #111;}/* 這里設(shè)置帶鏈接文字下方出現(xiàn)虛線下劃線*/
a:hover{ border:0;}/* 這里設(shè)置鼠標(biāo)經(jīng)過被鏈接文字時不出現(xiàn)虛線 */

完整DIV CSS代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虛線下劃線 webjx實例說明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>

<body>
歡迎到<a >CSS教程網(wǎng)</a>的www.webjx.com - webjx學(xué)習(xí)CSS
</body>
</html>


 

說明：text-decoration:none;這個是去掉CSS 下劃線（超鏈接默認(rèn)自帶的下劃線屬性）

二、鼠標(biāo)放到帶鏈接文字上時出現(xiàn)虛線下劃線
這個和上面的很相似，只需對超鏈接 A去掉下劃線，對鼠標(biāo)經(jīng)過時CSS文字下方帶虛線邊框下劃線即可。
對應(yīng)CSS代碼：
a{text-decoration:none;}
a:hover{border-bottom:1px dashed #111;}
這樣就實現(xiàn)，大家不妨試試超鏈接下劃線實例。

3、列表型CSS虛線下劃線

常常他們碰到CSS LI的時候希望此CSS 列表樣式每排內(nèi)容下方為虛線分割開

這里我們只需對LI設(shè)置底部邊框為虛線邊框即可。
首先我們是在對CSS初始化情況下設(shè)置CSS代碼：
li{border-bottom:1px dashed #111;}即可實現(xiàn)li的列表型內(nèi)容如上圖虛線隔開效果（每個li內(nèi)容底部為虛線邊框）
還有我們常常碰見li的底部虛線很小就如一個點那么小，而border就很難實現(xiàn)了，這個時候我們需要一張?zhí)摼�的點圖片即可(一邊高1像素寬3像素的1像素顏色圖片即可實現(xiàn))
對應(yīng)CSS li代碼：
Li{background:url(點圖片路徑) repeat-x 0 bottom}
這里不再詳細(xì)演示我們在VIP也為大家詳細(xì)介紹和演示制作各種li的CSS知識點。

4、CSS定義一條水平虛線

這個很好理解同樣可以使用對div對象設(shè)置邊框虛線即可實現(xiàn)同時也可以對hr水平線標(biāo)簽設(shè)置虛線屬性即可實現(xiàn)水平虛線分割線。

這里帶過即可如下：
對div設(shè)置水平虛線線：
.webjx{ height:1px; width:100%; border-bottom:1px dashed #000;}
對應(yīng)HTML代碼：
<div class="webjx"></div>

對hr水平分割線設(shè)置屬性：
第一種，hr標(biāo)簽內(nèi)設(shè)置虛線屬性：
<hr size=1 style="color: blue;border-style:dashed ;width:100%">

這里說明的是size為hr的值，一邊設(shè)置為1即可。

第二種在css代碼或CSS文件中定義hr的css屬性
hr {border-top:1px dashed #00F ; }
對應(yīng)html內(nèi)hr標(biāo)題代碼：
<hr size=1>
這里是對hr設(shè)置邊框為頂部或底部上下邊任意一條邊為1像素的藍(lán)色虛線邊框，同時設(shè)置hr的size為1，和第一種值大致相同，唯一區(qū)別在于當(dāng)在html中出現(xiàn)了hr標(biāo)簽，hr標(biāo)簽屬性就為css設(shè)置，如果網(wǎng)頁多次出現(xiàn)可以減少代碼量。

以上所有的CSS虛線涉及了css borer、CSS 下劃線、CSS 背景等知識，希望大家能掌握各種方法設(shè)置DIV虛線、虛線邊框、DIV CSS虛線下劃線的方法。

相關(guān)文章