<menu id="0eekc"></menu>
<menu id="0eekc"></menu>
  • <menu id="0eekc"></menu>
  • <menu id="0eekc"><tt id="0eekc"></tt></menu>
  • <xmp id="0eekc">
    歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

    DIV CSS虛線教程篇包括講解常常出現的各種樣式的DIV虛線案例CSS教程。

    本節為大家介紹常見的CSS 虛線及DIV教程。CSS虛線下劃線、列表虛線統統搞定。

    目錄
    1. CSS虛線邊框
    2. CSS超鏈接虛線下劃線
    3. 列表型CSS虛線下劃線
    4. CSS定義一條水平虛線

    1、CSS邊框虛線   -   TOP

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

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

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

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

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

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

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

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

     

    以上演示各種顏色的虛線邊框,如想更加詳細了解CSS border(CSS 邊框)可進入:http://www.yfzzdoors.com/rumen/r120.shtml

    2、超鏈接虛線下劃線   -   TOP

    我們常常會設置被鏈接的文字內容要么帶鏈接有虛線的下劃線,或鼠標移動到有鏈接的文字上出現虛線下劃線,這個怎么實現的呢,這里為大家介紹關于CSS超鏈接的虛線下劃線。

    一、帶鏈接文字有虛線下劃線
    這里也是通過CSS border邊框屬性來控制超鏈接a對象的CSS樣式。

    演示CSS代碼:
    a{ border-bottom:1px dashed #111;}/* 這里設置帶鏈接文字下方出現虛線下劃線*/
    a:hover{ border:0;}/* 這里設置鼠標經過被鏈接文字時不出現虛線 */

    完整DIV CSS代碼:

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

    <body>
    歡迎到<a href="http://www.yfzzdoors.com/">CSS教程網</a>的www.yfzzdoors.com - divcss5學習CSS
    </body>
    </html> 


     

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

    CSS虛線下劃線實例展示圖
    以上為有CSS超鏈接文字帶虛線下劃線。

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

    3、列表型CSS虛線下劃線   -   TOP

    常常他們碰到CSS LI的時候希望此CSS 列表樣式每排內容下方為虛線分割開如下圖
     CSS虛線列表型樣式圖
    這里我們只需對LI設置底部邊框為虛線邊框即可。
    首先我們是在對CSS初始化情況下設置CSS代碼:
    li{border-bottom:1px dashed #111;}即可實現li的列表型內容如上圖虛線隔開效果(每個li內容底部為虛線邊框)
    還有我們常常碰見li的底部虛線很小就如一個點那么小,而border就很難實現了,這個時候我們需要一張虛線的點圖片即可(一邊高1像素寬3像素的1像素顏色圖片即可實現)
    對應CSS li代碼:
    Li{background:url(點圖片路徑) repeat-x 0 bottom}
    這里不再詳細演示我們在VIP也為大家詳細介紹和演示制作各種li的CSS知識點。

    4、CSS定義一條水平虛線   -   TOP

    這個很好理解同樣可以使用對div對象設置邊框虛線即可實現同時也可以對hr水平線標簽設置虛線屬性即可實現水平虛線分割線。

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

    對hr水平分割線設置屬性:
    第一種,hr標簽內設置虛線屬性:
    <hr size=1 style="color: blue;border-style:dashed ;width:100%">
     DIV+CSS水平分割虛線樣式圖
    這里說明的是size為hr的值,一邊設置為1即可。

    第二種在css代碼或CSS文件中定義hr的css屬性
    hr {border-top:1px dashed #00F ; }
    對應html內hr標題代碼:
    <hr size=1>
    這里是對hr設置邊框為頂部或底部上下邊任意一條邊為1像素的藍色虛線邊框,同時設置hr的size為1,和第一種值大致相同,唯一區別在于當在html中出現了hr標簽,hr標簽屬性就為css設置,如果網頁多次出現可以減少代碼量。

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

    如需轉載,請注明文章出處和來源網址:http://www.yfzzdoors.com/shili/s296.shtml

    欧美巨大XXXX做受l
    <menu id="0eekc"></menu>
    <menu id="0eekc"></menu>
  • <menu id="0eekc"></menu>
  • <menu id="0eekc"><tt id="0eekc"></tt></menu>
  • <xmp id="0eekc">