标签页:另类TabStrip效果

作者:admin 日期:2008-11-02

字体大小: 小中大

<!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>
<style type="text/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(http://www.doyoe.com/model/xhtmlcss/style/imgview/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(http://www.doyoe.com/model/xhtmlcss/style/imgview/point_01.gif) left 5px no-repeat;
    text-decoration:none;
    color:#333;
}
#dyimgview dd li a:hover {
    background-position:left -5px;
    color:#050;
}
</style>
</head>
<body>
<h3>另类TabStrip效果(书签应用补遗)：</h3>
<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>

'引用自http://www.52515.net:8088/file.asp?fileid=313939372672713d323030372d31312d313326626f61726469643d3632

[本日志由 admin 于 2008-11-02 11:25 PM 编辑]