DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> html設置虛線邊框的方法
html設置虛線邊框的方法
編輯:HTML和Xhtml     

用到CSS樣式和HTML標簽元素

為了對html不同標簽加邊框虛線,我們選擇幾個常用標簽對齊設置邊框虛線效果。

1、html常用標簽

p標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現虛線的CSS重點介紹

border為邊框屬性,如果要實現對象邊框效果,要設置邊框寬度、邊框顏色、邊框樣式(實線還是虛線)

border:1px dashed #F00 這個就是設置邊框樣式寬度為1px,虛線,虛線為紅色。

4、實例描述

我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。

5、完整HTML代碼:

  1. <!DOCTYPE html> <html> 
  2. <head> <meta charset="utf-8" /> 
  3. <title>html邊框虛線演示 www.pcss5.com</title> <style> 
  4. .bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注釋說明:讓span形成塊*/ 
  5. </style> </head> 
  6. <body> <p class="bor">p盒子</p> 
  7. <span class="bor">span盒子</span> <ul class="bor"> 
  8. <li>ul li列表</li> <li>ul li列表</li> 
  9. </ul> <table class="bor"> 
  10. <tr> <td>表格</td> 
  11. <td>表格2</td> </tr> 
  12. <tr> <td>數據</td> 
  13. <td>數據2</td> </tr> 
  14. </table> </body> 
  15. </html> 

以上實例對html中不同標簽設置相同的樣式,包括相同邊框虛線。

6、浏覽器效果截圖

html不同標簽設置邊框虛線效果截圖

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved