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相关推荐

通知公告阅读日志构建说明
人都有个好奇心,有时候,我们发一个通知公告,往往想知道那些人看了. 其次,就是掌握了阅读人的记录,就能判断通知到没到位. 下图就是,构建好的窗体,请查看效果图: 想达到上面的效果,那么我们先得 ...
武汉大学计算机学院期末考试时间,【通知公告】关于2018-2019学年第二学期期末考试工作安排的通知...
原标题:[通知公告]关于2018-2019学年第二学期期末考试工作安排的通知关于2018-2019学年第二学期期末考试工作安排的通知各学院(系): 根据学校校历安排, 2019年6月9日至6月2 ...
哈师大计算机学院2016级新生,【通知公告】哈尔滨师范大学2016—2017学年度国家励志奖学金获奖学生初审名单公示...
原标题:[通知公告]哈尔滨师范大学2016-2017学年度国家励志奖学金获奖学生初审名单公示按照黑龙江省学生资助管理中心<关于上报2017年秋季高校奖学金评审等相关材料的通知>(黑教助中 ...
ASP.NET失物招领网站包含（寻物启事+感谢信+通知公告）c#开发
目录 1 .效果展示 2.开发工具 3.功能概述 4.数据表 5.关键代码 1 .效果展示 2.开发工具 Microsoft Visual Studio SQL Server Management S ...
计算机学院早操规定,通知公告|南京邮电大学早操管理规定（暂行）
原标题:通知公告|南京邮电大学早操管理规定(暂行) 为了进一步落实中央7号文件精神,培养学生良好的体育锻炼和生活习惯,现将进一步完善学生早操管理的有关规定如下,以确保学生早操的质量和效果. 1. 早操 ...
RDIFramework.NET WinForm版新增通知公告、系统新闻模块
1.系统新闻功能描述系统新闻模块,用户可以根据实际情况做相应应用,如用在内部业务系统的展示中或网站上新闻的展示.新闻可以分类进行管理,非常的实用.系统新闻管理主要分为添加.修改.删除与移动系统新闻. ...
武汉大学计算机2017博士录取,通知公告 | 2017年博士拟录取名单公示及相关说明...
原标题:通知公告 | 2017年博士拟录取名单公示及相关说明 2017年博士拟录取名单公示及相关说明 1.录取类别为非定向的考生请于6月12日18:00前将3000元押金以定活两便存单(任一家银行都 ...
哈尔滨计算机省一级考试时间,【通知公告】2017年上半年省计算机等级考试哈尔滨师范大学考点报名通知...
原标题:[通知公告]2017年上半年省计算机等级考试哈尔滨师范大学考点报名通知各位考生: 根据省招考院[2017]21号文件精神,哈尔滨师范大学考点报名说明如下: 1.考试介绍全国高等学校计算机等 ...
一步一步做项目（8）用例描述管理通知公告（ManagePublicNotice）
一步一步做项目(8)用例描述管理通知公告(ManagePublicNotice) 在前面一步一步做项目(1)软件需求的基础上继续. 这里对具有增删改查功能的用例进行用例描述,使用用例描述模板,具体示例 ...

HTML-通知公告Tips

HTML-通知公告Tips相关推荐

最新文章

热门文章