今天花了点儿时间,琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西,我称之为栏目,不知道别人叫它什么:
以下是我的HTML文件及CSS文件,可以便捷地进行样式切换。如果谁有更简洁的方式,请留言指教。
HTML文件:
CSS文件:
用到的图片:
![](http://dl.iteye.com/upload/attachment/181352/3dae14a7-6c67-35cf-a23e-d3cfe8b7b7e1.gif)
以下是我的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,阅读请注意。*/
- 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="#">CSS</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;
- }
用到的图片:
![](http://dl.iteye.com/upload/attachment/181947/025fe505-4262-3c59-9675-2f755a7bcc1a.gif)