淘宝精选之精品展示

最新推荐文章于 2022-11-19 23:50:29 发布

轨道骑士

最新推荐文章于 2022-11-19 23:50:29 发布

阅读量1.2k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_43696174/article/details/105744661

版权

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>精品展示</title>
    <link rel="stylesheet" href="css/good.css">
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
      $("#left>li").mouseenter(function () {
        var index=$(this).index();
        $("#center>li").eq(index).show().siblings().hide();
      });
      $("#right>li").mouseenter(function () {
        var index=$(this).index()+9;
        $("#center>li").eq(index).show().siblings().hide();
      });
    });
</script>
   </head>
  <body>
    <div class="wrapper">
      <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
      </ul>
      <ul id="center">
        <li><a href="#"><img src="img/女靴.jpg"/></a></li>
        <li><a href="#"><img src="img/雪地靴.jpg"/></a></li>
        <li><a href="#"><img src="img/冬裙.jpg"/></a></li>
        <li><a href="#"><img src="img/呢大衣.jpg"/></a></li>
        <li><a href="#"><img src="img/毛衣.jpg"/></a></li>
        <li><a href="#"><img src="img/棉服.jpg"/></a></li>
        <li><a href="#"><img src="img/女裤.jpg"></a></li>
        <li><a href="#"><img src="img/羽绒服.jpg"/></a></li>
        <li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>
        <li><a href="#"><img src="img/女包.jpg"/></a></li>
        <li><a href="#"><img src="img/男包.jpg"/></a></li>
        <li><a href="#"><img src="img/登山鞋.jpg"/></a></li>
        <li><a href="#"><img src="img/皮带.jpg"/></a></li>
        <li><a href="#"><img src="img/围巾.jpg"/></a></li>
        <li><a href="#"><img src="img/皮衣.jpg"/></a></li>
        <li><a href="#"><img src="img/男毛衣.jpg"/></a></li>
        <li><a href="#"><img src="img/男棉服.jpg"/></a></li>
        <li><a href="#"><img src="img/男靴.jpg"/></a></li>
      </ul>
      <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
      </ul>
    </div>
   </body>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
.wrapper {
    width: 298px;
    height: 248px;
    margin: 100px auto 0;
    border: 1px solid pink;
    overflow: hidden;
}
#left, #center, #right {
    float: left;
}
#left li, #right li {
    background: url(../img/lili.jpg) repeat-x;
}
#left li a, #right li a {
    display: block;
    width: 48px;
    height: 27px;
    border-bottom: 1px solid pink;
    line-height: 27px;
    text-align: center;
    color: black;
}
#left li a:hover, #right li a:hover {
    color: #fff;
    background-image: url(../img/abg.gif);
}
#center {
    border-left: 1px solid pink;
    border-right: 1px solid pink;
}
img {
    width: 200px;
    height: 250px;
}

效果：

轨道骑士

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
淘宝精选之精品展示

HTML代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>精品展示</title> <link rel="stylesheet" href="css/good.css"><script src="j...
复制链接

扫一扫