首頁 > web前端 > js教程 > html 邊框虛線的實作步驟

html 邊框虛線的實作步驟

php中世界最好的语言
發布: 2017-12-02 10:21:37
原創
5833 人瀏覽過

在HTML裡可以對大部分的標籤增加邊框或虛線邊框,那麼這次我們就給幾個不同的標籤加虛線邊框效果樣式,我們可以根據以下案例來靈活掌握和應用虛線邊框這個概念。

html常用標籤

div标签
span
ul li
table tr td
登入後複製

實例用到CSS屬性單字

border
width
height
登入後複製

實作虛線的CSS重點介紹

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

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

實例描述

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

完整HTML程式碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html边框虚线演示</title> 
<style> 
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} 
span{display:block}/*css注释说明:让span形成块*/ 
</style> 
</head> 
<body> 
<div class="bor">div盒子</div> 
<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中不同標籤設定相同的樣式,包含相同邊框虛線。


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

Css3製作動態開關的效果的實作步驟

CSS的虛線樣式怎麼實作

用CSS3優化HTML5表單的步奏

#

以上是html 邊框虛線的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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