在DIV+CSS排版中新闻列表的制作方法
最终效果:
- 2005年5月30日 新闻标题01
- 2005年5月30日 新闻标题02
- 2005年5月30日 新闻标题03
- 2005年5月30日 新闻标题04
CSS代码:
.list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px; } .list li{ background: url(/imagelist/06/31/gu432qq5q695.gif) repeat-x bottom; /*列表底部的虚线*/ width: 100%; } .list li a{ color: #777777; display: block; padding: 6px 0px 4px 15px; background: url(/imagelist/06/31/7ei20115t3sv.gif) no-repeat 0 6px; /*列表左边的箭头图片*/ } .list li span{ float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ } .list li a:hover{ color: #336699; background: url(/imagelist/06/31/jq1ysff5b0ac.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>
在DIV+CSS排版中新闻列表的制作方法相关推荐
- html新闻排版制作代码,在DIV+CSS排版中新闻列表的制作方法_CSS/HTML
CSS代码:.list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px ...
- html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...
- div+css实现有序新闻文章列表布局
div css布局中常常遇到文章标题列表前有序号(1-10)排版布局,如何简单实现这类新闻文章标题列表排版布局呢?如看到列表布局前有1 2 3 4 5 6 7等数字顺序. 最终效果图: 一.布局思维 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- Pyplot中Scatter三维散点图制作方法记录
Pyplot中Scatter三维散点图制作方法记录 简介 物体识别是深度相机的应用方向之一,根据本工作已经做了平面.球体.圆柱体的识别算法,在这些算法中,点云必须属于单一物体,不能同时存在多个物体.这 ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- 通过JS+DIV+CSS排版布局实现选项卡效果
2019独角兽企业重金招聘Python工程师标准>>> CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
最新文章
- Python 爬虫练手项目—酒店信息爬取
- arcgis9.1下载地址
- 面对“超人革命”,我们是否已做好准备?
- MySQL分区的限制(最多有多少个分区)
- 第四章课后习题及答案
- linux开发板显示横向彩虹,给 Linux 终端的输出添加彩虹特效的命令
- wordpress 怎么获取站点标题
- Django框架-Form组件
- 如何删除表中的重复记录?等等常用SQL语句的积累
- 收费企业邮箱的好处-外贸企业优选
- Scipy教程 - python数值计算库
- ASP.NET 的服务器端控件有三种关于 ID 的属性 ID, ClientID 和 UniqueID
- python做服务器接口-用Python实现简单的服务器【新手必学】
- 飞鱼星 VW1900 路由器怎么样 问题太多 bug集锦
- python把正整数翻译成英文_python实现在线翻译
- 学3d游戏建模要用到什么软件?一般用哪个软件?
- 西门子300 PLC 功能块及背景数据块的说明
- 【文献阅读】路径感知的图注意力做运动预测(Fang Da等人,ArXiv,ICRA 2022)
- 工作分配问题【回溯算法】
- 多线程实现一分钟插入1000万条数据