Home >Web Front-end >JS Tutorial >Implementation steps of html border dotted line

Implementation steps of html border dotted line

php中世界最好的语言Original: 2017-12-02 10:21:375948browse

In HTML, you can add borders or dotted borders to most tags. So this time we will add dotted border effect styles to several different tags. We can flexibly grasp and apply the concept of dotted borders based on the following cases.

htmlCommon tags

div标签
span
ul li
table tr td

Instances using CSSAttributesWords

border
width
height

Key introduction to CSS for dotted lines

border is the border Properties, if you want to achieve the object border effect, you need to set the border width, border color, and border style (solid or dotted line)

border:1px dashed #F00 This is to set the border style width to 1px, dotted line, and dashed line to red.

Example description

We set the same width, same height, and border effect for the above labels.

Complete HTML code:

<!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>

The above example sets the same style for different tags in html, including the same border dotted line.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Implementation steps of html border dotted line

Related articles