京东店铺左侧悬浮怎么装修?
效果:
代码:
<style>
.user_jy47 {position:fixed;left:20px;top:180px;width:290px;height:240px;font-size:13px;font-family:"微软雅黑","黑体",tahoma,"宋体";color:white;text-align:left;z-index:1000;margin:0px;padding:0px;}
.user_jy47 ul {list-style:none;margin:0px;padding:0px;}
.user_jy47 ul li {display:block;width:80px;height:30px;border-bottom:1px solid #2b2b2b;overflow:hidden;text-align:center;}
.user_jy47 ul li img{border:0px;margin:5px auto 0px;}
.user_jy47 ul li a{display:block;width:80px;height:80px;background-color:black;text-decoration:none;color:white;line-height:28px;}
.user_jy47 ul li a:hover{background-color:#ed0000;}
.user_jy47 ul li .chudian .tanchu{display:none;}
.user_jy47 ul li .chudian .tanchu .tanchu_title{display:block;width:200px;height:25px;overflow:hidden;margin:0px auto;}
.user_jy47 ul li .chudian:hover {border:none;}
.user_jy47 ul li .chudian:hover .tanchu{display:block;position:absolute;left:80px;top:0px;width:210px;height:235px;background-color:#ed0000;}
</style>
<!--[if IE 6]>
<style type="text/css">
.user_jy47{display:none;}
</style>
<![endif]-->
<div class="user_jy47">
<ul style="position:relative;left:0px;">
<li><a href="#">新品上市</a></li>
<li><a href="#">热卖推荐</a></li>
<li><a href="#">优惠大促</a></li>
<li><a href="#">今日特卖</a></li>
<li style="width:80px;height:80px;">
<a class="chudian" href="#">
<img src="img/70X70.jpg" width="70" height="70">
<span class="tanchu">
<img src="img/200x200.jpg" width="200" height="200">
<span class="tanchu_title">请在这里填入相关描述内容请在这里填入相关描述内容请在这里填入相关描述内容请在这里填入相关描述内容</span>
</span>
</a>
</li>
<li style="border:none;"><a href="#">↑返回顶部</a></li>
</ul>
</div>