<style>
*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}
img{border:none;}
.clearfix:after{content:""; display:block; clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.box{width:324px; height:315px; border:1px solid #ccc; margin:100px auto;}
.header{padding:5px 0 0 5px ; height:70px; background:#F2F2F2; overflow:hidden;}
.logo{width:72px;}
.item{width:242px;}
.item a{font-size:12px; color:#000; display:inline-block; float:left; margin-right:10px; font-family:"微软雅黑"; margin-bottom:25px;}
.item a:hover{color:#F60;}
.cont{width:324px;}
.list li{width:60px; height:30px; background:url(img/bg.png) left top repeat-x; line-height:30px; text-align:center; font-size:12px;}
.list .active{background:url(img/bg2.png) left top repeat-x; color:#FFF;}
.imgbox{width:204px; height:240px; position:relative;}
.imgbox img{width:204px; height:240px; display:block;}
.imgbox .bg{background:#000; color:#FFF; position:absolute; left:0; bottom:0; width:100%; height:24px; line-height:24px; opacity:0.5; filter:alpha(opacity=50);}
.imgbox .txt{position:absolute; left:0; bottom:0;font-size:12px; height:24px; line-height:24px; width:100%; text-align:center; color:#FFF;}
.imgbox .txt a{color:#FFF; text-decoration:none;}
</style>
<script>
window.onload=function(){
var a=[
'现在讲的',
'有点多了',
'小知识太多',
'脑子有点转不过来',
'希望少点内容',
'可以吸收的快一些',
'有些太糊涂了',
'有的根本就没懂',
'看着笔记',
'有些会的都不会了',
'选项卡都有点',
'懵了',
]
var oBoxbang=document.getElementById('boxbang');
var aLi=oBoxbang.getElementsByTagName('li');
var oImgs=document.getElementById('imgs');
var aImg=oImgs.getElementsByTagName('img')[0];
var oDiv=oImgs.getElementsByTagName('div')[1];
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0; i<aLi.length; i++){
aLi[i].className='';
}
this.className='active';
aImg.src='img/img'+(this.index+1)+'.jpg';
oDiv.innerHTML='<a href="#">'+a[this.index]+'</a>';
};
}
};
</script>
</head>
<body>
<div class="box" id="boxbang">
<div class="header clearfix">
<a href="javascript:;" class="logo fl"><img src="img/logo.png"></a>
<div class="item fr">
<a href="javascript:;">蕾丝裙</a>
<a href="javascript:;">牛仔裤</a>
<a href="javascript:;">男凉鞋</a>
<a href="javascript:;">情侣装</a>
<a href="javascript:;">大码女装</a>
<a href="javascript:;">休闲鞋</a>
<a href="javascript:;">收纳箱</a>
<a href="javascript:;">充电宝</a>
<a href="javascript:;">运动转</a>
<a href="javascript:;">童鞋</a>
</div>
</div>
<div class="cont clearfix">
<ul class="list fl">
<li>连衣裙</li>
<li>雪纺衫</li>
<li>凉鞋</li>
<li class="active">女包</li>
<li>T恤</li>
<li>真丝裙</li>
<li>防晒衣</li>
<li>蚊帐</li>
</ul>
<div class="imgbox fl" id="imgs">
<img src='img/img4.jpg'>
<div class="bg"></div>
<div class="txt"><a href="#">文字内容啊啊啊啊</a></div>
</div>
<ul class="list fr">
<li>男Y恤</li>
<li>男鞋</li>
<li>男包</li>
<li>休闲裤</li>
<li>半身裙</li>
<li>打底裤</li>
<li>短裤</li>
<li>衬衫</li>
</ul>
</div>
</div>
</body>
网友评论