列表在网页中非常常见,例如新闻列表,还有导航。下面就分别所一下新闻列表的常见制作方式。

1. 新闻列表

列表示范

以下面这个 UL 做演示

<ul>
    <li><a href="#"><span>2014-4-1</span>武汉长乐未央教育</a></li>
    <li><a href="#"><span>2014-5-1</span>php教育培训专家</a></li>
    <li><a href="#"><span>2014-6-1</span>全程一对一授课</a></li>
    <li><a href="#"><span>2014-7-1</span>实战式项目培训</a></li>
</ul>

新闻列表,CSS 范例:

ul {
    /* 去掉列表前面的点号 */
    list-style-type:none;
    }
ul li {
    /* 宽度600px */
    width:600px;

    /* 行高24px */
    line-height:24px;
}
ul li a, ul li a:active {
    /* 内边距5px */
    padding:5px;

    /* 文字颜色灰色 */
    color:#888;

    /* 去掉超链接下划线 */
    text-decoration:none;

    /* 让超链接以块级元素的形式显示,这一行非常重要 */
    display:block;
}
ul li a:hover {
    /* 鼠标放上去是天蓝色 */
    color: #08c;
}
ul li a span{
    /* 让日期浮动到最右边,注意:span一定要在标题的左边,否则低版本IE不兼容 */
    float:right;
}

2. 导航条

导航示范

以下面这个 UL 做演示

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">php培训</a></li>
    <li><a href="#">php课程</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

导航条,CSS 范例:

ul {
    /* 去掉列表前面的点号 */
    list-style-type:none;
    }
ul li {
    /* 行高24px */
    line-height:24px;

    /* 设置li为左浮动,这样就成为横排的导航条了 */
    float:left;
}
ul li a, ul li a:active {
    /* 上下边距5px,左右内边距15px */
    padding:5px 15px;

    /* 文字颜色灰色 */
    color:#888;

    /* 去掉超链接下划线 */
    text-decoration:none;

    /* 让超链接以块级元素的形式显示,这一行非常重要 */
    display:block;
}
ul li a:hover {
    /* 鼠标放上去是天蓝色 */
    color: #08c;
}

已添加到收藏了