效果展示
实训第一周学习了HTML，CSS以及JavaScript。一周后仿照京东页面做了一个简单的前端网页，直接在Hbuilder运行效果如图：
中间加了一个滑动栏，鼠标放上去就变长方形，这个在京东官网是没有的，是我在王者官网里看到的，就写了一下加进去了，原图效果是这样的：
图片都是直接从官网上直接复制的地址，图标是从Bootstrap图标库里找的，Bootstrap图标库官网：https://icons.getbootstrap.com/#icons
另外，可以在页面左侧加一个服饰展示，我的没有加，这种：
京东代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" >
<style>
*{
/* 全局 */
padding: 0px;
margin: 0px;
list-style: none;
text-decoration: none;
font-size: 12px;
/* color: #; */
}
}
a{
/* 字体颜色 */
color: #999999;
}
.clear{
/* 清除悬浮 */
clear: both;
}
.header{
/* 设置头部高宽 */
width: 100%;
height: 20px;
}
.top{
/* 官网顶部内容 */
width: 100%;
margin: 0px auto;
text-align:center;
font-family:黑体;
font-size:50px;
height:40px;
line-height: 40px;
color:#ffffff;
/* line-hight:50px; */
background-color: #ff4500;
/* padding-left:10px; */
}
.top-box{
/* 顶部盒子 */
/* 定位(河南)那一行*/
width: 1190px;
margin: 0px auto;
/* background-color:#ccc; */
color: #999999;/* 字体 */
}
.top-left{
width: 29%;
height: 30px;
line-height: 30px;
padding-left:1% ;
float: left;
vertical-align: middle;
}
#loc-i{
/* 定位图标loction */
color: #f10215 !important;
float: left;
height: 26px;
line-height: 26px;
margin-right: 5px;
}
.top-left .loc{
/* 河南 */
width: 28px;
height: 28px;
line-height: 28px;
float: left;
}
.top-left .loc2{
/* 切换到企业版 */
width: 100px;
height: 28px;
line-height: 28px;
float: left;
}
.top-right{
/* 你好部分 */
width: 69%;
height: 30px;
line-height: 30px;
padding-left: 1%;
/* background-color: cornflowerblue; */
float: left; /* 为啥? */
}
.top-right ul{
/* 你好部分列表 */
float: right;/* 靠右浮动 */
margin-right: 5px;
}
.top-right li{
/* 你好部分 元素 */
float: left;
}
.navbar{
/* 导航栏 */
width: 1190px;
height: 140px;
margin: 0px auto;
/* background-color: blueviolet; */
}
.nav-log{
/* 导航部分图标 */
margin-top: 0px;
width: 190px;
height: 142px;
background-color: #fff;
float: left;
}
.nav-box{
/* 导航盒子 */
width: 1000px;
float: left;
background-color: coral;
height: 140px;
}
.nav-box-1{
/* 搜索框,购物车,二维码所在盒子 */
height: 80px;
background-color: #fff;
}
.nav-font{
/* 搜索框下文字部分 */
width: 80%;
height: 20px;
line-height: 30px;
padding-left: 6%;
/* background-color: cornflowerblue; */
float: left; /* 为啥? */
}
.nav-font ul{
/* 文字列表 */
margin-top:0px;
margin-right: 5px;
}
.nav-font li{
/* 文字 元素 */
float: left;
}
.nav-box-2{
/* 搜索框下下面的一行 */
height: 60px;
background-color: #fff;
}
.nav-search{
/* 搜索框内设置 */
width: 675px;
height: 50px;
float: left;
background-color: #fff;
}
.nav-shoppingcart{
/* 购物车部分 */
width: 135px;
height: 60px;
float: left;
/* background-color: blue; */
}
.nav-qrcode{
/* 二维码 */
width: 190px;
height: 60px;
float: left;
background-color: #fff;
}
.nav-font{
/* 搜索框下面文字 */
width:
}
.line{
/* 顶部字块分割线(竖线) */
width: 1px;
height: 10px;
margin: 10px 10px 10px;
background-color: #999999;
overflow: hidden;
}
.text-red{
/* 红色字体文本 */
color: #f10215;
}
.text-w{
color:#fff;
}
.text-999{
color: #999999;
}
.m-2{
margin-top: 2px;
}
.text-right{
text-align: right;
}
.nav-search-box{
/* 搜索框盒子 */
width: 550px;
height: 36px;
background-color: #f10215;
margin-top: 12px ;
margin-left: 60px ;
padding:2px 2px;
}
.nav-search-box .btn{
/* 搜索按钮 */
background-color:#f10215 ;
border-style: none;
margin-top:7px;
margin-left:20px;
}
.nav-search-item{
/* 搜索框里面 */
height: 36px;
width: 480px;
background-color: #fff;
padding-right: 15px;
float:left;
}
.nav-search-item input{
/* 搜索框输入 */
border-style: none;
outline:none;
height: 34px;
width:360px ;
margin-left: 12px;
}
.nav-search-item input:focus{
border-style:none;
outline:none;
}
.nav-search-item svg{
/* 拍照识别图标 */
float: right;
margin-top: 5px;
}
.nav-shoppingcart-item{
/* 购物部分盒子 包含图标 数字 文字 */
width: 131px;
height: 36px;
line-height: 36px;
/* background-color: #fff; */
border: #ccc solid 1px;
margin-top: 12px;
}
.nav-shoppingcart-item .cart-icon{
/* 购物车图标 */
margin-left: 15px;
width: 20px;
height: 36px;
line-height: 36px;
padding-top: 5px;
color: #f10215;
font-weight: bolder;
float: left;
}
.nav-shoppingcart-item .cart-num{
/* 圈1所在的盒子 */
width: 20px;
height: 15px;
line-height: 15px;
text-align: center;
color: #fff;
background-color: #f10215;
float: left;
border-radius: 7px;
display: inline;
/* z-index:; */
/* 定位 */
position:relative;
top:3px;
left:-10px;
}
.nav-shoppingcart-item .title{
/* 我的购物车 */
float: left;
width: 60px;
height: 36px;
line-height: 36px;
color: #f10215;
text-align: center;
}
/* 项目 部分*/
.prods{
width:900px;
margin:20px auto;
background-color: #ccc;;
}
li{
list-style:none;
}
body{
background-color: #ccc;
}
/* 项目列表 */
.prods-list{
width: 100%;
height: 1005;
overflow: hidden;
}
/* 单项目盒子 */
.prods>.prods-list>li{
/* 直接用到li */
float: left;
}
.prods-item{
weight:200px;
height:300px;
background-color: #fff;
border-radius:4px;
margin-right: 10px;
margin-bottom:10px;
}
/* 盒子内图片 */
.item-img{
weight:150px;
height:150px;
margin:15px 25px;
}
.item-img img{
width:150px;
height:150px;
}
.item-name{
width:180px;
margin:10px 10px;
font-size:14px;
color:#666;
}
.item-tag{
font-size: 12px;
float:left;
background-color: #f10215;
color: #fff;
padding: 1px 4px;
border-radius: 4px;
margin-right: 10px;
}
.item-price{
width: 180px;
margin: 10px 10px;
color: #f10215;
font-size: 16px;
font-weight: 900;
}
.item-price span{
font-size: 10px;
}
.hide{
display: none;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left 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 {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 0px ;
background: url(img/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(function(){
//1.鼠标经过左侧的小li
$("#left li").mouseover(function(){
//2.得到当前小li的索引号
var index=$(this).index();
console.log(index);
//3.让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
//4.让其余的图片（就是其他的兄弟）隐藏起来
// $("content div").eq(index).siblings().hide();
//链式编程
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<!-- 头部 start -->
<header class="header" ><!-- 头部 -->
<div class="top">
<!-- 顶部 star -->
<h3>质量至上、诚信经营、科技创新、合作共赢</h3></div>
<div class="top-box">
<div class="top-left">
<div id="loc-i"><!-- 定位图标 -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg></div>
<div class="loc">河南</div>
<div class="loc2">切换到企业版</div>
<div class="clear"></div>
</div>
<div class="top-right">
<ul>
<li><a href="#">我的订单</a></li>
<li class="line"></li>
<li><a href="#">我的国货
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg></a></li>
<li class="line"></li>
<li><a href="#" class="text-red">企业采购</a></li>
<li class="line"></li>
<li ><a href="#">商家服务</a></li>
<li class="line"></li>
<li><a href="#">网站导航
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg></a></li>
<li class="line"></li>
<li><a href="#">手机国货</a></li>
<li class="line"></li>
<li><a href="#">网站无障碍</a></li>
</ul>
</div>
</div>
<!-- 顶部 end -->
<div class="clear"></div>
<div class="navbar">
<!-- log star -->
<div class="nav-log">
<!-- 京东图片 -->
<a href="#">
<img src="https://pro.upload.logomaker.com.cn/2019/11/30/uoB6XARPr0t2.jpg" width="150px" height="100px" />
</a>
</div>
<!-- log end -->
<div class="nav-box">
<div class="nav-box-1">
<div class="nav-search">
<div class="nav-search-box">
<!-- 搜索框 start-->
<div class="nav-search-item">
<input type="text"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-camera text-999 text-right" viewBox="0 0 16 16"><path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/><path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg>
</div>
<!-- 搜索框 end -->
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search text-w" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
</div>
</div>
<!-- 购物车 start-->
<div class="nav-shoppingcart">
<div class="nav-shoppingcart-item">
<div class="cart-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</div>
<div class="cart-num">1</div>
<div class="title">我的购物车</div>
</div>
</div>
<!-- 二维码 -->
<div class="nav-qrcode">
<a href="https://www.jd.com/?country=USA">
<img src="https://img12.360buyimg.com/img/jfs/t1/67481/15/565/28110/5cec9234E71c47244/dc4cf353fd96922e.png.avif" width="70px" height="70px" />
</a>
</div>
<div class="nav-font">
<ul>
<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>
</div>
<div class="clear"></div>
<div class="nav-box-2"></div>
</div>
</div>
<div class="clear"></div>
<!-- <script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作：
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/m1.jpg" alt="" class="small">
<img src="../img/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/l1.jpg" alt="" class="small">
<img src="../img/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/c1.jpg" alt="" class="small">
<img src="../img/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/w1.jpg" alt="" class="small">
<img src="../img/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/z1.jpg" alt="" class="small">
<img src="../img/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/h1.jpg" alt="" class="small">
<img src="../img/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/t1.jpg" alt="" class="small">
<img src="../img/t.png" alt="" class="big">
</a>
</li>
</ul>
</div> -->
</header>
<!-- 头部 end -->
<!-- 商品 start -->
<!-- <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>
<div id="content">
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/O1CN01iV6fte1TX7qqWcqxj_!!6000000002391-0-yinhe.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/4028944728/O1CN01mkQD7d1knTSaCZlFm_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i4/2216491652219/O1CN01bK8WFG1SGLkW4ijFK_!!2216491652219.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/324483026/O1CN01Xq4g7G1YDxNQ3D2Aa_!!324483026.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i2/1994050062/O1CN01H22i5z1CKRRBYx8vo_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/2208326637829/O1CN01CO8rCo27hjfWrKftp_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/1659547319/O1CN01LWMWXg23w9QBcZPLQ_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i4/2944959775/O1CN01UHo4ts2M50QARlNOV_!!2944959775.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/O1CN01WftgR21snUP7RJpir_!!6000000005811-0-yinhe.jpg" width="200" height="250" /></a>
</div>
</div>
</div> -->
<script src="jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作：
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/94575/30/34010/18908/635cbfd9E2d956040/6801672d09291350.jpg.avif" alt="" class="small">
<img src="https://img30.360buyimg.com/popshop/jfs/t21946/36/177650036/4805/401d0ec0/5b00f32cNe24f6c24.jpg.avif" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img10.360buyimg.com/n7/jfs/t1/88243/12/33377/40850/6507bc91F46ae115a/08c6828432d84372.jpg.avif" alt="" class="small">
<img src="https://img30.360buyimg.com/popshop/jfs/t4054/335/2622621846/5202/b18a48cd/58aceb68N67305fd6.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img10.360buyimg.com/n7/jfs/t1/128511/22/38126/116703/65140513F49d5f4f7/e3a3951648fa2757.jpg.avif" alt="" class="small">
<img src="https://img30.360buyimg.com/popshop/jfs/t1/215270/24/24074/2504/6390af55E9ce5ae2b/f6c737543b4115aa.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img11.360buyimg.com/n1/s190x190_jfs/t1/208128/4/34596/88175/6513d470Fc477524c/b4bd9124839cafec.jpg" alt="" class="small">
<img src="https://img30.360buyimg.com/popshop/jfs/t1/207075/23/15652/4656/61e0f71dE1b91e589/0852ee7209f82c8f.jpg.avif" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img11.360buyimg.com/n7/jfs/t1/170339/26/23596/120680/6194a979E3e2dbf4b/d86eb876e606a19b.jpg.avif" alt="" class="small">
<img src="https://img30.360buyimg.com/popshop/jfs/t1/124168/31/34203/4794/64af9525F36ffa66a/e7117cb57025007c.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img12.360buyimg.com/n7/jfs/t1/122535/27/20626/454972/61e11628E1626cd87/e5b7c39bf2361467.jpg.avif" alt="" class="small">
<img src="https://www.yunnanbaiyao.com.cn/uploadDir/png/20181225/1545731315586.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="https://img12.360buyimg.com/n7/jfs/t1/59683/32/22095/107234/633693a6E0ac0b5ca/d1973031d077c57d.jpg.avif" alt="" class="small">
<img src="https://www.mxbc.com/assets/img/%E8%9C%9C%E9%9B%AAlogo.svg" alt="" class="big">
</a>
</li>
</ul>
</div>
<div class="prods">
<ul class="prods-list">
<li class="prods-item">
<div class="item-img">
<img src="https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/171323/34/41307/77818/64f6fd26Fb020c62f/3754b8f22e2aa26a.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东国际</p>
奥康包包女包百搭牛皮女士包包通勤水桶包大容量轻奢单肩斜挎包女式托特包生日礼物送女友老婆
</div>
<div class="item-price"><span>￥</span>239.00</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/111592/37/34601/82486/645afb37F248dad19/245c049733fa9be5.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东国际</p>
森汽新款小众设计碎银子珍珠925银碎银几两项链女锁骨链礼物送女友 A8Y703碎银珍珠项链
</div>
<div class="item-price"><span>￥</span>159.00</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img13.360buyimg.com/n1/jfs/t1/95950/9/44596/69594/6513d7caF272d94fe/47bc01089249ad4d.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东超市</p>
理肤泉新B5多效修复乳霜15ml（尝鲜装）
</div>
<div class="item-price"><span>￥</span>48.40</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img14.360buyimg.com/n7/jfs/t1/185965/1/39589/114666/6518416dF6e6875e6/09ce47c537f688de.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东超市</p>
鸿星尔克可热外套风衣男秋季男士石墨烯阿蒲同款运动夹克三防软壳运动服 正黑 防水防污防油抑菌 2XL
</div>
<div class="item-price"><span>￥</span>299.00</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/189490/17/34103/182947/641b282cF9004c320/41427c045c8e6f67.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东国际</p>
络思家用书房卧室书桌书架学习桌简易书桌收纳靠墙长桌子工作台P5 双层黄衫木色160cm
</div>
<div class="item-price"><span>￥</span>218.00</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img10.360buyimg.com/n7/jfs/t1/220821/4/33032/99658/649292d3F64e8eac2/a9a5b7ccf283b38b.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东超市</p>
白象 方便面 汤好喝招牌猪骨汤面 泡面 五连包105.5g*5包
<div class="item-price"><span>￥</span>2499.00</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img13.360buyimg.com/n7/jfs/t1/196007/36/27896/160720/62ecb7ddE8f3e906f/33eb0814ed5ab28a.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东国际</p>
活力28洗衣液深层洁净衣物去污渍护色防串色 薰衣草香味持久留香家庭装 2kg*2袋【8斤】
</div>
<div class="item-price"><span>￥</span>23.90</div>
</li>
<li class="prods-item">
<div class="item-img">
<img src="https://img13.360buyimg.com/n7/jfs/t1/9861/36/22953/171767/651efc8eF9c126afe/cdbe6adb524ada8d.jpg.avif"/>
</div>
<div class="item-name">
<p class="item-tag">自营</p>
<p class="item-tag hide">京东国际</p>
旺仔牛奶原味125ml*24 礼盒装中秋节送礼送女友整箱经典牛奶早餐
</div>
<div class="item-price"><span>￥</span>79.00</div>
</li>
</ul>
</div>
</body>
王者滑动栏代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>王者荣耀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(img/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作：
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/m1.jpg" alt="" class="small">
<img src="../img/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/l1.jpg" alt="" class="small">
<img src="../img/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/c1.jpg" alt="" class="small">
<img src="../img/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/w1.jpg" alt="" class="small">
<img src="../img/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/z1.jpg" alt="" class="small">
<img src="../img/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/h1.jpg" alt="" class="small">
<img src="../img/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/t1.jpg" alt="" class="small">
<img src="../img/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
服饰展示代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left 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 {
background-image: url(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(function(){
//1.鼠标经过左侧的小li
$("#left li").mouseover(function(){
//2.得到当前小li的索引号
var index=$(this).index();
console.log(index);
//3.让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
//4.让其余的图片（就是其他的兄弟）隐藏起来
// $("content div").eq(index).siblings().hide();
//链式编程
$("#content div").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>
<div id="content">
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/O1CN01iV6fte1TX7qqWcqxj_!!6000000002391-0-yinhe.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/4028944728/O1CN01mkQD7d1knTSaCZlFm_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i4/2216491652219/O1CN01bK8WFG1SGLkW4ijFK_!!2216491652219.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/324483026/O1CN01Xq4g7G1YDxNQ3D2Aa_!!324483026.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i2/1994050062/O1CN01H22i5z1CKRRBYx8vo_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/2208326637829/O1CN01CO8rCo27hjfWrKftp_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i3/1659547319/O1CN01LWMWXg23w9QBcZPLQ_!!0-item_pic.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/i4/2944959775/O1CN01UHo4ts2M50QARlNOV_!!2944959775.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="https://img.alicdn.com/bao/uploaded/O1CN01WftgR21snUP7RJpir_!!6000000005811-0-yinhe.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>```
3139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
