简单代码实现的个性产品列表
- 作者：suntear 来源：蓝色理想 文章点击数：
<!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>仿msn动态列表</title>
<link type="text/css" rel="stylesheet" href="styles/g.css" />
<style type="text/css">
.box {
width:240px;
border:1px solid #ccc;
margin:20px;
padding:20px;
float:left;
}
.box:hover {
border:1px dashed #ccc;
}
/*ul1 styles*/
.ul1 li {
height:20px;
line-height:20px;
}
/*ul2 styles*/
.ul2 li {
height:26px;
overflow:hidden;
cursor:pointer;
line-height:20px;
padding-left:25px;
}
.ul2 li img {
display:none;
border:1px solid #ccc;
float:left;
margin-right:6px;
}
.ul2 li p {display:none;}
li.ontop {
height:66px;
}
li.ontop img {
display:block;
width:55px;
height:55px;
}
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>
</head>
<body>
<div class="box">
<ol class="ul2">
<li id="li1" onmouseover="vidiexp(1)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">LG KW820</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li2" class="ontop" onmouseover="vidiexp(2)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">三星 SGH-B508</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li3" onmouseover="vidiexp(3)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">LG KG70(Shine)</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li4" onmouseover="vidiexp(4)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">索尼爱立信 G700</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li5" onmouseover="vidiexp(5)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">多普达 U1000</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li6" onmouseover="vidiexp(6)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">诺基亚N95 8GB</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li7" onmouseover="vidiexp(7)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">诺基亚6120c</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li8" onmouseover="vidiexp(8)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">三星U608</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li9" onmouseover="vidiexp(9)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">摩托罗拉A1200</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
<li id="li10" onmouseover="vidiexp(10)">
<a href="#"><img src="images/sx.gif"/></a>
<h5><a href="#">苹果 iPhone</a></h5>
<p>320万拍照不高端索爱K800i跌入谷底</p>
</li>
</ol>
</div>
</body>
</html>
- 上一篇：一个图片展示效果--阿里巴巴首页的
- 下一篇：2008年会抽奖系统
- 相关文章
| ·仿163 幻灯片特效 | 08-18 |
| ·符合标准的对联广告代码 | 08-16 |
| ·奥运奖牌榜代码 | 08-14 |
| ·半完美模拟滚动条simScroll... | 08-13 |
| ·最新北京奥运官方网站幻灯片切换效果 | 08-12 |
| ·js文字滚动效果 | 08-11 |
| ·很酷实用的右键弹出菜单 | 08-11 |
| ·一个简单的相册效果，简单但兼容性好 | 08-02 |
