一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 样式布局

推荐专题

最新下载

热门教程

用DIV+CSS实现网页排版中新闻列表的制作方法

时间：2022-07-02 12:48:44 编辑：袖梨 来源：一聚教程网

CSS代码:

 代码如下 复制代码
.list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
background: url(/news/images/line.gif) repeat-x bottom;
/*列表底部的虚线*/
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 6px 0px 4px 15px;
background: url(/news/images/dot.gif) no-repeat 0 6px;
/*列表左边的箭头图片*/
}
.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
background: url(/news/images/dot2.gif) repeat-x bottom;
}

注意:span一定要放在前面,反之会产生换行
XHTML:

 代码如下 复制代码

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理