实现的效果如下：
上面的效果主要利用了，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>