个性产品列表显示代码

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.*w**3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<title>仿msn动态列表</title>
<link type="text/<a href=" http: target="_blank">css" rel="stylesheet" href="styles/g.css" />
<style type="text/css">
.box {
	
	border:1px solid #ccc;
	margin:20px;
	padding:20px;
	float:left;
}
.box:hover {
	border:1px dashed #ccc;
}
/*ul1 styles*/
.ul1 li {
	
	line-
}
/*ul2 styles*/
.ul2 li {
	
	overflow:hidden;
	cursor:pointer;
	line-
	padding-left:25px;
}
.ul2 li img {
	display:none;
	border:1px solid #ccc;
	float:left;
	margin-right:6px;
}
.ul2 li p {display:none;}
li.ontop {
	
}
li.ontop img {
	display:block;
	
	
}
li.ontop p {
	display:inline;
	color:#666;
}
#li1 {background:url(images/bn_i_ws_015.gif) 0 3px no-repeat;}
#li2 {background:url(images/bn_i_ws_016.gif) 0 3px no-repeat;}
#li3 {background:url(images/bn_i_ws_017.gif) 0 3px no-repeat;}
#li4 {background:url(images/bn_i_ws_018.gif) 0 3px no-repeat;}
#li5 {background:url(images/bn_i_ws_019.gif) 0 3px no-repeat;}
#li6 {background:url(images/bn_i_ws_020.gif) 0 3px no-repeat;}
#li7 {background:url(images/bn_i_ws_021.gif) 0 3px no-repeat;}
#li8 {background:url(images/bn_i_ws_022.gif) 0 3px no-repeat;}
#li9 {background:url(images/bn_i_ws_023.gif) 0 3px no-repeat;}
#li10 {background:url(images/bn_i_ws_024.gif) 0 3px no-repeat;}
</style>
<script type="text/javascript">
		function vidiexp(id)
		{
			for(i=1;i<=10;i++)
			{
				document.getElementById("li"+i).className = "";
				
			}
			document.getElementById("li"+id).className = "ontop";
		}
</script>

<div class="box">
	<ol class="ul2">
        <li id="li1" onmouseover="vidiexp(1)">
        	
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>      
        </li>
        <li id="li2" class="ontop" onmouseover="vidiexp(2)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>  
        </li>
        <li id="li3" onmouseover="vidiexp(3)">
        	
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>      
        </li>
        <li id="li4" onmouseover="vidiexp(4)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>  
        </li>
        <li id="li5" onmouseover="vidiexp(5)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>  
        </li>
        <li id="li6" onmouseover="vidiexp(6)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p>  
        </li>
        <li id="li7" onmouseover="vidiexp(7)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p> 
        </li>
        <li id="li8" onmouseover="vidiexp(8)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p> 
        </li>
        <li id="li9" onmouseover="vidiexp(9)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p> 
        </li>
        <li id="li10" onmouseover="vidiexp(10)">
            
        	<h5></h5>
            <p>320万拍照不高端索爱K800i跌入谷底</p> 
        </li>
    </ol>
</div>

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

个性产品列表显示代码

相关文章

精彩推荐