用到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⑻" />
- <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不一样标识设定边框虚线实际效果截图