用到CSS樣式和HTML標(biāo)簽元素
為了對(duì)html不同標(biāo)簽加邊框虛線，我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。
1、html常用標(biāo)簽
p標(biāo)簽
span
ul li
table tr td
2、實(shí)例用到CSS屬性單詞
border
width
height
3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹
border為邊框?qū)傩?，如果要?shí)現(xiàn)對(duì)象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾?、邊框樣式（?shí)線還是虛線）
border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px，虛線，虛線為紅色。
4、實(shí)例描述
我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。
5、完整HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html邊框虛線演示 www.pcss5.com</title> <style> .bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注釋說(shuō)明：讓span形成塊*/ </style> </head> <body> <p class="bor">p盒子</p> <span class="bor">span盒子</span> <ul class="bor"> <li>ul li列表</li> <li>ul li列表</li> </ul> <table class="bor"> <tr> <td>表格</td> <td>表格2</td> </tr> <tr> <td>數(shù)據(jù)</td> <td>數(shù)據(jù)2</td> </tr> </table> </body> </html> 以上實(shí)例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式，包括相同邊框虛線。
6、瀏覽器效果截圖
html不同標(biāo)簽設(shè)置邊框虛線效果截圖
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試