HTML-通知公告Tips
生活随笔
收集整理的這篇文章主要介紹了
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>效果圖(前、后)
轉載于:https://www.cnblogs.com/Kimoongee/p/6873183.html
總結
以上是生活随笔為你收集整理的HTML-通知公告Tips的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 视图与索引
- 下一篇： 2017年html5行业报告,云适配发布