请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 265|回复: 9

纯CSS制作的新闻网站中的文章列表

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-24 21:30:28 | 显示全部楼层 |阅读模式

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项。如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容。CSS网页布局中,除了新闻列表、链接运行ul、li制作以外,我们通常将菜单也用ul、li来实现。

以下是引用片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS新闻列表制作webjx.com</title>
<style type="text/css">
.list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 6px 0px 4px 15px;
}
.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
}
</style>
</head>
<body>
<ul class=list>
<li><span>2007年12月21日</span><a href="#">新闻标题01</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题02</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题03</a></li>
<li><span>2007年12月21日</span><a href="#">新闻标题04</a></li>
</ul>
注意:span一定要放在前面,反之会产生换行
</body>
</html>


回复

使用道具 举报

1

主题

345

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
QQ
发表于 2016-3-11 17:41:27 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

0

主题

879

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2016-3-20 17:08:55 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

1

主题

345

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
QQ
发表于 2016-3-22 13:07:06 | 显示全部楼层
还有许多问题不明白,有点恼火啊!
回复 支持 反对

使用道具 举报

3

主题

986

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2016-5-27 12:58:49 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

2

主题

948

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2016-6-16 09:07:17 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

0

主题

903

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-6-25 17:22:12 | 显示全部楼层
我是路过的,轻轻飘过
回复 支持 反对

使用道具 举报

0

主题

879

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2017-8-11 15:39:01 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

2

主题

920

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2018-9-5 12:07:31 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

0

主题

879

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2018-11-6 11:33:16 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-21 01:52 , Processed in 0.207295 second(s), 34 queries .

快速回复 返回顶部 返回列表