HTML-通知公告Tips
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>通知公告Tips</title> 6 <style> 7 ul,li,h6{margin:0;padding:0;list-style-type: none;} 8 ul{ 9 width:335px; 10 margin:0 auto; 11 border:1px solid #666; 12 } 13 li{ 14 text-align: center; 15 line-height:40px; 16 } 17 a{ 18 display: block; /*因为我们要限制a标签长度,所以要display: block;*/ 19 margin: 0 auto; 20 width:240px; /*这里给a标签设置宽度,表示文本的长度*/ 21 text-decoration: none; 22 overflow:hidden; /*超出文本的范围就隐藏*/ 23 white-space: nowrap; /*超出文本的范围不换行*/ 24 text-overflow: ellipsis;/*在文本的范围内,末尾以"..."的形式展示*/ 25 border-bottom: 1px dashed #F26E01; 26 } 27 h6{ 28 width:100%; 29 height:3px; 30 background:#fff; /* 颜色应该和背景颜色一致*/ 31 margin-top:-2px; /*为了遮住最下边的虚线*/ 32 } 33 </style> 34 </head> 35 <body> 36 <ul> 37 <li><a href="#">深圳某公司PHP技术总监介绍费800元</a></li> 38 <li><a href="#">深圳某公司PHP技术总监介绍费800元</a></li> 39 <li><a href="#">深圳某公司PHP技术总监介绍费800元</a></li> 40 <li><a href="#">深圳某公司PHP技术总监介绍费800元</a></li> 41 <li><a href="#">深圳某公司PHP技术总监介绍费800元</a></li> 42 <h6><!--此行代码为了隐藏最下边的虚线--></h6> 43 </ul> 44 </body> 45 </html>
效果图(前、后)