这里轮播图用了一些js的东西其余的全部都是css
window.onload=function(){
//获取这个ul
var imglist = document.getElementById("imglist");
//获取所有的img标签
var imgarr = document.getElementsByName("lbimg");
//控制改变ul css中width属性
imglist.style.width = imgarr.length*520+"px";
// 设置这个导航栏为居中的位置 就是让div.style.width - navdiv.style.width 的二分之一
//获取最外层div
var box1 = document.getElementById("box1");
//获取navdiv
var navdiv = document.getElementById("navdiv");
//这里需要用到offsetwidth这个属性来获取 元素的整体宽度 包括内容 内边距和边框 且直接是数值
navdiv.style.left =(box1.offsetWidth - navdiv.offsetWidth)/2+"px";
//获取所有的a
var allA = document.getElementsByName("imga");
//设置一个索引 index
var index =0;
allA[index].style.backgroundColor="#FF6200";//这里是设置的是默认页面的第一张图片就是黑色的 因为刷新和刚打开的时候 显示的是一张图p
// 设置功能点击a能够翻到对应的图片
// 对a进行遍历
for(var j = 0;j<allA.length;j++){
/*
在这个循环中需要给所有的a设定单击响应函数 点a会跳转到不同的图片
this 就代表此时点击的a是哪个
*/
//所以给a添加一个num属性 将a的索引赋值给这个num 就代表的是第几个图片
allA[j].num = j;
//给a添加相应函数
allA[j].onclick=function(){
//在点击响应函数触发后立刻关闭定时器
clearInterval(timer);
//这个使用的index 实在全局里面定义的index 就是一个索引 是一个变量 将this.num代表的是现在点击的a的索引是几 赋值给index
index = this.num; //这里就是把现在点击时的索引赋值给index index 就会向下执行 改变电机的颜色
setA();
//引入动画翻页函数
move(imglist,-520*index,20,"left",function(){
//单击响应函数运行结束开启定时器
changeSet();
},3000);
}
}
//开启定时器
changeSet();
//如果只在开启定时器会与 单击响应函数冲突 所以我们在点击时关闭定时器 在单击响应函数结束后 再开启
//定义以一个方法 就是当选中a对应的图片时 会变成黑色
function setA(){
/*因为设置的最后一张图片与第一张相同
如果index = 最后一张图片的索引时
我们让index = 0
然后通过css修改left 就是整体把这个ul又放到最后面
*///将这个判断放入setA（）方法中暂时没有理解透彻 认为是这个判断需要在index在被第一次被赋值的时候执行
//这里的判断 就是当index 小于等于 img的长度-1（-1是因为 最后一张设置的是第一张照片） 就让index重新等于0 这时给left赋值为0 就从第一个继续开始运转了
//这里-1 的理解 就是除下最后一张照片设置为了第一张照片 进行到就是index = 5的时候 就准备进行转换
if(index >= imgarr.length-1){
index = 0;
imglist.style.left = 0;
}
//遍历数组A
for(var i =0;i<allA.length;i++){
//每一个a元素 都给他为空串 不改变颜色
allA[i].style.backgroundColor = "";
}//理解的意思 就是 让所有的a的颜色都先为他本身的颜色 这个的改变等级比较高 所有设置为空串为他本身的颜色
//当idnex 就是点击的哪个a 改变他的颜色为黑色 这个等级和空串改变它的颜色为本身的颜色二一样高 后来设置的用index
//改的就是点击时的那个a的颜色 是因为覆盖了原来给他定义的元素颜色 然后将这个方法放在单机相应函数中
//点击就会循环执行
allA[index].style.backgroundColor="#FF6200";
}
/*完成图片自己播放的功能 就是给他绑定一个定时器*/
//创建一个方法 就是开启定时器的方法
//将这个定时器的名字放在全局里面
var timer;
function changeSet(){
timer = setInterval(function(){
//要使图片自动播放就是改变他的index的值
index++;//使index进行自增
//直接调用会有一个问题就是 当函数执行完之后index自增到最大 会一直向后进行增加left值
//这里需要判断 index不能超过imgarr 的长度
//为了更好的效果 必须设置轮转播放一直向左走 就将最后一张图片换成第一张图片 然后让其他的图片也跟着缓过来
//使用模运算 就是让index 和数组的长度进行模运算 当余数是从0 %5 = 0 1%5=1 2%5=2 当index最大就是与数组的长度相同时余数为0 回到第一次的情况
index %= imgarr.length;
//调用move函数
move(imglist,-520*index,20,"left",function(){
setA();
});
},3000);
}
function move(obj,target,speed,attr,callback){
// 通过盒子的位置 和目标位置的比较判断 speed的正负
//当前位置 小于目标位置 说明向右运动speed为正值
//当前位置大于目标位置 说明向左移动 speed为负值
var dqleft = parseInt(getstyle(obj,attr));
if(dqleft>target){
speed = -speed;
}
//把定时器的名字设置为 obj.timer 就是为了在每个不同的元素调用时 互不影响使用
//关闭定时器
clearInterval(obj.timer);
//设置一个定时器
obj.timer = setInterval(function(){
//使盒子移动起来 就是改变盒子的left值
//获取当前盒子的left值
var oldleft = parseInt(getstyle(obj,attr));
//改变盒子的left值
var newleft = oldleft +speed;
//避免出现 盒子的位置 比目标值大 还继续执行向右运动
//当 speed 为正值时 向右运动 盒子的位置比目标的位置还大
if(speed>0 &&newleft>target || speed<0 &&newleft<target ){
newleft = target;
}
//将改变后的值 赋值给box1 的left
obj.style[attr]= newleft +"px";
//进行一个判断 盒子在 500的位置 就停下来
if(newleft == target){
clearInterval(obj.timer);
//当执行完毕后 调用回调函数
callback && callback();
}
},3);
}
//获取这个ul
var imglist2 = document.getElementById("imglist2");
//获取所有的img标签
var imgarr2 = document.getElementsByName("lb02img");
//控制改变ul css中width属性
imglist2.style.width = imgarr2.length*240+"px";
//设置一个索引 index
var index2 =0;
//开启定时器
changeSet2();
//如果只在开启定时器会与 单击响应函数冲突 所以我们在点击时关闭定时器 在单击响应函数结束后 再开启
/*完成图片自己播放的功能 就是给他绑定一个定时器*/
//创建一个方法 就是开启定时器的方法
//将这个定时器的名字放在全局里面
var timer2;
function changeSet2(){
timer2 = setInterval(function(){
//要使图片自动播放就是改变他的index的值
index2++;//使index进行自增
//直接调用会有一个问题就是 当函数执行完之后index自增到最大 会一直向后进行增加left值
//这里需要判断 index不能超过imgarr 的长度
//为了更好的效果 必须设置轮转播放一直向左走 就将最后一张图片换成第一张图片 然后让其他的图片也跟着缓过来
//使用模运算 就是让index 和数组的长度进行模运算 当余数是从0 %5 = 0 1%5=1 2%5=2 当index最大就是与数组的长度相同时余数为0 回到第一次的情况
index2 %= imgarr2.length;
//调用move函数
move2(imglist2,-240*index2,20,"left",function(){
setA2()
});
},3000);
}
function move2(obj2,target2,speed2,attr2,callback2){
// 通过盒子的位置 和目标位置的比较判断 speed的正负
//当前位置 小于目标位置 说明向右运动speed为正值
//当前位置大于目标位置 说明向左移动 speed为负值
var dqleft = parseInt(getstyle2(obj2,attr2));
if(dqleft>target2){
speed2 = -speed2;
}
//把定时器的名字设置为 obj.timer 就是为了在每个不同的元素调用时 互不影响使用
//关闭定时器
clearInterval(obj2.timer2);
//设置一个定时器
obj2.timer2 = setInterval(function(){
//使盒子移动起来 就是改变盒子的left值
//获取当前盒子的left值
var oldleft2 = parseInt(getstyle2(obj2,attr2));
//改变盒子的left值
var newleft2 = oldleft2 +speed2;
//避免出现 盒子的位置 比目标值大 还继续执行向右运动
//当 speed 为正值时 向右运动 盒子的位置比目标的位置还大
if(speed2>0 &&newleft2>target2 || speed2<0 &&newleft2<target2 ){
newleft2 = target2;
}
//将改变后的值 赋值给box1 的left
obj2.style[attr2]= newleft2 +"px";
//进行一个判断 盒子在 500的位置 就停下来
if(newleft2 == target2){
clearInterval(obj2.timer2);
//当执行完毕后 调用回调函数
callback2 && callback2();
}
},3);
}
function setA2(){
/*因为设置的最后一张图片与第一张相同
如果index = 最后一张图片的索引时
我们让index = 0
然后通过css修改left 就是整体把这个ul又放到最后面
*///将这个判断放入setA（）方法中暂时没有理解透彻 认为是这个判断需要在index在被第一次被赋值的时候执行
//这里的判断 就是当index 小于等于 img的长度-1（-1是因为 最后一张设置的是第一张照片） 就让index重新等于0 这时给left赋值为0 就从第一个继续开始运转了
//这里-1 的理解 就是除下最后一张照片设置为了第一张照片 进行到就是index = 5的时候 就准备进行转换
if(index2 >= imgarr2.length-1){
index2 = 0;
imglist2.style.left = 0;
}
}
//设置一个函数用来获取需要的属性
function getstyle2(obj2,name2){
//为了浏览器的兼容性
if(window.getComputedStyle){
return getComputedStyle(obj2,null)[name2];
}else{
return obj2.currentStyle(name2);
}
}
//获取这个ul
var imglist3 = document.getElementById("imglist3");
//获取所有的img标签
var imgarr3 = document.getElementsByName("lb03img");
//控制改变ul css中width属性
imglist3.style.width = imgarr3.length*240+"px";
//设置一个索引 index
var index3 =0;
//开启定时器
changeSet3();
//如果只在开启定时器会与 单击响应函数冲突 所以我们在点击时关闭定时器 在单击响应函数结束后 再开启
/*完成图片自己播放的功能 就是给他绑定一个定时器*/
//创建一个方法 就是开启定时器的方法
//将这个定时器的名字放在全局里面
var timer3;
function changeSet3(){
timer3 = setInterval(function(){
//要使图片自动播放就是改变他的index的值
index3++;//使index进行自增
//直接调用会有一个问题就是 当函数执行完之后index自增到最大 会一直向后进行增加left值
//这里需要判断 index不能超过imgarr 的长度
//为了更好的效果 必须设置轮转播放一直向左走 就将最后一张图片换成第一张图片 然后让其他的图片也跟着缓过来
//使用模运算 就是让index 和数组的长度进行模运算 当余数是从0 %5 = 0 1%5=1 2%5=2 当index最大就是与数组的长度相同时余数为0 回到第一次的情况
index3 %= imgarr3.length;
//调用move函数
move3(imglist3,-240*index3,20,"left",function(){
setA3()
});
},3000);
}
function move3(obj3,target3,speed3,attr3,callback3){
// 通过盒子的位置 和目标位置的比较判断 speed的正负
//当前位置 小于目标位置 说明向右运动speed为正值
//当前位置大于目标位置 说明向左移动 speed为负值
var dqleft3 = parseInt(getstyle3(obj3,attr3));
if(dqleft3>target3){
speed3 = -speed3;
}
//把定时器的名字设置为 obj.timer 就是为了在每个不同的元素调用时 互不影响使用
//关闭定时器
clearInterval(obj3.timer3);
//设置一个定时器
obj3.timer3 = setInterval(function(){
//使盒子移动起来 就是改变盒子的left值
//获取当前盒子的left值
var oldleft3 = parseInt(getstyle3(obj3,attr3));
//改变盒子的left值
var newleft3 = oldleft3 +speed3;
//避免出现 盒子的位置 比目标值大 还继续执行向右运动
//当 speed 为正值时 向右运动 盒子的位置比目标的位置还大
if(speed3>0 &&newleft3>target3 || speed3<0 &&newleft3<target3 ){
newleft3 = target3;
}
//将改变后的值 赋值给box1 的left
obj3.style[attr3]= newleft3 +"px";
//进行一个判断 盒子在 500的位置 就停下来
if(newleft3 == target3){
clearInterval(obj3.timer3);
//当执行完毕后 调用回调函数
callback3 && callback3();
}
},3);
}
function setA3(){
/*因为设置的最后一张图片与第一张相同
如果index = 最后一张图片的索引时
我们让index = 0
然后通过css修改left 就是整体把这个ul又放到最后面
*///将这个判断放入setA（）方法中暂时没有理解透彻 认为是这个判断需要在index在被第一次被赋值的时候执行
//这里的判断 就是当index 小于等于 img的长度-1（-1是因为 最后一张设置的是第一张照片） 就让index重新等于0 这时给left赋值为0 就从第一个继续开始运转了
//这里-1 的理解 就是除下最后一张照片设置为了第一张照片 进行到就是index = 5的时候 就准备进行转换
if(index3 >= imgarr3.length-1){
index3 = 0;
imglist3.style.left = 0;
}
}
//设置一个函数用来获取需要的属性
function getstyle3(obj3,name3){
//为了浏览器的兼容性
if(window.getComputedStyle){
return getComputedStyle(obj3,null)[name3];
}else{
return obj2.currentStyle(name3);
}
}
//设置一个函数用来获取需要的属性
function getstyle(obj,name){
//为了浏览器的兼容性
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle(name);
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝页面</title>
<style>
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/* 设置头部导航栏的样式
*/
body{
width: 100%;
height: 3000px;
background-size: 100% 100%;
background-position: 0 0;
background-image: url("img/bj.png");
background-attachment: fixed;
}
#nav-01{
width: 100%; /*设置宽高*/
height: 30px;
background-color: #f5f5f5; /*设置背景颜色*/
line-height: 30px;/*设置文本的间距*/
/* text-align: center; 文本居中显示*/
position: relative;
font-size: 12px;
}
/*去除项目符号*/
li{
list-style-type: none;
}
/* 去除a的下划线 变为黑色 */
a{
text-decoration: none;
color:black;
}
#nav-02 {
position: absolute;
left: 150px;
z-index:999;
}
#nav-02 li{
/*每一个li标签的距离*/
padding-left: 20px;
/*设置浮动 将li变为横向排列*/
float: left;
/*上下无间距 左右间距为10*/
margin: 0px 10px;
}
#nav-02 a:hover{
color: #ff5a00;
}
#nav-02 li:hover #nav-03{
/*鼠标划过时 更改display的属性显示*/
display: flex;
}
#nav-03 {
/*使这个li消失*/
display: none;
/*绝对定位*/
position: absolute;
/*这个盒子的颜色*/
background-color: #ffffff;
/*这个盒子距离他的父元素的 边距为0*/
left: 0;
/*这个盒子的宽度*/
width: 0;
}
#nav-03 a:hover{
color:black;
}
#nav-03 li{
/*每一个li标签的宽度 */
width: 70px;
/* 高度 */
height: 30px;
/* 内边距 移动 */
padding-left:20px;
/* 文本之间的间距 */
line-height: 30px;
background-color: #fff;
/*将文本排列到左边 */
text-align: left;
}
#nav-03 li:hover{
/* 当鼠标经过时的背景颜色 */
background-color: #f4f4f4;
}
#nav-05{
position: absolute;
/*距离右边的距离*/
right: 120px;
z-index:999;
}
#nav-05 a:hover{
color: red;
}
#nav-05 li{
padding-right: 20px;
color: #6c6c6c;
float: left;
}
#nav-05 li:hover #nav-06{
display: block;
}
#nav-06{
display: none;
position: absolute;
background-color: #ffffff;
width: 0px;
}
#nav-06 li{
width: 85px;
height: 30px;
padding-right:20px;
line-height: 30px;
background-color: #fff;
text-align: left;
}
#nav-06 li:hover{
background-color: #f4f4f4;
}
#nav-06 a:hover{
color: black;
}
/* 导航栏结束 */
#se-01 {
/*设置宽高*/
width: 100%;
height: 120px;
line-height: 30px;/*设置文本的间距*/
top: 25px;
position: relative;
}
#se-00{
position: absolute;
left: 250px;
}
#se-04 img{
position: absolute;
top: 10px;
width: 80px;
height: 60px;
cursor: pointer;
}
#se-03{
position: absolute;
left: 950px;
top: -20px;
cursor: pointer;
}
#se-03 img{
height: 100px;
width: 90px;
}
#se-05{
/* 相对定位 */
position: relative;
/*宽度*/
width: 741px;
/* 高 */
height: 42px;
/* 距离左边盒子的距离 */
left: 160px;
/*是指圆角*/
border-radius: 20px;
/* 设置到盒子上方的距离 */
margin-top: 12px;
/* 设置边框的宽度颜色 */
border: 1px solid #ff5000;
background-color: white;
}
#se-07 span{
padding:20px;
line-height: 40px;
text-align: center;
}
#se-07 span a{
cursor: default;
}
#se-07 li{
display: none;
}
#se-08{
position: absolute;
left:70px;
top:6px;
}
#se-08 input{
width: 580px;
height: 30px;
/*input的样式*/
background-position: 10px 10px;
background-size: 20px 20px;
/*取消获得焦点 就发光*/
outline: none;
/*隐藏其他几个边框*/
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
/*设置这个input左边框为半透明*/
/* opacity: 0.5; */
border-left-color:#fefefe;
}
#se-09{
position: absolute;
margin-top: -36px;
width: 73px;
height: 34px;
/*更改盒子外层样式*/
border-radius: 20px;
right: 2px;
/* 渐变背景 */
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
background-repeat: repeat-x;
/*设置字体*/
font-size: 20px;
font-weight: 500;
color: #FFF;
/*设置文本*/
line-height: 34px;
/*居中显示*/
text-align: center;
/*鼠标变为手*/
cursor: pointer;
/*没有边框*/
border: none;
}
#se-06 {
position: absolute;
font-size: 12px;
left: 165px;
color: #6c6c6c;
}
#se-06 li{
/*每一个li标签的距离*/
padding-left: 5px;
/*设置浮动 将li变为横向排列*/
float: left;
/*上下无间距 左右间距为10*/
margin: 0px 5px;
cursor: pointer;
}
#se-06 :hover{
color: #ff5a00;
}
/* 搜索栏结束 */
#zt-01{
width: 1190px;
height: 2700px;
/*父元素相对定位*/
position: relative;
margin-left: auto;
margin-right: auto;
/*隐藏溢出的部分*/
/* overflow: hidden; */
/*背景颜色*/
background-color: #fff;
/*给边框设置弧度*/
border-radius:15px 15px 15px 15px;
overflow-x:hidden;
}
#ztnav-01{
position: relative;
}
#ztsc{
position: absolute;
left: 55px;
padding-top: 14px;
text-align: center;
font-size: 12px;
color: #FF6200;
}
#ztnav-02{
position: absolute;
left: 210px;
padding-top: 14px;
}
#ztnav-03 li {
float: left;
padding-left: 22px;
font-size: 14px;
}
#ztnav-03 li a:hover{
color: #FF6200;
/* 鼠标悬停 渐变色*/
transition: color .3s;
}
#ztnav-03-1 a{
font-weight: 700;
color: #FF0036;
font-size: 16px;
}
#ztnav-03-2 a{
font-weight: 700;
color: #33c900;
font-size: 16px;
}
/*左侧导航栏*/
#leftnav-01{
position: absolute;
left: 15px;
top: 40px;
line-height: 20px;
font-size: 14px;
font-weight: 400;
}
#leftnav-02 li{
padding-top: 14.5px;
}
#leftnav-02 img{
cursor: text;
}
#leftnav-02 li a{
color: #666;
padding-left:3px;
}
#leftnav-02 span{
padding: 0 4px ;
font-size: 16px;
}
#leftnav-02 li :hover{
/*下划线*/
text-decoration:underline;
color: #FF6200;
}
/*轮播图 */
#box1{
/* 裁剪溢出部分 */
overflow: hidden;
width: 520px;
height: 280px;
position: absolute;
left: 220px;
top: 60px;
/*边角为圆*/
border-radius: 20px;
right: 2px;
}
/*设置ul*/
#imglist{
float: left;
/*开启绝对定位*/
position:absolute;
/* left: 0; */
}
#imglist li{
/*设置li的浮动*/
float: left;
/*设置li的左右外边距，就是让每个照片都有间距*/
/* margin: 0 10px; */
}
/*设置这个导航栏的属性 高度宽度颜色*/
#navdiv{
/* 让这个navdiv居中靠下显示 */
bottom: 15px;
position:absolute;
background-color: rgba(255,255,255,.3);
border-radius: 20px;
}
/* 设置所有a的属性 设置每个a都有元素之间的间隔 在鼠标移动到上面会变色 使这个a的位置为 靠下中间的位置*/
#navdiv a{
/*边角为圆*/
border-radius: 20px;
right: 2px;
/* 设置宽高 */
width: 10px;
height: 10px;
background-color: white;
/*改变内联样式 为块级元素*/
float: left;
/* 设置每一个a的左右间隔 */
margin: 0 5px;
}
/* 设置鼠标移动到a上会变色 */
#navdiv a:hover{
background-color: #FF6200;
}
/*登录盒子*/
#use-01{
border-radius: 20px;
position: absolute;
width: 400px;
height: 510px;
left: 770px;
top: 60px;
background-color: #F3F3F3;
}
#use-02{
height: 100px;
}
#use-02 img{
position: absolute;
/*将这个图片设置为圆形*/
border-radius: 50%;
width: 50px;
height: 50px;
left:180px ;
top: 15px;
cursor: pointer;
}
#use-02 a{
position: absolute;
left:180px ;
top: 70px;
font-size: 12px;
}
#use-02 a :hover{
color:#FF6200 ;
}
#use-03{
height: 50px;
}
#use-03{
height: 75px;
}
#usea{
/*设置相对定位*/
position: relative;
float: left;
width: 120px;
height: 30px;
left: 10px;
/*渐变背景颜色*/
background-image: linear-gradient(to right,#ff5000 0%,#ff9000 100%);
background-repeat: repeat-x;
/*文字的垂直位置*/
line-height: 28px;
/*每一个得距离*/
margin-left:6px;
/*圆角边框*/
border-radius: 4px;
/*文本居中*/
text-align: center;
color: white;
}
#use-04{
position: relative;
left: 10px;
top: -20px;
}
#use-04 img{
width: 380px;
border-radius: 20px;
cursor: pointer;
}
#use-05{
height: 120px;
font-size: 12px;
}
#usemeg-01{
position: relative;
}
#usemeg-02{
margin-top: 10px;
margin-left: 15px;
}
#usediv{
height: 18px;
width: 32px;
line-height: 18px;
background-color: #ffefef;
color: #FF5000;
text-align: center;
font-size: 12px;
font-weight: 700;
float: left;
cursor: pointer;
}
#usemeg-02 a{
color: #6c6c6c;
}
#use-06{
position: relative;
height: 72px;
top: -20px;
}
#use-06 div{
width: 60px;
float: left;
text-align: center;
font-size: 12px;
}
#scbb{
margin-left: 20px;
margin-top: 10px;
}
#scbb img{
width: 28px;
}
#buyroom{
margin-left: 40px;
margin-top: 12px;
}
#buyroom img{
width: 25px;
}
#scbb img:hover{
color: #FF6200;
}
#tianmao{
position:relative;
left: 225px;
top: 350px;
}
#tianmao img{
position:absolute;
top: 2px;
height: 20px;
}
#tianmao a{
font-size: 12px;
color: #999;
position: relative;
margin-left: 80px;
line-height: 22px;
cursor: text;
}
#box2{
left: 220px;
top: 370px;
width: 520px;
height: 200px;
background-color: #F3F3F3;
position: absolute;
border-radius: 20px;
right: 2px;
}
#box2 img{
border-radius: 20px;
right: 2px;
}
#box3{
margin-left: 10px;
margin-top: 10px;
position: absolute;
float: left;
width: 240px;
height:180px;
overflow: hidden;
border-radius: 20px;
left: 2px;
}
#box4{
margin-left: 20px;
margin-top: 10px;
left: 250px;
position: absolute;
float: left;
width: 240px;
height:180px;
overflow: hidden;
border-radius: 20px;
right: 2px;
}
/*设置ul*/
#imglist2{
float: left;
/*开启绝对定位*/
position:absolute;
/* left: 0; */
}
#imglist2 li{
/*设置li的浮动*/
float: left;
/*设置li的左右外边距，就是让每个照片都有间距*/
/* margin: 0 10px; */
}
#imglist3{
float: left;
/*开启绝对定位*/
position:absolute;
/* left: 0; */
}
#imglist3 li{
/*设置li的浮动*/
float: left;
/*设置li的左右外边距，就是让每个照片都有间距*/
/* margin: 0 10px; */
}
/*有好货*/
#yhh{
position: relative;
top: 580px;
left: 25px;
font-size: 24px;
color: #111;
font-weight: bold;
line-height: 24px;
}
#yhh01{
position: relative;
top: 580px;
width: 1170px;
height: 260px;
right: 10px;
}
#yhh01 img{
position: relative;
margin-left: 52px;
float: left;
margin-top: 25px;
border-radius: 20px;
right: 2px;
}
#yhh02 {
cursor: pointer;}
#yhha1{
position: absolute;
top: 210px;
left: 57px;
font-size: 16px;
color: #333333;
line-height: 16px;
cursor: pointer;
}
#yhha1 p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
#yhha1 a:hover{
color: #ff5a00;
}
#yhha2{
position: absolute;
top: 210px;
left: 277px;
font-size: 16px;
color: #333333;
line-height: 16px;
cursor: pointer;
}
#yhha2 p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
#yhha2 a:hover{
color: #ff5a00;
}
#yhha3{
position: absolute;
top: 210px;
left: 520px;
font-size: 16px;
color: #333333;
line-height: 16px;
cursor: pointer;
}
#yhha3 p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
#yhha3 a:hover{
color: #ff5a00;
}
#yhha4{
position: absolute;
top: 210px;
left: 747px;
font-size: 16px;
color: #333333;
line-height: 16px;
cursor: pointer;
}
#yhha4 p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
#yhha4 a:hover{
color: #ff5a00;
}
#yhha5{
position: absolute;
top: 210px;
left: 980px;
font-size: 16px;
color: #333333;
line-height: 16px;
cursor: pointer;
}
#yhha5 p{
margin-top: 8px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 15px;
text-overflow: ellipsis;
width: 182px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
#yhha5 a:hover{
color: #ff5a00;
}
/* 猜你喜欢 个性推荐*/
#cnxh{
position: relative;
top: 630px;
left: 25px;
font-size: 24px;
color: #111;
font-weight: bold;
line-height: 24px;
}
#cnxh01{
position: relative;
top: 620px;
width: 1170px;
height: 280px;
}
#cnxh02{
position: relative;
width: 200px;
height: 280px;
float: left;
margin-left: 30px;
}
#cnxh01 img{
position: relative;
float: left;
margin-top: 25px;
border-radius: 20px;
right: 2px;
}
#cnxha1{
position: absolute;
top: 230px;
cursor: pointer;
width: 200px;
}
#cnxha1 h4{
line-height: 22px;
height: 44px;
font-size: 16px;
color: #7a7a7a;
overflow: hidden
}
#cnxha1 img{
height: 16px;
vertical-align: top;
margin-top: 3px;
margin-right: 2px;
}
#cnxha1 a:hover{
color: #ff5a00;
}
/* end */
#end{
position: relative;
top: 680px;
left: 0px;
text-align: center;
font-size: 30px;
color: #9c9c9c;
}
/* zt-foot */
#zt-foot{
position: relative;
top: 700px;
}
#zt-foot img{
width: 40px;
height: 40px;
cursor: text;
}
#zt-foot01{
position:absolute;
margin-left: 30px;
width: 300px;
height: 100px;
}
#zt-foot span{
position: absolute;
margin-left: 12px;
padding-top: 10px;
font-size: 16px;
font-weight: 800;
color: #515151;
cursor: text;
}
#zt-foot p{
color: #999;
line-height: 21px;
font-size: 12px;
}
#zt-foot a :hover{
color: #ff5a00;
}
#zt-foot02{
position:absolute;
margin-left: 310px;
width: 300px;
height: 100px;
}
#zt-foot03{
position:absolute;
margin-left:610px;
width: 300px;
height: 100px;
}
#zt-foot04{
position:absolute;
margin-left:900px;
width: 300px;
height: 100px;
}
/*页面尾部*/
#body-foot{
height: 180px;
background-color: #ffffff;
margin-top: 20px;
}
#body-foot01{
margin-left: auto;
margin-right: auto;
width: 1190px;
height: 65px;
line-height: 27px;
font-size: 12px;
padding-top: 15px;
}
#body-foot01 a{
color:#6c6c6c;
}
#body-foot01 a:hover{
color: #FF6200;
}
#body-foot01 b{
margin: 0 3px;
font-weight: 400;
color: #ddd;
}
#hr{
width: 1190px;
margin-left: auto;
margin-right: auto;
color: #dddddd;
}
#body-foot02{
width: 1190px;
height: 30px;
margin-left: auto;
margin-right: auto;
line-height: 27px;
font-size: 12px;
}
#body-foot02 a{
margin: 0 3px;
color:#6c6c6c;
}
#body-foot02 a:hover{
color: #FF6200;
}
#body-foot02 b{
margin: 0 3px;
font-weight: 400;
color: #ddd;
}
#body-foot03{
width: 1190px;
height: 30px;
margin-left: auto;
margin-right: auto;
line-height: 27px;
font-size: 12px;
}
#body-foot03 a{
margin: 0 3px;
color:#6c6c6c;
cursor: text;
}
#body-foot03 b{
margin: 0 3px;
font-weight: 400;
color: #ddd;
}
#body-foot04{
width: 1190px;
height: 30px;
margin-left: auto;
margin-right: auto;
line-height: 27px;
font-size: 12px;
}
#body-foot04 a{
margin: 0 1px;
color:#6c6c6c;
cursor: text;
}
#body-foot04 b{
margin: 0 1px;
font-weight: 400;
color: #ddd;
}
</style>
<script type="text/javascript" src="lb-01.js"></script>
</head>
<body>
<div>
<!-- 这个导航栏就是使用无序列表 或者将无序列表内封装上盒子 进行使用 -->
<div id="nav-01">
<ul id="nav-02">
<li>
<li>
<a >中国大陆 <a href="" style="color:#9c9c9c;font: 12px global-iconfont;">v</a> </a>
<div id="nav-03">
<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>
</ul>
</div>
</li>
</li>
<li>
<a href="" style="color: red;">亲，请登录</a>
</li>
<li>
<a href="">免费注册</a>
</li>
<li>
<a href="">手机逛淘宝</a>
</li>
</ul>
<ul id="nav-05">
<li>
<li>
<a href="">我的淘宝 <a href="" style="color:#9c9c9c; font: 12px global-iconfont;">v</a></a>
<div id="nav-06">
<ul>
<li><a href="">已买到的宝贝</a></li>
<li><a href="">我的足迹</a></li>
</ul>
</div>
</li>
</li>
<li><a href="">购物车</a></li>
<li>
<li><a href=""> 收藏夹 <a href="" style="color:#9c9c9c;font: 12px global-iconfont;">v</a></a>
<div id="nav-06">
<ul>
<li><a href="">收藏的宝贝</a></li>
<li><a href="">收藏的店铺</a></li>
</ul>
</div>
</li>
</li>
<li><a href=""> 商品分类</a></li>
<li> <a href="">免费开店</a></li>
<li>
<li><a href="">千牛卖家中心 <a style="color:#9c9c9c;font: 12px global-iconfont;">v</a></a>
<div id="nav-06">
<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>
<li><a href="">电商学习中心</a></li>
</ul>
</div>
</li>
</li>
<li>
<li><a href="">我的客服 <a href="" style="color:#9c9c9c; font: 12px global-iconfont;">v</a></a>
<div id="nav-06">
<ul>
<li><a href="">消费者客服</a></li>
<li><a href="">卖家客服</a></li>
</ul>
</div>
</li>
</li>
</ul>
</div>
<!-- 这个搜索框的 就是盒子的嵌套 为一个大盒子 内分开各个不同的元素为不同的盒子 -->
<div id="se-01" >
<div id="se-00">
<div id="se-04">
<img src="img/logo.jpg" alt="">
</div>
<div id="se-05">
<!-- 中间的搜索框就是 为一个div盒子中嵌套三个盒子 -->
<div id="se-07">
<span><a href="">宝贝 <a href="" style="color:#9c9c9c;font: 12px global-iconfont;">v</a> </a> </span>
<div id=" ">
<ul >
<li><a href="">天猫</a></li>
<li><a href="">店铺</a></li>
</ul>
</div>
</div>
<div id="se-08">
<input type="text" placeholder=" 零食" style=" text-indent:9px;" >
</div>
<div id="se-09">
搜索
</div>
</div>
<div >
<ul id="se-06">
<li>新款连衣裙</li>
<li>四件套</li>
<li>潮流T恤</li>
<li>时尚女鞋</li>
<li>短裤</li>
<li>半身裙</li>
<li>男士外套</li>
<li>墙纸</li>
<li>行车记录仪</li>
<li>新款男鞋</li>
</ul>
</div>
<div id="se-03">
<img src="img/下载.jpg" alt="">
</div>
</div>
</div>
<!-- 搜索栏结束
主题内容大致 就是一个大盒子 里面分装不同的小盒子
-->
<div id="zt-01">
<div id="ztnav-01">
<div id="ztsc">
<h2>主题市场</h2>
</div>
<div id="ztnav-02">
<ul id="ztnav-03">
<li id="ztnav-03-1"><a href="">天猫</a></li>
<li id="ztnav-03-1"><a href="">聚划算</a></li>
<li id="ztnav-03-2"><a href="">天猫超市</a></li>
<li style="font-weight: 700; ">|</li>
<li><a href="">司法拍卖</a></li>
<li><a href="">飞猪旅行</a></li>
<li><a href="">天天特卖</a></li>
<li style="font-weight: 700; ">|</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>
<!-- 主题左侧的导航栏 就是每一行就为一个li标签
使用ul 中的li 来形成的
-->
<div id="leftnav-01">
<ul id="leftnav-02">
<li>
<a href=""><img src="img/nvzhuang.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">女装</a>
<span>/</span>
<a href="">内衣</a>
<span>/</span>
<a href="">家具</a>
</li>
<li>
<a href=""><img src="img/nvxie.png" alt="" style="width: 18px;height: 18px;"></a>
<a href="">女鞋</a>
<span>/</span>
<a href="">男鞋</a>
<span>/</span>
<a href="">箱包</a>
</li>
<li>
<a href=""><img src="img/fushi-muyingwanju-xianxing.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">母婴</a>
<span>/</span>
<a href="">童装</a>
<span>/</span>
<a href="">玩具</a>
</li>
<li>
<a href=""><img src="img/nanzhuang.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">男装</a>
<span>/</span>
<a href="">运动户外</a>
</li>
<li>
<a href=""><img src="img/huabanfuben.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">美妆</a>
<span>/</span>
<a href="">彩妆</a>
<span>/</span>
<a href="">个护</a>
</li>
<li>
<a href=""><img src="img/shouji.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">手机</a>
<span>/</span>
<a href="">数码</a>
<span>/</span>
<a href="">企业礼品</a>
</li>
<li>
<a href=""><img src="img/jiadiandajiadian.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">大家电</a>
<span>/</span>
<a href="">生活电器</a>
</li>
<li>
<a href=""><img src="img/lingshi.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">零食</a>
<span>/</span>
<a href="">生鲜</a>
<span>/</span>
<a href="">茶酒</a>
</li>
<li>
<a href=""><img src="img/jiajuchuju.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">厨具</a>
<span>/</span>
<a href="">收纳</a>
<span>/</span>
<a href="">清洁</a>
</li>
<li>
<a href=""><img src="img/jiajujiafang.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">家纺</a>
<span>/</span>
<a href="">家饰</a>
<span>/</span>
<a href="">鲜花</a>
</li>
<li>
<a href=""><img src="img/tushuyinxiang.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">图书音像</a>
<span>/</span>
<a href="">文具</a>
<span>/</span>
<a href="">家具</a>
</li>
<li>
<a href=""><img src="img/yiyaobaojian.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">医药保健</a>
<span>/</span>
<a href="">进口</a>
</li>
<li>
<a href=""><img src="img/qiche.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">汽车</a>
<span>/</span>
<a href="">二手车</a>
<span>/</span>
<a href="">用品</a>
</li>
<li>
<a href=""><img src="img/fangwufangchan.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">房产</a>
<span>/</span>
<a href="">装修家具</a>
<span>/</span>
<a href="">建材</a>
</li>
<li>
<a href=""><img src="img/shoubiao.png" alt="" style="width: 15px;height: 15px;"></a>
<a href="">手表</a>
<span>/</span>
<a href="">眼镜</a>
<span>/</span>
<a href="">珠宝饰品</a>
</li>
</ul>
</div>
<!-- 轮播图 -->
<div id="box1">
<ul id="imglist">
<li><img src="img/01.jpg" alt="" name="lbimg"></li>
<li><img src="img/02.jpg" alt="" name="lbimg"></li>
<li><img src="img/03.jpg" alt="" name="lbimg"></li>
<li><img src="img/04.jpg" alt="" name="lbimg"></li>
<li><img src="img/05.jpg" alt="" name="lbimg"></li>
<li><img src="img/01.jpg" alt="" name="lbimg"></li>
</ul>
<div id="navdiv">
<a href="javascript:;" name="imga"></a>
<a href="javascript:;" name="imga"></a>
<a href="javascript:;" name="imga"></a>
<a href="javascript:;" name="imga"></a>
<a href="javascript:;" name="imga"></a>
</div>
</div>
<div id="use-01">
<div id="use-02">
<img src="img/use.jpg" alt="">
<a href="#"><strong>Hi,你好！</strong> </a>
</div>
<div id="use-03">
<a href="" id="usea">登录</a>
<a href="" id="usea">注册</a>
<a href="" id="usea">开店</a>
</div>
<div id="use-04" >
<!-- 这是一张图片 -->
<img src="img/useimg.png" alt="">
</div>
<div id="use-05">
<!-- 热点消息 三行 -->
<div id="usemeg-01">
<span style="font-weight: 800;"> 公告</span>
<span> 新鲜事儿都在这里～</span>
</div>
<div id="usemeg-02">
<div id="usediv">规则</div>
<a href=""> 淘宝网疫情影响地区发货时间要求调整公告</a>
</div>
<div id="usemeg-02">
<div id="usediv">热点</div>
<a href=""> 疫情场景淘宝卖家指导手册</a>
</div>
<div id="usemeg-02">
<div id="usediv">热点</div>
<a href=""> 淘宝平台打击流量造假、黑公关、网络水军公告</a>
</div>
</div>
<div id="use-06">
<div id="scbb">
<a href="">
<img src="img/scbb.png" alt="">
<p>收藏的宝贝</p>
</a>
</div>
<div id="buyroom">
<a href="">
<img src="img/buyroom.png" alt="">
<p>买过的店铺</p>
</a>
</div>
<div id="buyroom">
<a href="">
<img src="img/scroom.png" alt="">
<p>收藏的店铺</p>
</a>
</div>
<div id="buyroom">
<a href="">
<img src="img/jilu.png" alt="" >
<p>我的足迹</p>
</a>
</div>
</div>
</div>
<!-- 第二个轮播图 -->
<div id="tianmao">
<img src="img/天猫.png" alt="">
<a > 理想生活上天猫</a>
</div>
<div id="box2">
<div id="box3"> <!-- 001 004 删除-->
<ul id="imglist2">
<li><img src="img/002.jpg" alt="" name="lb02img"></li>
<li><img src="img/003.jpg" alt="" name="lb02img"></li>
<li><img src="img/005.jpg" alt="" name="lb02img"></li>
<li><img src="img/006.jpg" alt="" name="lb02img"></li>
<li><img src="img/002.jpg" alt="" name="lb02img"></li>
</ul>
</div>
<div id="box4">
<ul id="imglist3">
<li><img src="img/007.jpg" alt="" name="lb03img"></li>
<li><img src="img/008.jpg" alt="" name="lb03img"></li>
<li><img src="img/009.jpg" alt="" name="lb03img"></li>
<li><img src="img/010.jpg" alt="" name="lb03img"></li>
<li><img src="img/007.jpg" alt="" name="lb03img"></li>
</ul>
</div>
</div>
<!-- 有好货 -->
<div id="yhh">
<a >有好货</a>
<img src="img/有好货.png" alt="">
</div>
<div id="yhh01">
<a id="yhh02">
<div>
<img src="img/茶叶.webp" alt="">
</div>
<div id="yhha1">
<a ><h4>回力低帮休闲帆布鞋</h4></a>
<p>这款回力低帮休闲帆布鞋，鞋面采用优质的帆布面料，轻盈透气，鞋底是防滑耐磨的橡胶打底，弹性较好，能起到很好的减震作用，流线型的鞋型，经典时尚，保证鞋型的挺括立体。</p>
</div>
</a>
<a id="yhh02">
<div>
<img src="img/衣服.webp" alt="">
</div>
<div id="yhha2">
<a ><h4>iqoo neo3防摔全包保护套</h4></a>
<p>这款iqoo neo3防摔全包保护套很适合商务人士使用，有经典的黑色和棕色，也有时尚的蓝色和黄色，满足不同的色彩需求，展现不一样的流行魅力。而且壳体轻薄手感顺滑，用起来更舒适。</p>
</div>
</a>
<a id="yhh02">
<div>
<img src="img/裤子.webp" alt="">
</div>
<div id="yhha3">
<a ><h4>iqoo neo3防摔全包保护套</h4></a>
<p>这款iqoo neo3防摔全包保护套很适合商务人士使用，有经典的黑色和棕色，也有时尚的蓝色和黄色，满足不同的色彩需求，展现不一样的流行魅力。而且壳体轻薄手感顺滑，用起来更舒适。</p>
</div>
</a>
<a id="yhh02">
<div>
<img src="img/花瓶.webp" alt="">
</div>
<div id="yhha4">
<a ><h4>iqoo neo3防摔全包保护套</h4></a>
<p>这款iqoo neo3防摔全包保护套很适合商务人士使用，有经典的黑色和棕色，也有时尚的蓝色和黄色，满足不同的色彩需求，展现不一样的流行魅力。而且壳体轻薄手感顺滑，用起来更舒适。</p>
</div>
</a>
<a id="yhh02">
<div>
<img src="img/馒头.webp" alt="">
</div>
<div id="yhha5">
<a ><h4>iqoo neo3防摔全包保护套</h4></a>
<p>这款iqoo neo3防摔全包保护套很适合商务人士使用，有经典的黑色和棕色，也有时尚的蓝色和黄色，满足不同的色彩需求，展现不一样的流行魅力。而且壳体轻薄手感顺滑，用起来更舒适。</p>
</div>
</a>
</div>
<!-- 猜你喜欢 个性推荐 -->
<div id="cnxh">
<a >猜你喜欢</a>
<img src="img/猜你喜欢.png" alt="">
</div>
<div id="cnxh01">
<div id="cnxh02">
<div>
<img src="img/cnxh01.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">198</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh02.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">给自己一个与众不同的mg蓝异端d型万代高达</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">99</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh03.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">硅胶勺子小勺汤勺调羹大人儿童家用汤匙吃饭不粘锅饭勺</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">20</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh04.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">外搭腰封女士西装宽腰带配连衣裙子收腰装饰毛衣时尚简约百搭黑色</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">34.9</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh05.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">陈小杉欧货2022春款高跟女鞋杏色通勤百搭尖头浅口猫跟中跟单鞋女</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">199</span></p>
</div>
</div>
</div>
<br>
<div id="cnxh01">
<div id="cnxh02">
<div>
<img src="img/cnxh01.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">198</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh02.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">给自己一个与众不同的mg蓝异端d型万代高达</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">99</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh03.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">硅胶勺子小勺汤勺调羹大人儿童家用汤匙吃饭不粘锅饭勺</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">20</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh04.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">外搭腰封女士西装宽腰带配连衣裙子收腰装饰毛衣时尚简约百搭黑色</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">34.9</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh05.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">陈小杉欧货2022春款高跟女鞋杏色通勤百搭尖头浅口猫跟中跟单鞋女</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">199</span></p>
</div>
</div>
</div>
<br>
<div id="cnxh01">
<div id="cnxh02">
<div>
<img src="img/cnxh01.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">198</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh02.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">给自己一个与众不同的mg蓝异端d型万代高达</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">99</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh03.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">硅胶勺子小勺汤勺调羹大人儿童家用汤匙吃饭不粘锅饭勺</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">20</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh04.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">外搭腰封女士西装宽腰带配连衣裙子收腰装饰毛衣时尚简约百搭黑色</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">34.9</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh05.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">陈小杉欧货2022春款高跟女鞋杏色通勤百搭尖头浅口猫跟中跟单鞋女</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">199</span></p>
</div>
</div>
</div>
<br>
<div id="cnxh01">
<div id="cnxh02">
<div>
<img src="img/cnxh01.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">198</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh02.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">给自己一个与众不同的mg蓝异端d型万代高达</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">99</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh03.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">硅胶勺子小勺汤勺调羹大人儿童家用汤匙吃饭不粘锅饭勺</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">20</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh04.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">外搭腰封女士西装宽腰带配连衣裙子收腰装饰毛衣时尚简约百搭黑色</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">34.9</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh05.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">陈小杉欧货2022春款高跟女鞋杏色通勤百搭尖头浅口猫跟中跟单鞋女</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">199</span></p>
</div>
</div>
</div>
<br>
<div id="cnxh01">
<div id="cnxh02">
<div>
<img src="img/cnxh01.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包防摔全包</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">198</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh02.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">给自己一个与众不同的mg蓝异端d型万代高达</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">99</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh03.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">硅胶勺子小勺汤勺调羹大人儿童家用汤匙吃饭不粘锅饭勺</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">20</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh04.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/五五.png" alt="">外搭腰封女士西装宽腰带配连衣裙子收腰装饰毛衣时尚简约百搭黑色</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">34.9</span></p>
</div>
</div>
<div id="cnxh02">
<div>
<img src="img/cnxh05.webp" alt="">
</div>
<div id="cnxha1">
<a >
<h4><img src="img/天猫五五.png" alt="">陈小杉欧货2022春款高跟女鞋杏色通勤百搭尖头浅口猫跟中跟单鞋女</h4>
</a>
<p><span style="color: #F40; font-size: 12px;font-family: Microsoft Yahei;">¥</span><span style="color: #F40; font-size: 20px;">199</span></p>
</div>
</div>
</div>
<!-- end -->
<div id="end">
—————————— END ——————————
</div>
<!-- 主体 foot -->
<div id="zt-foot">
<div id="zt-foot01">
<a href="">
<img src="img/消费者保障.png" alt="">
<span>消费者保障</span>
<p>保障范围 退货退款流程 服务中心</p>
<p> 更多特色服务</p>
</a>
</div>
<div id="zt-foot02">
<a href="">
<img src="img/新手上路.png" alt="" >
<span>新手上路</span>
<p>新手专区 24小时在线帮助 免费开店</p>
</a>
</div>
<div id="zt-foot03">
<a href="">
<img src="img/付款方式.png" alt="" >
<span>付款方式</span>
<p> 快捷支付 信用卡 余额宝 蚂蚁花呗</p>
</a>
</div>
<div id="zt-foot04">
<a href="">
<img src="img/淘宝特色.png" alt="" >
<span>淘宝特色</span>
<p>手机淘宝 旺旺/旺信 大众评审</p>
</a>
</div>
</div>
</div>
<!-- 页面尾部 -->
<div id="body-foot">
<div id="body-foot01">
<a href="">阿里巴巴集团 </a>
<b> | </b>
<a href="">淘宝网</a>
<b> | </b>
<a href="">天猫</a>
<b> | </b>
<a href="">聚划算</a>
<b> | </b>
<a href="">全球速卖通</a>
<b> | </b>
<a href="">阿里巴巴国际交易市场</a>
<b> | </b>
<a href="">1688</a>
<b> | </b>
<a href="">阿里妈妈</a>
<b> | </b>
<a href="">飞猪</a>
<b> | </b>
<a href="">阿里云计算</a>
<b> | </b>
<a href="">AliOS</a>
<b> | </b>
<a href="">阿里通信</a>
<b> | </b>
<a href="">一淘</a>
<b> | </b>
<a href="">万网</a>
<b> | </b>
<a href="">高德</a>
<b> | </b>
<a href="">UC</a>
<b> | </b>
<a href="">友盟</a>
<b> | </b>
<a href="">阿里安全</a>
<b> | </b>
<br/>
<a href="">大麦网</a>
<b> | </b>
<a href="">钉钉</a>
<b> | </b>
<a href="">支付宝</a>
<b> | </b>
<a href="">优酷</a>
<b> | </b>
<a href="">土豆</a>
<b> | </b>
<a href="">阿里健康</a>
<b> | </b>
<a href="">阿里影业</a>
<b> | </b>
<a href="">网商银行</a>
<b> | </b>
</div>
<hr id="hr">
<div id="body-foot02">
<!--
© 2003-现在 Taobao.com 版权所有 -->
<a href="">关于淘宝 </a>
<a href="">营销中心 </a>
<a href="">廉正举报 </a>
<a href="">联系客服 </a>
<a href="">开放平台 </a>
<a href="">诚征英才 </a>
<a href="">联系我们 </a>
<a href="">隐私权政策 </a>
<a href="">法律声明 </a>
<a href="">知识产权 </a>
<a href="">不当竞争举报 </a>
<a href="">规则意见征集 </a>
<b>|</b>
</div>
<!-- ：
||浙江省网络食品销售第三方平台提供者备案：浙网食A33010001 -->
<p>
<div id="body-foot03">
<a href="">增值电信业务经营许可证：浙B2-20080224</a>
<b>|</b>
<a href="">增值电信业务经营许可证（跨地区）：B2-20150210</a>
<b>|</b>
<a href="">浙网文【2022】0403-017号</a>
<b>|</b>
<a href="">浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</a>
<b>|</b>
</div>
</p>
<p>
<div id="body-foot04">
<a href="">互联网药品信息服务资格证书（浙）-经营性-2018-0010</a>
<b>|</b>
<a href="">短消息类服务接入代码使用证书：号【2016】00154-A01</a>
<b>|</b>
<a href="">信息网络传播视听许可证：1109364号</a>
<b>|</b>
<a href="">出版物网络交易平台服务经营备案号：新出发浙备字第002号</a>
<b>|</b>
</div>
</p>
</div>
</div>
</body>
</html>
扫一扫
3038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
