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

最新推荐文章于 2022-11-03 16:27:45 发布

wallimn

最新推荐文章于 2022-11-03 16:27:45 发布

阅读量312

点赞数

分类专栏： JAVA、WEB开发文章标签： CSS Chrome HTML 数据结构浏览器

本文链接：https://blog.csdn.net/wallimn/article/details/83518333

版权

JAVA、WEB开发专栏收录该内容

442 篇文章 0 订阅

订阅专栏

　　今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：
[align=center]
[img]http://dl.iteye.com/upload/attachment/181352/3dae14a7-6c67-35cf-a23e-d3cfe8b7b7e1.gif[/img]
[/align]
　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。

　　[b]HTML文件：[/b]


<?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>

　　[b]CSS文件：[/b]


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

　　[b]用到的图片：[/b]
[align=center]
[img]http://dl.iteye.com/upload/attachment/181947/025fe505-4262-3c59-9675-2f755a7bcc1a.gif[/img]
[/align]

wallimn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实例(五)：简洁的栏目实现方式

　　今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：[align=center][img]http://dl.iteye.com/upload/attachment/181352/3dae14a7-6c67-35cf-a23e-d3cfe8b7b7e1.gif[/img][/align]　　以下是我的HTML文件及C...
复制链接

扫一扫