上一篇
下一篇
另类TabStrip效果(书签应用补遗)
作者:飘零雾雨 日期:2007-10-09
转载请注明出处，css探索之旅-飘零雾雨的庄园
书签其实还是蛮好玩滴，需要的只是你有时间和兴趣，当前也要有想法:)
之前整理了个用书签弄的简单相册类图片展示效果，稍稍扩展下就弄了个另类的TabStrip，上篇提到的几个遗憾还是没很好的解决，但对于当前序号的样式设置想到了一个似乎可行的变通方法。不过没有仔细的去写，所以看起来可能还是不大明显。
来看看这个当前样式使用怎样的一个变通吧，虽然可能也不大好，不过了胜于无，暂时还是可以用滴。
由于很懒，没对该例子作美化，仅作说明。
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/imgview/2.htm］
CSS部分：
#dyimgview {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
width:260px;
voice-family:"\"}\"";voice-family:inherit;
width:240px;
}
#dyimgview dt {
float:left;
}
#dyimgview dt a {
display:block;
width:20px;
height:39px;
margin:1px;
color:#fff;
text-align:center;
background-color:#aaa;
font:bold 12px/39px "宋体",sans-serif;
text-decoration:none;
}
#dyimgview dt a:hover {
color:#f00;
background-color:#000;
}
#dyimgview dd {
margin:0;
height:120px;
float:left;
overflow:hidden;
}
#dyimgview dd ul {
margin:0;
padding:0;
list-style:none;
background:url(over.gif) left top no-repeat;
}
#dyimgview dd #b {
background-position:left 41px;
}
#dyimgview dd #c {
background-position:left 80px;
}
#dyimgview dd li {
height:20px;
font:12px/20px "宋体",sans-serif;
}
#dyimgview dd li a {
margin-left:15px;
padding-left:10px;
background:url(point_01.gif) left 5px no-repeat;
text-decoration:none;
color:#333;
}
#dyimgview dd li a:hover {
background-position:left -5px;
color:#050;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
<title>另类TabStrip效果(书签应用补遗)</title>
</head>
<body>
<dl id="dyimgview">
<dt><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></dt>
<dd>
<ul id="a">
<li><a href="">传说中的测试1</a></li>
<li><a href="">传说中的测试1</a></li>
<li><a href="">传说中的测试1</a></li>
<li><a href="">传说中的测试1</a></li>
<li><a href="">传说中的测试1</a></li>
<li><a href="">传说中的测试1</a></li>
</ul>
<ul id="b">
<li><a href="">传说中的测试2</a></li>
<li><a href="">传说中的测试2</a></li>
<li><a href="">传说中的测试2</a></li>
<li><a href="">传说中的测试2</a></li>
<li><a href="">传说中的测试2</a></li>
<li><a href="">传说中的测试2</a></li>
</ul>
<ul id="c">
<li><a href="">传说中的测试3</a></li>
<li><a href="">传说中的测试3</a></li>
<li><a href="">传说中的测试3</a></li>
<li><a href="">传说中的测试3</a></li>
<li><a href="">传说中的测试3</a></li>
<li><a href="">传说中的测试3</a></li>
</ul>
</dd>
</dl>
</body>
</html>
很简单的一个tabStrip，如果同学们有什么更好的方案对“当前样式”进行补充，请联系Doyoe。
文章来自: 
引用通告: 
Tags: 
回复
to:Acool
俺也一样