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>

效果图(前、后)

posted on 2017-05-18 14:28  坏人站住  阅读(474)  评论(0)  编辑  收藏  举报

导航