Home >Web Front-end >HTML Tutorial >Detailed introduction to the method of setting dotted border in html

Detailed introduction to the method of setting dotted border in html

高洛峰
高洛峰Original
2017-03-03 16:34:566440browse

Use CSS styles and HTML tag elements In order to add dotted borders to different HTML tags, we select several common tags to align and set the dotted border effect.

1. Commonly used tags in html p tag span ulli table tr td

2. The example uses CSS attribute words border width height

3. Key introduction to CSS for realizing dotted lines border is the border attribute. If you want to implement

use CSS styles and HTML tag elements

In order to add dotted borders to different html tags, we select several common tags to align and set the dotted border effect.

1. Common html tags

p tag

span

ul li

table tr td

2. The example uses CSS attribute words

border

width

height

3 , Key points of CSS for realizing dotted lines

border is the border attribute. 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 the dotted line is red.

4. Example description

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

5. Complete HTML code:

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

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

6. Screenshot of browser effect

Detailed introduction to the method of setting dotted border in html

htmlScreenshot of different label setting border dotted line effect

More html For a detailed introduction to the method of setting a dotted border, please pay attention to the PHP Chinese website for related articles!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn