CSS实例(五)：简洁的栏目实现方式

wallimn

浏览: 5153966 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

CSS Chrome HTML 数据结构浏览器

　　今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：

　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。

　　HTML文件：

<?xml version="1.0" encoding="UTF-8" ?>
<!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=UTF-8" />
<title>Insert title here</title>
<link href="column.css" style="text/css" rel="stylesheet"/>
<script type="text/javascript">
	var gIndex = 1;
	function doSwitch(){
		var e = document.getElementById('info');
		/*下面的变量是e，代码高亮好像有个BUG，阅读请注意。*/
		e.className = e.className.split(' ')[0]+' s'+(gIndex%3+1);
		gIndex++;
	}
</script>
</head>
<body>
<ul class="column s1" id="info">
	<li class="title"><div>信息公示</div></li>
	<li><a href="#">隔壁老王</a></li>
	<li><a href="http://wallimn.iteye.com">http://wallimn.iteye.com</a></li>
	<li><a href="#">很长文本自动截断，一切皆有可能，一切皆有可能，一切皆有可能，一切皆有可能</a></li>
	<li class="tail"><a href="#">更多...</a></li>
</ul>
<br/>
<input type="button" value="样式切换" onclick="doSwitch()" />
</body>
</html>

　　CSS文件：

ul.column{
	padding:0;
	margin:0;
	font:normal 12px "宋体";
	border:1px solid #000;
}
ul.column li{
	height:26px;
	line-height:26px;
	margin:0 4px;
	border-bottom:1px dashed #ccc;
	vertical-align:middle;
	padding-left:24px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
ul.column li,ul.column li.title div{
	background:url("column.gif") no-repeat;
}
ul.column li a{
	text-decoration:none;
}
ul.column li a:hover{
	color:red;
}
ul.column li.title,ul.column li.tail{
	border-width:0;
}
ul.column li.title{
	background-repeat:repeat-x;
	margin:0;
	padding:0;
}
ul.column li.tail{
	text-align:right;
	padding-right:12px;
	background-image:none;
}

/*1*/
ul.s1{
	width:300px;
}
ul.s1,ul.s1 li{
	border-color:#2e9803;
}
ul.s1 li{
	background-position: 0 -52px;
}
ul.s1 li.title{
	background-position: 0 -26px;
}
ul.s1 li.title div{
	background-position: 0 0;
	padding-left:24px;
}
/*2*/
ul.s2{
	width:300px;
}
ul.s2,ul.s2 li{
	border-color:#9438d4;
}
ul.s2 li{
	background-position: 0 -130px;
}
ul.s2 li.title{
	background-position: 0 -104px;
}
ul.s2 li.title div{
	background-position: 0 -78px;
	padding-left:24px;
}
/*3*/
ul.s3{
	width:300px;
}
ul.s3,ul.s3 li{
	border-color:#9bb8d2;
}
ul.s3 li{
	background-position: 0 -208px;
}
ul.s3 li.title{
	background-position: 0 -182px;
}
ul.s3 li.title div{
	background-position: 0 -156px;
	padding-left:24px;
}

　　用到的图片：

查看图片附件

分享到：

网站的最大并发连接数 | 修改指定IE查看源文件方式为EditPlus

2009-12-16 22:04
浏览 1942
评论(10)
论坛回复 / 浏览 (10 / 14162)
分类:Web前端
查看更多

10 楼 wallimn 2009-12-18

CSS多了点，但有一大部分是另外两种风格的定义。

9 楼 wallimn 2009-12-18

算了，把优雅去掉。简洁总想得上吧。
我的想法是尽量少的使用标签。
语义非得体现在标签的名字上吗？用class体现一下就不行吗？?
撕边，SnagIt，抓图，带撕边功能。

8 楼 bellstar 2009-12-18

我来做会这样弄HTML

<div class="column">
<h3>标题</h3>
<ul>
<li>数据项1</li>
<li>数据项2</li>
<li>数据项...</li>
</ul>
<a href="http://xxx">更多...</a>
</div>

7 楼 fhjxp 2009-12-18

caiceclb 写道

感觉有点标题D了。。何为优雅？哪里优雅？个人意见，连标签语义化都没做到，标题和更多完全不该也列入到li列表项目中，css也蛮多的不是吗。仅供讨论。

标题例如li中确实不优雅

6 楼 leiliang 2009-12-18

还行吧,将ul li 改成 dl dt dd,语义结构会好些

5 楼 bookong 2009-12-18

楼主，你那个截图是用什么工具处理的（感觉像撕纸的效果）？

4 楼 amonlei 2009-12-18

最好，弄圆角的，柔一些

3 楼 caiceclb 2009-12-18

2 楼 wallimn 2009-12-17

一直上传不了RAR文件，不知为什么？跟我使用chrome浏览器有关吗？
需要DEMO，请到我的网络硬盘下载：wallimn.ys168.com

1 楼 ustcfxx 2009-12-17

给出Demo吧

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论