打印

js+css完成的网站流行效果

frozenzen [楼主]

新手上路

帖子: 17
体力: 25
威望: 0
当前: 北京通州区
离线: 34 天

1^# 大中小发表于 2007-12-6 17:30

在某网站看到的效果，摘了下来，ｈｔｍｌ和ｃｓｓ进行了彻底改写。　共大家参考哦。

复制内容到剪贴板

代码:

<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function nTabs(thisObj,Num){

    if(thisObj.className == "active")return;

    var tabObj = thisObj.parentNode.id;

    var tabList = document.getElementById(tabObj).getElementsByTagName("li");

    for(i=0; i <tabList.length; i++)

    {

        if (i == Num)

        {

            thisObj.className = "active";

            document.getElementById(tabObj+"_Content"+i).style.display = "block";

        }else{

            tabList[i].className = "normal";

            document.getElementById(tabObj+"_Content"+i).style.display = "none";

        }

    }

}

var show_king_id = 1;

function show_king_list(e,k)

{

    if(show_king_id == k) return true;

        o = document.getElementById("a"+show_king_id);

        o.className = "bg";

    e.className = " ";

    show_king_id = k;

}

var show_kinga_id = 1;

function show_kinga_list(f,l)

{

    if(show_kinga_id == l) return true;

        o = document.getElementById("b"+show_kinga_id);

        o.className = "bg";

    f.className = " ";

    show_kinga_id = l;

}

</script>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

body {

font-size:12px;

font-family:"宋体",Arial, Helvetica, sans-serif;

color:#666666;

}

.door_container {

width:200px;

}

.door_container .TabTitle {

height:36px;

}

.door_container .TabTitle li {

list-style:none;

float:left;

width:77px;

height:36px;

cursor:pointer;

padding-left:2px;

line-height:28px;

color:#7c7c7c;

font-size:14px;

text-align:center;

font-weight:bold;

}

.door_container .TabTitle .active {

color:#000;

background:#CC9999;

}

.door_container .TabTitle .normal {

color:#7c7c7c;

}

.door_container .TabContent {

width:198px;

}

.none {

display: none;

}

.star{

width:198px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.star dl{

width:198px;

margin:5px 0;

float:left;

}

.star dl dd{

float:left;

margin-left:8px;

line-height:18px;

}

.star dl dt{

float:left;

}

.bg{

width:198px;

margin:5px 0;

background:#CCC;

float:left;

}

.sl01{

background:#CCCCCC;

margin:15px 5px 0 0;

width:25px;

height:18px;

padding-top:7px;

text-align:center;

font-weight:bold;

color:#FF0000;

}

.sl02 img{

border:1px solid #999999;

padding:3px;

}

.sl03 a{

color:#0066CC;

text-decoration:underline;

}

.sl03 a:hover{

color:#FF3300;

text-decoration:none;

}

.sl04{

background:#CCCCCC;

}

.sl05{

}

.bg .sl01{

background:#996600;

margin:5px 5px 0 0;

width:25px;

height:18px;

padding-top:7px;

text-align:center;

font-weight:bold;

color:#FF0000;

}

.bg .sl02 img{

display:none;

}

.bg  .sl03{

width:140px;

}

.bg  .sl04{

background:#CCCCCC;

width:140px;

}

.bg .sl05{

display:none;

}

</style>

</head>

<body>

<div class="door_container">

    <div class="TabTitle">

        <ul id="myTab">

            <li class="active" onmouseover=nTabs(this,0);>明星网友</li>

            <li class="normal" onmouseover=nTabs(this,1);>优秀圈主</li>

        </ul>

    </div>

    <div class="TabContent">

        <div id=myTab_Content0>

            <div class="star">

                <dl id=a1 onmouseover=show_king_list(this,1);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a2 onmouseover=show_king_list(this,2);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a3 onmouseover=show_king_list(this,3);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a4 onmouseover=show_king_list(this,4);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a5 onmouseover=show_king_list(this,5);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a6 onmouseover=show_king_list(this,6);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a7 onmouseover=show_king_list(this,7);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a8 onmouseover=show_king_list(this,8);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a9 onmouseover=show_king_list(this,9);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=a10 onmouseover=show_king_list(this,10);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

            </div>

        </div>

        <div class="none" id=myTab_Content1>

            <div class="star">

                <dl  id=b1 onmouseover=show_kinga_list(this,1);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/1/122/751/1227510.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg  id=b2 onmouseover=show_kinga_list(this,2);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b3 onmouseover=show_kinga_list(this,3);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b4 onmouseover=show_kinga_list(this,4);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b5 onmouseover=show_kinga_list(this,5);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b6 onmouseover=show_kinga_list(this,6);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b7 onmouseover=show_kinga_list(this,7);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b8 onmouseover=show_kinga_list(this,8);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b9 onmouseover=show_kinga_list(this,9);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

                <dl class=bg id=b10 onmouseover=show_kinga_list(this,10);>

                    <dt class="sl01">01</dt>

                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>

                    <dd class="sl03"><a href="#">水样年华</a></dd>

                    <dd class="sl04">25岁·湖北 武汉</dd>

                    <dd class="sl05">人气:1243178</dd>

                </dl>

            </div>

        </div>

    </div>

</div>

</body>

</html>

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

Marilynma

高级会员

帖子: 285
体力: 597
威望: 1
当前: 陕西西安
离线: 6 天

2^# 大中小发表于 2007-12-6 17:36

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function nTabs(thisObj,Num){
    if(thisObj.className == "active")return;
    var tabObj = thisObj.parentNode.id;
    var tabList = document.getElementById(tabObj).getElementsByTagName("li");
    for(i=0; i <tabList.length; i++)
    {
        if (i == Num)
        {
            thisObj.className = "active";
            document.getElementById(tabObj+"_Content"+i).style.display = "block";
        }else{
            tabList[i].className = "normal";
            document.getElementById(tabObj+"_Content"+i).style.display = "none";
        }
    }
}
var show_king_id = 1;
function show_king_list(e,k)
{
    if(show_king_id == k) return true;
        o = document.getElementById("a"+show_king_id);
        o.className = "bg";
    e.className = " ";
    show_king_id = k;
}
var show_kinga_id = 1;
function show_kinga_list(f,l)
{
    if(show_kinga_id == l) return true;
        o = document.getElementById("b"+show_kinga_id);
        o.className = "bg";
    f.className = " ";
    show_kinga_id = l;
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
font-size:12px;
font-family:"宋体",Arial, Helvetica, sans-serif;
color:#666666;
}
.door_container {
width:200px;
}
.door_container .TabTitle {
height:36px;
}
.door_container .TabTitle li {
list-style:none;
float:left;
width:77px;
height:36px;
cursor:pointer;
padding-left:2px;
line-height:28px;
color:#7c7c7c;
font-size:14px;
text-align:center;
font-weight:bold;
}
.door_container .TabTitle .active {
color:#000;
background:#CC9999;
}
.door_container .TabTitle .normal {
color:#7c7c7c;
}
.door_container .TabContent {
width:198px;
}
.none {
display: none;
}
.star{
width:198px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.star dl{
width:198px;
margin:5px 0;
float:left;
}
.star dl dd{
float:left;
margin-left:8px;
line-height:18px;
}
.star dl dt{
float:left;
}
.bg{
width:198px;
margin:5px 0;
background:#CCC;
float:left;
}
.sl01{
background:#CCCCCC;
margin:15px 5px 0 0;
width:25px;
height:18px;
padding-top:7px;
text-align:center;
font-weight:bold;
color:#FF0000;
}
.sl02 img{
border:1px solid #999999;
padding:3px;
}
.sl03 a{
color:#0066CC;
text-decoration:underline;
}
.sl03 a:hover{
color:#FF3300;
text-decoration:none;
}
.sl04{
background:#CCCCCC;
}
.sl05{
}
.bg .sl01{
background:#996600;
margin:5px 5px 0 0;
width:25px;
height:18px;
padding-top:7px;
text-align:center;
font-weight:bold;
color:#FF0000;
}
.bg .sl02 img{
display:none;
}
.bg  .sl03{
width:140px;
}
.bg  .sl04{
background:#CCCCCC;
width:140px;
}
.bg .sl05{
display:none;
}
</style>
</head>
<body>
<div class="door_container">
    <div class="TabTitle">
        <ul id="myTab">
            <li class="active" onmouseover=nTabs(this,0);>明星网友</li>
            <li class="normal" onmouseover=nTabs(this,1);>优秀圈主</li>
        </ul>
    </div>
    <div class="TabContent">
        <div id=myTab_Content0>
            <div class="star">
                <dl id=a1 onmouseover=show_king_list(this,1);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a2 onmouseover=show_king_list(this,2);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a3 onmouseover=show_king_list(this,3);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a4 onmouseover=show_king_list(this,4);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a5 onmouseover=show_king_list(this,5);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a6 onmouseover=show_king_list(this,6);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a7 onmouseover=show_king_list(this,7);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a8 onmouseover=show_king_list(this,8);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a9 onmouseover=show_king_list(this,9);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=a10 onmouseover=show_king_list(this,10);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
            </div>
        </div>
        <div class="none" id=myTab_Content1>
            <div class="star">
                <dl  id=b1 onmouseover=show_kinga_list(this,1);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/1/122/751/1227510.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg  id=b2 onmouseover=show_kinga_list(this,2);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b3 onmouseover=show_kinga_list(this,3);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b4 onmouseover=show_kinga_list(this,4);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b5 onmouseover=show_kinga_list(this,5);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b6 onmouseover=show_kinga_list(this,6);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b7 onmouseover=show_kinga_list(this,7);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b8 onmouseover=show_kinga_list(this,8);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b9 onmouseover=show_kinga_list(this,9);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
                <dl class=bg id=b10 onmouseover=show_kinga_list(this,10);>
                    <dt class="sl01">01</dt>
                    <dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
                    <dd class="sl03"><a href="#">水样年华</a></dd>
                    <dd class="sl04">25岁·湖北 武汉</dd>
                    <dd class="sl05">人气:1243178</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

美橙vps独立IP月付189元

frozenzen [楼主]

新手上路

帖子: 17
体力: 25
威望: 0
当前: 北京通州区
离线: 34 天

3^# 大中小发表于 2007-12-6 17:38

谢楼上的。我以为我发的就是你那种。能告诉俺怎么操作的吗？

TOP

中央美院远程平面设计进修班

Marilynma

高级会员

帖子: 285
体力: 597
威望: 1
当前: 陕西西安
离线: 6 天

4^# 大中小发表于 2007-12-6 17:41

就用最后的那个<!>标签

这效果不错速度蛮流畅的

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

roye2008

初级会员

帖子: 79
体力: 149
威望: 0
离线: 84 天

5^# 大中小发表于 2007-12-6 21:08

好..不好...效果速度都可以..

TOP

shqianlei

新手上路

帖子: 114
体力: 48
威望: 0
当前: 上海闸北
离线: 3 天

6^# 大中小发表于 2007-12-6 22:47

收藏了！

推荐一个酷站收藏大全
--------------------------------------------
cool.aisu.cn

TOP

yygy1019

初级会员

帖子: 31
体力: 66
威望: 0
离线: 3 天

7^# 大中小发表于 2007-12-7 07:31

挺不错的

TOP

84354145

幸福深处

中级会员

帖子: 95
体力: 208
威望: 0
当前: 山东济南
离线: 14 天

8^# 大中小发表于 2007-12-7 09:46

晕这不是我们公司网站上的嘛！

长胖了就能卖肉了。

TOP

haocat

初级会员

帖子: 124
体力: 192
威望: 0
当前: 陕西西安
离线: 13 天

专长 网页设计,JS,PHP

9^# 大中小发表于 2008-3-6 21:59

引用:

原帖由 84354145 于 2007-12-7 09:46 发表
晕这不是我们公司网站上的嘛！

哈哈

绝世※好猫

TOP

occult

中级会员

帖子: 133
体力: 289
威望: 0
当前: 广东中山
离线: 2 天

10^# 大中小发表于 2008-3-7 01:15

首先说我是菜鸟哈，不是很明白，你都重写css了，干嘛还那么多class？

TOP

yadan

初级会员

帖子: 85
体力: 165
威望: 0
离线: 1 天

11^# 大中小发表于 2008-5-17 17:58

是否兼容两大浏览器?谢谢.

我是人

TOP

happy8181

高级会员

帖子: 176
体力: 618
威望: 0
当前: 陕西延安
离线: 16 天

12^# 大中小发表于 2008-5-17 18:12

没有测试过其他浏览器··但对这个效果很佩服，速度和流畅都有，相当不错。好东西，收藏。

[海豚之恋] 是我的小站，欢迎大家去看看！！！

TOP

cehen

初级会员

帖子: 30
体力: 69
威望: 0
当前: 湖南长沙
离线: 17 天

13^# 大中小发表于 2008-5-17 22:00

很不错的效果啊

学习学习再学习

TOP

mylover002

新手上路

帖子: 13
体力: 26
威望: 0
离线: 2 天

14^# 大中小发表于 2008-6-26 13:47

我測試了，在FF3.0上可以運行呀，不錯，

TOP

tianshiwing

新手上路

帖子: 9
体力: 21
威望: 0
当前: 河南郑州
离线: 106 天

15^# 大中小发表于 2008-6-26 16:49

提示：您可以先修改部分代码再运行

TOP

aimnxuexi

初级会员

帖子: 34
体力: 54
威望: 0
离线: 3 天

16^# 大中小发表于 2008-6-27 13:35

效果还行啊

TOP

gs1357

新手上路

帖子: 2
体力: 9
威望: 0
当前: 浙江温州
离线: 32 天

17^# 大中小发表于 2008-6-28 00:18

收藏一下了.

TOP

kth007

初级会员

帖子: 27
体力: 62
威望: 0
离线: 6 天

18^# 大中小发表于 2008-6-29 21:51

<!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=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function show_list(id,now,total){
  for(i=1;i<=total;i++){
	o = document.getElementById(id+i);
	if(i==now) o.className = "show";
	else o.className = "";
  }
}
</script>
<style type="text/css">
body{ margin:0px; FONT: 12px "宋体"; COLOR: #000000; BACKGROUND-COLOR: #fff;}
DIV {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px;}
FORM {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}
IMG {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}
A {COLOR: #000; TEXT-DECORATION: none}
A:hover {COLOR: #f30; TEXT-DECORATION: underline}
.jzhd_jczk{height:200px; width:200px; }
.jzhd_jczk ul{margin:0px; padding:0px;}
.jzhd_jczk ul li{margin:0px 5px 0px 5px; padding:0px; list-style-type:none;height:20px!important; *height:16px!important; line-height:20px!important;line-height:16px; clear:both;}
.jzhd_jczk ul li img{display:none;}
.jzhd_jczk ul li .shorttitle{display:block}
.jzhd_jczk ul li .title{display:none;}
.jzhd_jczk ul li .hdtime{display:none;}
.jzhd_jczk ul li.show{margin:0px; padding:3px 0px 3px 0px; list-style-type:none; height:50px!important; border-top:1px solid #CCCCCC; border-bottom:1px solid #ccc; background:#f0f0f0;}
.jzhd_jczk ul li.show img{display:block; float:left;margin:0px 4px 0px 4px; padding:0px; border:1px solid #666666}
.jzhd_jczk ul li.show .shorttitle{display:none}
.jzhd_jczk ul li.show .title{display:block; float:left;clear:right; width:132px; height:35px;}
.jzhd_jczk ul li.show .title a{text-decoration:underline;}
.jzhd_jczk ul li.show .hdtime{display:block; color:#999999}
</style>
</head>
<body>
<div class="jzhd_jczk" style="border-bottom:2px dashed #000000">
<ul>
<li id="jzfloat1" class="show" onmouseover='show_list("jzfloat",1,8);'>
<a href="http://article.jxhi.com/b/20080523/3198.html" target="_blank" title="恒森原创装饰携手各家建材邀您共享品质家装"><img src="http://article.jxhi.com//picture/0805/_09532E37.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >恒森原创装饰携手各家建材邀您共</span>
<span class="title"><a href="http://article.jxhi.com/b/20080523/3198.html" target="_blank"  title="恒森原创装饰携手各家建材邀您共享品质家装">恒森原创装饰携手各家建材邀您共享品质家装</a></span>
<span class="hdtime">2008-05-25</span>
</li>
<li id="jzfloat2" class="" onmouseover='show_list("jzfloat",2,8);'>
<a href="http://article.jxhi.com/b/20080515/3080.html" target="_blank" title="2008业之峰环保家装定制会，打好夏季装修保卫战"><img src="http://article.jxhi.com//picture/litimg/080515/125436341Q.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >2008业之峰环保家装定制会，打好</span>
<span class="title"><a href="http://article.jxhi.com/b/20080515/3080.html" target="_blank"  title="2008业之峰环保家装定制会，打好夏季装修保卫战">2008业之峰环保家装定制会，打好夏季装修保卫</a></span>
<span class="hdtime">业之峰环保家装定制会</span>
</li>
<li id="jzfloat3" class="" onmouseover='show_list("jzfloat",3,8);'>
<a href="http://article.jxhi.com/b/20080501/2987.html" target="_blank" title="方氏点睛饰业五一优惠大酬宾"><img src="http://article.jxhi.com//picture/litimg/080501/1KZ016304.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >方氏点睛饰业五一优惠大酬宾</span>
<span class="title"><a href="http://article.jxhi.com/b/20080501/2987.html" target="_blank"  title="方氏点睛饰业五一优惠大酬宾">方氏点睛饰业五一优惠大酬宾</a></span>
<span class="hdtime">活动时间：2008-05</span>
</li>
<li id="jzfloat4" class="" onmouseover='show_list("jzfloat",4,8);'>
<a href="http://article.jxhi.com/b/20080424/2962.html" target="_blank" title="鸿基伟业品三大套餐送四年华诞重礼"><img src="http://article.jxhi.com//picture/litimg/080424/102I91T24.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >鸿基伟业品三大套餐送四年华诞重</span>
<span class="title"><a href="http://article.jxhi.com/b/20080424/2962.html" target="_blank"  title="鸿基伟业品三大套餐送四年华诞重礼">鸿基伟业品三大套餐送四年华诞重礼</a></span>
<span class="hdtime">活动时间：2008.04.26</span>
</li>
<li id="jzfloat5" class="" onmouseover='show_list("jzfloat",5,8);'>
<a href="http://article.jxhi.com/b/20080424/2961.html" target="_blank" title="美星装饰隆重推出装修白皮书"><img src="http://article.jxhi.com//picture/litimg/080424/10193515P5.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >美星装饰隆重推出装修白皮书</span>
<span class="title"><a href="http://article.jxhi.com/b/20080424/2961.html" target="_blank"  title="美星装饰隆重推出装修白皮书">美星装饰隆重推出装修白皮书</a></span>
<span class="hdtime"></span>
</li>
<li id="jzfloat6" class="" onmouseover='show_list("jzfloat",6,8);'>
<a href="http://article.jxhi.com/b/20080407/2918.html" target="_blank" title="三星装饰余工设计师楼周年庆 开业庆"><img src="http://article.jxhi.com//picture/litimg/080407/12564413212.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >三星装饰余工设计师楼周年庆 开业</span>
<span class="title"><a href="http://article.jxhi.com/b/20080407/2918.html" target="_blank"  title="三星装饰余工设计师楼周年庆 开业庆">三星装饰余工设计师楼周年庆 开业庆</a></span>
<span class="hdtime">活动时间：04.11-13</span>
</li>
<li id="jzfloat7" class="" onmouseover='show_list("jzfloat",7,8);'>
<a href="http://article.jxhi.com/b/20080327/2688.html" target="_blank" title="志远装饰乔迁开展优惠月活动"><img src="http://article.jxhi.com//picture/litimg/080327/15214412051.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >志远装饰乔迁开展优惠月活动</span>
<span class="title"><a href="http://article.jxhi.com/b/20080327/2688.html" target="_blank"  title="志远装饰乔迁开展优惠月活动">志远装饰乔迁开展优惠月活动</a></span>
<span class="hdtime">活动时间：03.29-03.30</span>
</li>
<li id="jzfloat8" class="" onmouseover='show_list("jzfloat",8,8);'>
<a href="http://article.jxhi.com/b/20080327/2687.html" target="_blank" title="英泰装饰红谷滩公司即将开业"><img src="http://article.jxhi.com//picture/litimg/080327/15162614Y4.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >英泰装饰红谷滩公司即将开业</span>
<span class="title"><a href="http://article.jxhi.com/b/20080327/2687.html" target="_blank"  title="英泰装饰红谷滩公司即将开业">英泰装饰红谷滩公司即将开业</a></span>
<span class="hdtime">活动时间：03.29-04.06</span>
</li>
</ul>
</div>
<div class="jzhd_jczk" style="margin-top:5px;">
<ul>
<li id="jcfloat1" class="show" onmouseover='show_list("jcfloat",1,8);'>
<a href="http://article.jxhi.com/b/20080628/3721.html" target="_blank" title="意利宝装修期间正价产品折中折"><img src="http://article.jxhi.com//picture/litimg/080628/142A612J8.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >意利宝装修期间正价产品折中折</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3721.html" target="_blank"  title="意利宝装修期间正价产品折中折">意利宝装修期间正价产品折中折</a></span>
<span class="hdtime">活动时间：2008.08</span>
</li>
<li id="jcfloat2" class="" onmouseover='show_list("jcfloat",2,8);'>
<a href="http://article.jxhi.com/b/20080628/3720.html" target="_blank" title="新中源清凉夏季特惠尽情享受"><img src="http://article.jxhi.com//picture/litimg/080628/14202G4951.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >新中源清凉夏季特惠尽情享受</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3720.html" target="_blank"  title="新中源清凉夏季特惠尽情享受">新中源清凉夏季特惠尽情享受</a></span>
<span class="hdtime">活动时间：06.28-08.30</span>
</li>
<li id="jcfloat3" class="" onmouseover='show_list("jcfloat",3,8);'>
<a href="http://article.jxhi.com/b/20080628/3719.html" target="_blank" title="新中源聚晶微粉普及风暴"><img src="http://article.jxhi.com//picture/litimg/080628/14151915191.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >新中源聚晶微粉普及风暴</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3719.html" target="_blank"  title="新中源聚晶微粉普及风暴">新中源聚晶微粉普及风暴</a></span>
<span class="hdtime">活动时间：06.28-08.30</span>
</li>
<li id="jcfloat4" class="" onmouseover='show_list("jcfloat",4,8);'>
<a href="http://article.jxhi.com/b/20080628/3718.html" target="_blank" title="欧神诺陶瓷买一送一"><img src="http://article.jxhi.com//picture/litimg/080628/1411431W44.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >欧神诺陶瓷买一送一</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3718.html" target="_blank"  title="欧神诺陶瓷买一送一">欧神诺陶瓷买一送一</a></span>
<span class="hdtime">活动时间：即日起</span>
</li>
<li id="jcfloat5" class="" onmouseover='show_list("jcfloat",5,8);'>
<a href="http://article.jxhi.com/b/20080628/3717.html" target="_blank" title="金牌橱柜千万标配全面升级中"><img src="http://article.jxhi.com//picture/0806/_140343632.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >金牌橱柜千万标配全面升级中</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3717.html" target="_blank"  title="金牌橱柜千万标配全面升级中">金牌橱柜千万标配全面升级中</a></span>
<span class="hdtime">活动时间：2008.06.28</span>
</li>
<li id="jcfloat6" class="" onmouseover='show_list("jcfloat",6,8);'>
<a href="http://article.jxhi.com/b/20080628/3716.html" target="_blank" title="宾利陶瓷开业 五大惊喜等着您"><img src="http://article.jxhi.com//picture/litimg/080628/14001112296.gif" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >宾利陶瓷开业 五大惊喜等着您</span>
<span class="title"><a href="http://article.jxhi.com/b/20080628/3716.html" target="_blank"  title="宾利陶瓷开业 五大惊喜等着您">宾利陶瓷开业 五大惊喜等着您</a></span>
<span class="hdtime">活动时间：07.19-07.21</span>
</li>
<li id="jcfloat7" class="" onmouseover='show_list("jcfloat",7,8);'>
<a href="http://article.jxhi.com/b/20080622/3635.html" target="_blank" title="尚高浓情家装月特惠大行动"><img src="http://article.jxhi.com//picture/litimg/080622/14212211Y6.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >尚高浓情家装月特惠大行动</span>
<span class="title"><a href="http://article.jxhi.com/b/20080622/3635.html" target="_blank"  title="尚高浓情家装月特惠大行动">尚高浓情家装月特惠大行动</a></span>
<span class="hdtime">活动时间：06.21-07.21</span>
</li>
<li id="jcfloat8" class="" onmouseover='show_list("jcfloat",8,8);'>
<a href="http://article.jxhi.com/b/20080622/3634.html" target="_blank" title="威麦卫浴折扣惊喜不断"><img src="http://article.jxhi.com//picture/litimg/080622/141949131B.jpg" onerror="this.src='http://pic.jxhi.com/images/nophoto1.gif'" height="50" width="50"></a>
<span class="shorttitle" >威麦卫浴折扣惊喜不断</span>
<span class="title"><a href="http://article.jxhi.com/b/20080622/3634.html" target="_blank"  title="威麦卫浴折扣惊喜不断">威麦卫浴折扣惊喜不断</a></span>
<span class="hdtime"&