常见公告栏信息效果的实现

<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>

    <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>

<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>

<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>