您现在的位置是:首页 > 博客网站制作 > 心得笔记心得笔记
li列表在网页中常见应用例举(二)
杨青2013-08-10【心得笔记】人已围观
简介li列表加时间,li列表背景图片的应用,li标签里面的span应该放在前面,如果放在后面IE浏览器较低版本会出现错位
1) 列表+时间
- 2013年8月5日新闻标题01
- 2013年8月4日新闻标题02
- 2013年8月3日新闻标题03
- 2013年8月2日新闻标题04
html代码:
<ul class="list">
<li><span>2013年8月5日</span><a href="/">新闻标题01</a></li>
<li><span>2013年8月4日</span><a href="/">新闻标题02</a></li>
<li><span>2013年8月3日</span><a href="/">新闻标题03</a></li>
<li><span>2013年8月2日</span><a href="/">新闻标题04</a></li>
</ul>
css代码:
.list ul{list-style-type: circle;}
.list li{line-height:24px;}
.list li span{float: right;text-align: right;}
注意:li标签里面的span应该放在前面,如果放在后面IE浏览器较低版本会出现错位
演示页面
2) li 列表背景图片
- 1有一种思念,是淡淡的幸福,一个心情一行文字
- 2励志人生-要做一个潇洒的女人
- 3女孩都有浪漫的小情怀——浪漫的求婚词
- 4Green绿色小清新的夏天-个人博客模板
- 5女生清新个人博客网站模板
- 6Wedding-婚礼主题、情人节网站模板
- 7Column 三栏布局 个人网站模板
- 8时间煮雨-个人网站模板
- 9花气袭人是酒香—个人网站模板
html代码:
<ul class="tuijian">
<li><span class="num1">1</span><a href="/">有一种思念,是淡淡的幸福,一个心情一行文字</a></li>
<li><span class="num2">2</span><a href="/">励志人生-要做一个潇洒的女人</a></li>
<li><span class="num3">3</span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
<li><span>4</span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
<li><span>5</span><a href="/">女生清新个人博客网站模板</a></li>
<li><span>6</span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
<li><span>7</span><a href="/">Column 三栏布局 个人网站模板</a></li>
<li><span>8</span><a href="/">时间煮雨-个人网站模板</a></li>
<li><span>9</span><a href="/">花气袭人是酒香—个人网站模板</a></li>
</ul>
css代码:
<style type="text/css">
.tuijian li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;width:300px;} /* 文字益处用省略号代替 */
.tuijian li span { margin-right: 10px; font-family: "微软雅黑"; }
.num1,.num2,.num3 { width: 39px; color: #999;font-size: 24px; font-weight: normal; }
.num1{ color: #f8490b; }
</style>
css3实现上例效果 查看→ 应用页面
css3完整代码(css3可以作为一个尝试,IE较低版本不支持)
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>CSS新闻列表制作</title>
<style type="text/css">
.tuijian li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden;width:300px} /* 文字益处用省略号代替 */
.tuijian li span { margin-right: 10px; font-size: 14px; font-family: "微软雅黑"; }
.tuijian li:nth-child(-n+3) span { width: 39px; color: #999;font-size: 24px; font-weight: normal; } /* 选择从第3个开始倒数也就是第三个前面的 */
.tuijian li:first-child span { color: #f8490b; } /* 选择第一个 */
.tuijian li:nth-child(n+3) { line-height: 24px } /* 选择从第3个开始往后数 */
.tuijian li:nth-child(4) { margin: 5px 0 0 0 } /* 选择第四个 */
</style>
</head>
<body>
<ul class="tuijian">
<li><span>1</span><a href="/">有一种思念,是淡淡的幸福,一个心情一行文字</a></li>
<li><span>2</span><a href="/">励志人生-要做一个潇洒的女人</a></li>
<li><span>3</span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
<li><span>4</span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
<li><span>5</span><a href="/">女生清新个人博客网站模板</a></li>
<li><span>6</span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
<li><span>7</span><a href="/">Column 三栏布局 个人网站模板</a></li>
<li><span>8</span><a href="/">时间煮雨-个人网站模板</a></li>
<li><span>9</span><a href="/">花气袭人是酒香—个人网站模板</a></li>
</ul>
</body>
</html>
很赞哦! ()
上一篇:101个实用性网站你知道多少?
相关文章
随机图文
CSS简明教程(一)——如何在网页中添加样式
没有css也就是层叠样式表,就没有现代的Web设计。即便是格式极为丰富、构图极为复杂的网页,也可以通过css把格式化工作转移到一个外部文件——样式表里。这样一来,网页标记就可以非常清晰易读。10个常见W3C标准验证失败原因分析
W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能。SEO必知之网站和网页设计13条注意事项
1.避免splash页——splash页一般出现在网站首页,以介绍为目的,一般是含有大量图片和少量文字的页面。大多数splash页都只连接到网站中的单个页面。这样的方式会误导搜索引擎,使其认为你的网站上只有一个鼠标悬停图片、文字css3效果
其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。