在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>
相关推荐
-
经典Javascript正则表达式[优质排版]
匹配中文字符的正则表达式: 复制代码 代码如下: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内): 复制代码 代码如下: [^\x00-\xff] 应用:计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 复制代码 代码如下: String.prototype.len=function(){ return this.replace([^\x00-\xff]/g,"aa").length; } 匹配空行的正则表达式: 复制代码 代码如下: \n[\s|]*\r
-
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.媒体查询控制宽度
-
在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
随机推荐
- Mac入门使用brew安装软件
- window8.1下FTP服务器安装配置图文教程
- HTML5+Canvas调用手机拍照功能实现图片上传(上)
- C#数据库操作类AccessHelper实例
- 刷新Activity中的scrollview示例(局部ui刷新)
- 详解Ubuntu Server下启动/停止/重启MySQL数据库的三种方式
- javascript中callee与caller的用法和应用场景
- Java时间类Date类和Calendar类的使用详解
- Document.body.scrollTop的值总为零的快速解决办法
- Linux 监控文件被什么进程修改(详解)
- jdk8的datetime时间函数使用示例
- C#中使用Split方法拆分字符串实例
- InputFilter实现EditText文本输入过滤器实例代码解析
- 解决Android Studio 3.0 butterknife:7.0.1配置的问题
- CentOS7使用dnf安装mysql的方法
- Spring ApplicationListener监听器用法详解
- 小程序实现页面顶部选项卡效果
- Django 创建后台,配置sqlite3教程
- mysql存储过程之错误处理实例详解
- Android Manifest中meta-data扩展元素数据的配置与获取方式