|
锁定老帖子 主题：CSS实例(五)：简洁的栏目实现方式
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-12-16
最后修改：2010-10-11
今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：
以下是我的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;
}
用到的图片： 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-12-17
给出Demo吧
|
| 返回顶楼 | |
|
发表时间：2009-12-17
一直上传不了RAR文件，不知为什么？跟我使用chrome浏览器有关吗？
需要DEMO，请到我的网络硬盘下载：wallimn.ys168.com |
| 返回顶楼 | |
|
发表时间：2009-12-18
感觉有点标题D了。。何为优雅？哪里优雅？个人意见，连标签语义化都没做到，标题和更多完全不该也列入到li列表项目中，css也蛮多的不是吗。仅供讨论。
|
| 返回顶楼 | |
|
发表时间：2009-12-18
最好，弄圆角的，柔一些
|
| 返回顶楼 | |
|
发表时间：2009-12-18
楼主，你那个截图是用什么工具处理的（感觉像撕纸的效果）？
|
| 返回顶楼 | |
|
发表时间：2009-12-18
还行吧,将ul li 改成 dl dt dd,语义结构会好些
|
| 返回顶楼 | |
|
发表时间：2009-12-18
caiceclb 写道 感觉有点标题D了。。何为优雅？哪里优雅？个人意见，连标签语义化都没做到，标题和更多完全不该也列入到li列表项目中，css也蛮多的不是吗。仅供讨论。
标题例如li中确实不优雅 |
| 返回顶楼 | |
|
发表时间：2009-12-18
最后修改：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> |
| 返回顶楼 | |
|
发表时间：2009-12-18
算了，把优雅去掉。简洁总想得上吧。
我的想法是尽量少的使用标签。 语义非得体现在标签的名字上吗？用class体现一下就不行吗？? 撕边，SnagIt，抓图，带撕边功能。 |
| 返回顶楼 | |
