淘宝广告


<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>
推荐阅读更多精彩内容
