在DIV+CSS排版中新闻列表的制作方法

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一定要放在前面,反之会产生换行

<ul class="list">
<li><span>2005年5月30日 </span><a href="#">新闻标题01</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题02</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题03</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题04</a></li>
</ul>

(0)

相关推荐

  • JS实现列表的响应式排版(推荐)

    先给大家展示下效果图,如果感觉还不错,请参考实现代码. 一.每行固定个数:保证排版的美观 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; } 二.随页面宽度调整个数和大小:保证图文的可读性 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; } 1.媒体查询控制宽度

  • 经典Javascript正则表达式[优质排版]

    匹配中文字符的正则表达式: 复制代码 代码如下: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内): 复制代码 代码如下: [^\x00-\xff] 应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 复制代码 代码如下: String.prototype.len=function(){ return this.replace([^\x00-\xff]/g,"aa").length; } 匹配空行的正则表达式: 复制代码 代码如下: \n[\s|]*\r

  • 在DIV+CSS排版中新闻列表的制作方法

    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: b

  • div+css排版的样例

    div+css排版的样例 Div布局 body{text-align:center;margin:0;padding:0} /*text-align:center是ie中必须要有的*/ div { height:200px; color:red; } .title { margin:0 auto; width:776px; background-color:#abcdef; } .middle { margin:0 auto; width:776px; } .left { float:left;

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • python中对二维列表中一维列表的调用方法

    python调用二维列表中的一维列表的方法: 访问二维列表中的一维列表可以用下标法"列表名(数字)"的方式获取到一维列表所有元素 x = [[23, 25, 15, 69, 48], [53, 98, 87, 478, 365], [231, 55, 653, 589, 545, 123]] print(x[0]) 执行结果: 内容扩展: 二维列表转一维列表 from compiler.ast import flatten a=[[1,2],[5,6]] print(flatten(a

  • Python中list列表的赋值方法及遇到问题处理

    目录 1.列表list赋值方法 2.浅拷贝(shallowcopy) 3.深拷贝 4.关于拷贝操作的提醒 问题起源: 本文的原因是因为在使用list的直接赋值b=a时,得到的结果与预期不同,后来才发现直接使用等于号=对列表进行赋值会产生一系列的问题,于是将赋值.浅拷贝.深拷贝三者之间的区别进行记录. 1.列表list赋值方法 在python中,对象的赋值就是简单的对象引用,这点和C++是不同的, 如下例子所示: a = ['a', 'b', 'c'] b = a   # 采用简单的=赋值 pri

  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags

    做DIV+CSS页面,不推荐使用的标签代码,请尽量不要使用这些HTML标签: Do not use these html elements in html pages.  Presentational elements should not be used.  Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentationa

  • Python中的列表条件求和方法

    目录 列表条件求和方法 利用列表求和函数(可接收无数个参数求和) 列表条件求和方法 list_data=[ [1.0, '配件', '522422', '铝扣板用纽扣', '金色', '', 72.0, 'PC', ''], [2.0, '配件', '500031', '十字槽沉头自钻自攻螺钉4.2*45', '原色', '', 72.0, 'PC', ''], [1.0, '配件', '522422', '铝扣板用纽扣', '原色', '', 24.0, 'PC', ''], [2.0, '配

  • DIV和CSS排版中制作细线条的方法小结

    今天制作div的高度控制的时候发现IE下控制div的高度很小的时候无效,特意查了一下相关文章. 最终有了解决方案,参考下面文章: 如果要制作一条高度小于12PX(大约)的线条,在IE中会显示出高于实际高度的,看下面. 复制代码 代码如下: <style>  .line{  background: #CCCCCC;  height: 6px;  }</style>  <div class="line"></div> 可看出实际高度大于6PX

  • 在Python中处理列表之reverse()方法的使用教程

    reverse()方法代替逆转列表对象. 语法 以下是reverse()方法的语法: list.reverse() 参数 NA 返回值 此方法不返回任何值,但反转列表中的给定对象. 例子 下面的例子显示了reverse()方法的使用. #!/usr/bin/python aList = [136, 'xyz', 'zara', 'abc', 'xyz','hema']; aList.reverse(); print "List : ", aList; 当我们运行上面的程序,它会产生以下

  • JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

随机推荐