Home > Article > Web Front-end > How to set dotted border in html_HTML/Xhtml_Web page production
How to set dotted border in html_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:38:023066browse
Using 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 introduction to 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 effects for the above labels.
5. Complete HTML code:
<ol class="dp-xml">
<li class="alt"><!DOCTYPE html> <html> </li>
<li class="alt"><head> <meta charset="utf-8" /> </li>
<li class="alt"><title>html边框虚线演示 www.pcss5.com</title> <style> </li>
<li class="alt">.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ </li>
<li class="alt"></style> </head> </li>
<li class="alt"><body> <p class="bor">p盒子</p> </li>
<li class="alt"><span class="bor">span盒子</span> <ul class="bor"> </li>
<li class="alt"><li>ul li列表</li> <li>ul li列表</li> </li>
<li class="alt"></ul> <table class="bor"> </li>
<li class="alt"><tr> <td>表格</td> </li>
<li class="alt"><td>表格2</td> </tr> </li>
<li class="alt"><tr> <td>数据</td> </li>
<li class="alt"><td>数据2</td> </tr> </li>
<li class="alt"></table> </body> </li>
<li class="alt"></html> </li>
</ol>
The above example sets the same style for different tags in html, including the same border dotted line.
6. Browser screenshots
Screenshots of html dotted border effects for different tags