CSS优雅的公布栏源码

关注+2009-12-18作者：

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

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

　　HTML文件：

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');
ee.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.javaeye.com">http://wallimn.javaeye.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>

<?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.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.javaeye.com">http://wallimn.javaeye.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文件：

Html代码

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;
}