TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：
以下是我的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.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>
[/code]
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;
}
[/code]
用到的图片：
源码下载：http://file.javaxxz.com/2014/11/4/235526796.zip |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-11-4 23:55:27