以下面这个UL做演示
<ul>
<li><a href="#"><span>2014-4-1</span>教育</a></li>
<li><a href="#"><span>2014-5-1</span>专家</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;
}
导航条
以下面这个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;
}