首頁 > web前端 > html教學 > html設定虛線邊框的方法詳細介紹

html設定虛線邊框的方法詳細介紹

高洛峰
發布: 2017-03-03 16:34:56
原創
6422 人瀏覽過

用到CSS樣式和HTML標籤元素 為了對html不同標籤加邊框虛線,我們選擇幾個常用標籤對齊設定邊框虛線效果。

 1、html常用標籤 p標籤 span ul li table tr td 

2、實例用到CSS屬性單字 border width height 

3、實現虛線的CSS重點介紹 border為邊框屬性,如果要實

用到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程式碼:

<!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注释说明:让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>数据</td> 
<td>数据2</td> </tr> 
</table> </body> 
</html>
登入後複製

以上實例對html中不同標籤設定相同的樣式,包含相同邊框虛線。

6、瀏覽器效果截圖

html設定虛線邊框的方法詳細介紹

#html不同標籤設定邊框虛線效果截圖

更多html設定虛線邊框的方法詳細介紹相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板