常见公告栏信息效果的实现
2015-08-21 16:53 怡红院丿无痕 阅读(1688) 评论(0) 编辑 收藏 举报实现的效果如下:
上面的效果主要利用了,ul,h3,li,span,在加一些Css来实现的。
要实现上面的公告栏的效果,代码如下:
第一种方案:利用 padding来解决 “关于XXXXXXXXX的公告通知” 的显示。
不推荐使用,应用span加relative定位来解决字体的定位,应为padding具有浏览器兼容问题
<div class="div_show"> <ul class="topic_show"> <h3><span>通知公告</span></h3> <li> 关于XXXXXXXXX的公告通知 </li> <li> 关于XXXXXXXXX的公告通知 </li> <li> 关于XXXXXXXXX的公告通知 </li> <li> 关于XXXXXXXXX的公告通知 </li> <li> 关于XXXXXXXXX的公告通知 </li> </ul> </div>
css的实现
<style type="text/css" media="screen"> /* 清除掉一些标签默认自带的 padding 和 margin*/ * { padding: 0px; margin: 0px; } /* 用于设置DIV的位置*/ .div_show { margin-left: 50px; margin-top: 50px; } /* 用于ul的款对,和显示的边框颜色,颜色为灰色 在此处只设置了,ul的宽度,没有设置高度 因为高度是随着li的变化而变化的 */ ul.topic_show { list-style: none; width: 249px; border: 1px solid #999; } /* 用于设置ul中标题大小,背景和颜色,以及字体大小 */ ul.topic_show h3 { height: 30px; width: 249px; background: #111155; color: #FFFFFF; font-size: 14px; } /* 利用span和position的relative来设置ul中标题中的字的位置 */ ul.topic_show h3 span { position: relative; left: 10px; top: 8px; } /* 利用padding来设置,li中字体的位置 */ ul.topic_show li { padding: 5px 20px; font-size: 12px; color: #555; background: url("point.jpg") no-repeat; background-position: 10px 7px; } </style>
第二种方案:利用 span来解决 “关于XXXXXXXXX的公告通知” 的显示,
推荐使用。
html代码
<div class="div_show"> <ul class="topic_show"> <h3><span>通知公告</span></h3> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> <li> <span>关于XXXXXXXXX的公告通知</span> </li> </ul> </div>
Css实现,利用span的实现
<style type="text/css" media="screen"> /* 清除掉一些标签默认自带的 padding 和 margin*/ * { padding: 0px; margin: 0px; } /* 用于设置DIV的位置*/ .div_show { margin-left: 50px; margin-top: 50px; } /* 用于ul的款对,和显示的边框颜色,颜色为灰色 在此处只设置了,ul的宽度,没有设置高度 因为高度是随着li的变化而变化的 */ ul.topic_show { list-style: none; width: 249px; border: 1px solid #999; } /* 用于设置ul中标题大小,背景和颜色,以及字体大小 */ ul.topic_show h3 { height: 30px; width: 249px; background: #111155; color: #FFFFFF; font-size: 14px; } /* 利用span和position的relative来设置ul中标题中的字的位置 */ ul.topic_show h3 span { position: relative; left: 10px; top: 8px; } /* li中字体通知内容,以及li大小和背景图片的设置 */ ul.topic_show li { font-size: 12px; height: 25px; color: #555; border: 1px solid red; background: url("point.jpg") no-repeat; background-position: 10px 7px; } /* 利用span和relative来解决,li中字体的位置 */ ul.topic_show li span { position: relative; left: 20px; top: 5px; } </style>