html怎么把新闻列表放在右边,div+css实现简洁、清晰的新闻列表样式（浮动使日期靠右）...

不需要table,用div+css实现简洁、清晰的新闻列表样式，,适用于动态程序模版生成。

效果：no-table-news-list-style.html

html代码(注意:span一定要放在前面,反之会产生换行,span的右浮动会使它居右.)

2005年5月30日新闻标题01
2005年5月30日新闻标题02
2005年5月30日新闻标题03
2005年5月30日新闻标题04

css代码:

body{

font: 12px/18 Verdana;

}

#news{

width: 50%;

margin: 5px auto;

}

.list{

margin: 0px 10px 20px;

text-align: left;

}

.list ul{

list-style: none;

margin: 0px;

padding: 0px;

}

.list li{

/*列表底部的虚线*/

list-style: none;

width: 100%;

border-bottom: 1px dotted #CCC;

line-height: 21px;

height: 21px;

}

.list li a{

color: #777;

display: block;

padding: 0px 0px 0px 15px;

background: url(http://husw.net/blog/template/linstyle.1/images/bullet-orange.gif) no-repeat 0 2px;

/*列表左边的箭头图片*/

}

.list li span{

float: right;/*使span元素浮动到右面*/

text-align: right;/*日期右对齐*/

}

.list li a:hover{

color: #369;

background: url(http://husw.net/blog/template/linstyle.1/images/Square_green.gif) no-repeat 4px 8px;

}

浮动在布局的时候需要清除父容器浮动。

样例下载：

attachment.php?fid=219

最后编辑：我就是个世界编辑于June 22, 2012 15:54

html怎么把新闻列表放在右边,div+css实现简洁、清晰的新闻列表样式（浮动使日期靠右）...相关推荐

html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...
html中如何写新闻题目,DIV CSS布局短栏目与新闻标题列表布局模块代码
DIV CSS布局短栏目与新闻标题列表布局模块代码,在线演示与完整源代码下载,常见网页短栏目名称与新闻列表布局模板实例代码,模块CSS代码. css div模块新闻列表布局效果截图此局部DIV C ...
#python二维列表(有图有代码，简洁清晰明了！)
二维列表由于列表元素可以是列表,所以在python中也支持二维列表. 二维列表中的信息以行和列的形式表示,第一个下标代表元素所在的行,第二个下标代表元素所在的列. 在python中创建二维列表有以下 ...
html新闻排版制作代码,在DIV+CSS排版中新闻列表的制作方法_CSS/HTML
CSS代码:.list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px ...
html去掉无序列表前面的符号,css基础去除ul,li无序列表前面的符号
镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发. ----------------------------- ...
html不用css超链接去掉下划线,div css之去掉a超链接下划线样式
一.去掉字体下划线装饰CSS属性格式代码 text- 解释: CSS下划线格式单词:text- 不闪现下划线(去掉字体下划线花色):none 二.网页重构前初始化去掉超链接下划线由于有的浏览器默认情 ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML网页设计制作大作业（div+css)--(四大名著 5页 )
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | ...

html怎么把新闻列表放在右边,div+css实现简洁、清晰的新闻列表样式（浮动使日期靠右）...

html怎么把新闻列表放在右边,div+css实现简洁、清晰的新闻列表样式（浮动使日期靠右）...相关推荐

最新文章

热门文章