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

实现的效果如下：

上面的效果主要利用了，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>

 

转载于:https://www.cnblogs.com/zhangbaowei/p/4748346.html