首页 > Web开发 > 详细

仿爱购网（首页） html+css+JS

时间：2019-08-13 18:39:26      阅读：262      评论：0      收藏：0      [点我收藏+]

首页：图片轮播、数组中数据循环渲染到页面中、fixed与锚点

          其中涉及的一些css样式略过。

 

样式初始化

reset.css：

body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {
    margin: 0;
    padding: 0;
}
ul{
 list-style: none;
}
a{
 text-decoration: none;
}

html：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/aigou_shouye.css"/>
  <link rel="icon" href="img/title-icon.jpg" />
  <title>首页</title>
 </head>
 <body>
  <div class="wrapper">
   <!--第一行开始 登录-->
   <div class="row_1" id="row_1">
    <a class="a1" href="gouwuc.html">购物车</a>
    <a href="shopping.html">我的订单</a>
    <a href="classify.html">商品分类</a>
    <a class="a3" href="zhuce.html">注册</a>
    <a class="a2" href="denglu.html">登录</a>
   </div>
   <!--第一行结束-->
   <!--第二行开始 搜索-->
   <div class="row_2">
    <div class="row_2_1">
     <a href=""><img src="img/logo.png" width="150px" height="60px"/></a>
    </div>
    <div class="row_2_2">
     <input class="input1" type="text" placeholder="牛奶"/>
     <input class="input2" type="button" name="" id="sousuo" value="搜索" />
    </div>
    <div class="row_2_3">
     <ul>
      <li><a class="a1" 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>
      <li><a href="#">良品铺子</a></li>
     </ul>
    </div>
    <div class="clear"></div>
   </div>
   <!--第二行结束-->
   <!--第三行开始 图片轮播-->
   <div class="row_3">
    <div class="row_3_left">
     <ul>
      <li><a href="#"><p>全球进口</p></a></li>
      <li><a href="#"><p>国产食品</p></a></li>
      <li><a href="#"><p>服装服饰</p></a></li>
      <li><a href="#"><p>护肤美妆</p></a></li>
      <li><a href="#"><p>家居用品</p></a></li>
      <li><a href="#"><p>儿童玩具</p></a></li>
      <li><a href="#"><p>电子产品</p></a></li>
      <li><a href="#"><p>医药保健</p></a></li>
      <li><a href="#"><p>图书学习</p></a></li>
     </ul>
    </div>
    
    <!--图片轮播-->
    <div class="row_3_right">
     <div class="banner" id="main">
      <ul id="pic">
       <li><a href="#"><img src="img/banner01.jpg" width="1020px" height="360px"/></a></li>
       <li><a href="#"><img src="img/banner02.jpg" width="1020px" height="360px"/></a></li>
       <li><a href="#"><img src="img/banner03.jpg" width="1020px" height="360px"/></a></li>
       <li><a href="#"><img src="img/banner04.jpg" width="1020px" height="360px"/></a></li>
       <li><a href="#"><img src="img/banner05.jpg" width="1020px" height="360px"/></a></li>
      </ul>
      <ul class="banner-btn" id="list">
       <li class="on"></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
      </ul>
     </div>
    </div>
    <div class="clear"></div> 
   </div>
   <!--第三行结束-->
   <!--第四行开始-->
   <div class="row_4">
    <div class="row_4_left"><a href="#"><img src="img/new.jpg" width="270px" height="400px"/></a></div>
    <div class="row_4_middle">
     <a href="#"><div class="title">新品</div></a>
     <div class="tri1"></div>
     <div class="tri2"></div>
     <ul class="ul1" id="ul1">
     </ul>
    </div>
    <div class="row_4_right">
     <a href="#"><div class="title">排行榜</div></a>
     <div class="tri1"></div>
     <div class="tri2"></div>
     <ul class="ul2">
      <span class="i1 bg_img">1</span>
      <span class="i2 bg_img">2</span>
      <span class="i3 bg_img">3</span>
     </ul>
    </div>
    <div class="clear"></div>
   </div>
   <!-- 第四行结束 -->
   <!-- 第五行开始 全球进口 -->
   <div class="row_5" id="row_5">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;|全球进口</p>
    <ul class="ul3">
    </ul>
   </div>
   <!--第五行结束-->
   <!--第六行开始 服饰服装-->
   <div class="row_6" id="row_6">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;|服装服饰</p>
    <ul class="ul4">
     
    </ul>
   </div>
   <!--第六行结束-->
   <!--第七行开始 护肤美妆-->
   <div class="row_7" id="row_7">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;|护肤美妆</p>
    <ul class="ul5">
    </ul>
   </div>
   <!--第七行结束-->
   <!--第八行开始 图书学习-->
   <div class="row_8" id="row_8">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;|图书学习</p>
    <ul class="ul6">
    </ul>
   </div>
   <!--第八行结束-->
   <!--第九行开始 底部-->
   <div class="row_9">
    <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>
     <li><a href="#">网站地图</a></li>
     <li><a href="#">知识产权</a></li>
     <li><span>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;©2018-2020 igo.com 版权所有</span></li>
    </ul> 
   </div>
   <!--第九行结束-->
   <!--导航条-->
   <div class="guide">
    <ul>
     <li class="li03"><a href="#row_5"><p>全球<br />进口</p></a></li>
     <li class="li04"><a href="#row_6"><p>服装<br />服饰</p></a></li>
     <li class="li05"><a href="#row_7"><p>护肤<br />美妆</p></a></li>
     <li class="li06"><a href="#row_8"><p>图书<br />学习</p></a></li>
     <li class="li07"><a href="#row_1"><p>返回<br />顶部</p></a></li>
    </ul>
   </div>
   <div class=""></div>
  </div>
  

css：

 

@import url("reset2.css");
.wrapper{
   width: 1440px;
   margin: 0 auto;
   background-color: #fafafa;
}
/* 第一行开始 */
.row_1{
 font-size: 12px;
 height: 30px;
 background-color: #f4f4f4;
 line-height: 30px;
}
.row_1>a{
 float: right;
 margin-left:32px;
 color: #000;
}
.row_1>.a1{
 margin-right:140px ;
}
.row_1>.a2{
 color: #b41e23;
}
.row_1>.a3{
 color: #aaa;
}
/*第一行结束*/
/*第二行开始  搜索*/
.row_2{
 padding-top:20px ;
}
.row_2_1{
 margin: 0 0 14px 104px;
 float: left;
}
.row_2_2{
 font-size: 0px;
}
.row_2_2 .input1{
 width: 690px;
 height: 36px;
 border: 2px solid #b41e23;
 padding-left: 10px;
 margin-left: 86px;
}
.row_2_2 .input2{
 width: 50px;
 height: 40px;
 background-color: #be1e23;
 color: #fff;
 border: none;
}
.row_2_3 a{
 float: left;
 font-size: 14px;
 color: #aaa;
 margin-right: 20px;
 line-height: 40px;
}
.row_2_3 .a1{
 margin-left: 86px;
}
/*第二行结束*/
/*第三行开始 图片轮播*/
.row_3_left{
 width: 210px;
 height: 360px;
 margin-left: 104px;
 background-color: #b41e23;
 float: left;
 text-align: center;
}
.row_3_left p{
 width: 210px;
 height: 40px;
 color: #fff;
 font-weight: bold;
 line-height: 40px;
}
.row_3_left p:hover{
 width: 206px;
 border-left: 4px solid #ed8386;
 color: #b41e23;
 background-color: #fff;
}
/*图片轮播*/
.row_3_right{
 float: left;
}
.banner{
 width: 1020px;
 height: 360px;
 /*float: right;*/
 position: relative;
 overflow: hidden;
}
.banner-btn{
 position: absolute;
 bottom: 20px;
 left: 50%;
 width: 180px;
 margin-left: -90px;
}
#pic{
 width: 500%;
 /*width: 5100px;*/
 transition: all 1s;
}
#pic li{
 float: left;
}
.banner-btn li{
 width: 12px;
 height: 12px;
 background-color: #fff;
 border-radius: 50%;
 float: left;
 margin-right: 20px;
 cursor: pointer;
}
.banner-btn .on{
 background-color: #b41e23;
 border: 2px solid #fff;
}
/*第三行结束*/
/*第四行开始*/
.row_4_left{
 margin: 20px 0 0 104px;
 float: left;
}
.ul1 img:hover{
 transform: scale(1.1);
 transition: all .5s;
}
.row_4_right a:hover{
 color: #b41e23;
}
.row_4_middle .p3{
 width: 95px;
 height: 95px;
}
.row_4_middle,.row_4_right{
 width: 500px;
 height: 398px;
 margin:22px 0 0 20px ;
 background-color: #fff;
 border-top: 2px solid #b41e23;
 float: left;
 background-image: url(../img/group_bg.png);
 background-repeat: no-repeat;
 background-size: 500px 35px;
 position: relative;
}
.row_4_right{
 width: 400px;
 margin-left: 40px;
 background-size: 400px 35px;
}
.row_4_middle li,.row_4_right li{
 width: 150px;
 height: 160px;
 border: 1px solid #eee;
 float: left;
 font-size: 14px;
 margin: 0 0 12px 12px;
}
.row_4_right li{
 width: 120px;
 border: none;
 margin: 0 0 12px 12px;
 font-size: 12px;
 text-align: center;
}
.bg_img{
 background-image: url(../img/indexbody_sprite.png);
}
.i1,.i2,.i3{
 width: 24px;
 height: 18px;
 float: left;
 margin: 0;
 display: inline-block;
 text-align: center;
 line-height: 18px;
 color: #fff;
 z-index: 100;
}
.i1{
 background-position: -59px 0px;
 position: absolute;
 top:75px;
 left:25px;
}
.i2{
 background-position: -89px 0px;
 position: absolute;
 top:75px;
 left:157px;
}
.i3{
 background-position: -119px 0px;
 position: absolute;
 top:75px;
 left:289px;
}
.row_4_middle a,.row_4_right a{
 text-align: center;
 color: #000;
 line-height: 25px;
}
.row_4_middle img{
 width: 90px;
 height: 90px;
 margin-top: 22px;
 margin-left: 30px;
 text-align: center;
}
.row_4_right img{
 width: 90px;
 height: 90px;
 margin-top: 32px;
}
.row_4_middle .title,.row_4_right .title{
 width: 140px;
 height: 40px;
 background-color: #b41e23;
 color: #fff;
 text-align: center;
 line-height: 40px;
 font-size: 18px;
 font-weight: bold;
 position: absolute;
 top: -8px;
 left: 180px;
 z-index: 100;
}
.row_4_right .title{
 position: absolute;
 top: -8px;
 left: 130px;
 z-index: 100;
}
.row_4_middle .tri1,.row_4_middle .tri2,.row_4_right .tri1,.row_4_right .tri2{
 width: 0px;
 height: 0px;
 border-width: 7px ;
 border-color:transparent transparent #951c1f transparent;
 border-style: solid;
 position: absolute;
 top:-15px;
 left:173px;
}
.row_4_middle .tri2{
 position: absolute;
 top:-15px;
 left:313px;
}
.row_4_right .tri1{
 position: absolute;
 top:-15px;
 left:123px;
}
.row_4_right .tri2{
 position: absolute;
 top:-15px;
 left:263px;
}
.row_4_middle ul,.row_4_right ul{
 margin-top:50px;
}
/* 第四行结束 */
/* 第五行开始 全球进口 */
.row_5{
 width: 1230px;
 height: 250px;
 margin: 20px 0 0 104px;
 background-color: #fff;
}
.row_5>p{
 height: 45px;
 color: #bcc962;
 font-size: 24px;
 font-weight: bold;
 line-height: 45px;
}
.row_5 li{
 width: 245px;
 height: 204px;
 border-width: 1px 1px 0 0 ;
 border-style: solid;
 border-color: #eee;
 float: left;
}
.row_5 li p{
 color: #666;
 font-size: 12px;
 margin: 25px 0 0 25px;
}
.row_5 li img{
 width: 150px;
 height: 140px;
 margin: 15px 0 0 92px;
}
.row_5 .li01{
 border-right-width: 0px;
}
.row_5 li:hover p{
 color: #b41e23;
}
.row_5 li:hover img{
 /*margin: 15px 0 0 82px;*/
 transform: translate(-10px,0);
 transition: all .5s;
}
/*第五行结束*/
/*第六行开始 服装服饰*/
.row_6{
 width: 1230px;
 height: 555px;
 margin: 20px 0 0 104px;
 background-color: #fff;
}
.row_6 li div{
 width: 180px;
 height: 180px;
 overflow: hidden;
}
.row_6 li div img{
 width: 180px;
 height: 180px;
}
.row_6>p{
 height: 45px;
 color: #d890df;
 font-size: 24px;
 font-weight: bold;
 line-height: 45px;
}
.row_6 li{
 width: 180px;
 height: 230px;
 border: 1px solid transparent ;
 float: left;
 margin-left: 20px;
 text-align: center;
 margin-bottom: 20px;
}
.row_6 li:hover{
 border: 1px solid #eee;
 box-shadow: 1px 1px 3px #eee;
}
.row_6 li:hover img{
 transform: scale(1.2);
 transition: all .5s;
}
.row_6 li p{
 color: #666;
 font-size: 12px;
}
.row_6 .p1{
 font-size: 14px;
 font-weight: bold;
 color: #f00;
 text-align: left;
 margin-left: 15px;
}
/*第六行结束*/
/*第七行开始 护肤美妆*/
.row_7{
 width: 1230px;
 height: 185px;
 margin: 20px 0 0 104px;
 background-color: #fff;
}
.row_7 ul li img{
 width:90px ;
 height: 90px;
}
.row_7>p{
 height: 40px;
 color: #f3a4d4;
 font-size: 24px;
 font-weight: bold;
 line-height: 40px;
}
.row_7 li{
 width: 244px;
 height: 145px;
 border: 1px solid transparent ;
 border-right-style:dashed;
 border-right-color: #eee;
 float: left;
}
.row_7 li:hover{
 border: 1px solid #b41e23;
}
.row_7 li p{
 color: #666;
 font-size: 12px;
 float: left;
 margin: 50px 0 0 0;
}
.row_7 li img{
 margin: 27px 0 0 5px;
 float: left;
}
.row_7 .li02{
 border-right-width: 0px;
}
.row_7 .p2{
 font-size: 14px;
 font-weight: bold;
 color: #f00;
 text-align: left;
 margin: 5px 0 0 15px;
}
/*第七行结束*/
/*第八行开始 图书学习*/
.row_8{
 width: 1230px;
 height: 555px;
 margin: 20px 0 0 104px;
 background-color: #fff;
}
.row_8>p{
 height: 45px;
 color: #d890df;
 font-size: 24px;
 font-weight: bold;
 line-height: 45px;
}
.row_8 li{
 width: 180px;
 height: 232px;
 border: 1px solid transparent;
 float: left;
 margin-left: 20px;
 text-align: center;
 margin-bottom: 20px;
}
.row_8 img{
 width: 180px;
 height: 180px;
}
.row_8 li:hover{
 border: 1px solid #eee;
 box-shadow: 1px 1px 3px #eee;
}
.row_8 li p{
 color: #666;
 font-size: 12px;
}
.row_8 .p1{
 font-size: 14px;
 font-weight: bold;
 color: #f00;
 text-align: left;
 margin-left: 15px;
}
/*第八行结束*/
/*第九行开始 底部*/
.row_9{
 height: 60px;
 line-height: 60px;
 background-color: #f4f4f4;
 font-size: 12px;
 margin-top: 20px;
}
.row_9 li{
 float: left;
 color: #aaa;
}
.row_9 li a{
 color: #aaa;
 margin-right:20px ;
}
.row_9 ul{
 margin-left:300px ;
}
/*第九行结束*/
/*导航条*/
.guide{
 width: 50px;
 height: 300px;
 position: fixed;
 right: 100px;
 bottom: 40px;
 border-radius: 20px;
}
.guide li{
 text-align: center;
 height: 60px;
 overflow: hidden;
}
.guide li a{
 color: #fff;
 font-size: 14px;
}
.guide .li03{
 background-color: #bcc962;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
.guide .li04{
 background-color: #d890df;
}
.guide .li05{
 background-color: #f3a4d4;
}
.guide .li06{
 background-color: #b41e23;
}
.guide .li07{
 background-color: #aaaaaa;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}
.guide p{
 overflow: hidden;
 margin:10px auto;
}

JavaScript：

 

<script type="text/javascript">
   window.onload = function(){
    var main = document.getElementById("main");
    var pic = document.getElementById("pic");
    var list = document.getElementById("list").getElementsByTagName("li");
    var index = 0
    var timer = null;
    //设置定时器，自动切换
    timer = setInterval(autoPlay,3000);
    //自动切换的函数
    function autoPlay(){
     index++;
     //当为最后一张图片时，回到第一张
     //console.log(index);
     //debugger;
     if(index >= list.length){
      index = 0;
     }
     changeImg(index);
    }
    //图片切换函数
    function changeImg(curindex){
     //修改list样式
     for(var i = 0; i < list.length; i++){
      list[i].className = ‘‘;
     }
     list[curindex].className = ‘on‘;
     //修改背景图片
     pic.style.marginLeft = -1020*curindex+‘px‘;
     index = curindex;
    }
    //鼠标悬停在容器上时，清除定位器
    main.onmouseover = function(){
     clearInterval(timer);
    }
    //鼠标移开容器时，触发定时器
    main.onmouseout = function(){
     timer = setInterval(autoPlay,3000);
    }
    //当鼠标移到数字按钮上时的函数
    for(var j = 0; j < list.length; j++){
     //给每个数字按钮设置id值
     list[j].id = j;
     //console.log(list[j]);
     list[j].onmousemove = function(){
      clearInterval(timer);
      changeImg(this.id);
     }
    } 
    
    
//   新品
   var arr1 = [
    {"img1":"img/new01.jpg","p1":"洗发护发会场"},
    {"img1":"img/new02.jpg","p1":"身体沐浴会场"},
    {"img1":"img/new03.jpg","p1":"家用实用抽纸"},
    {"img1":"img/new04.jpg","p1":"国产零食会场"},
    {"img1":"img/new05.jpg","p1":"粮油米面会场"},
    {"img1":"img/new06.jpg","p1":"奶粉大牌"}]
   var ul1 = document.getElementsByClassName("ul1")[0];
//   var str = "";
   for(var i=0;i<arr1.length;i++){
    ul1.innerHTML +=`
     <li>
      <a href="#">
       <img src="${arr1[i].img1}" ><p>${arr1[i].p1}</p>
      </a>
     </li>
    `
   }
   
//   排行榜
   var arr2 = [
   {"img2":"img/rank01.jpg","p2":"口水族 休闲零食"},
   {"img2":"img/rank02.jpg","p2":"欢乐家 生榨椰子"},
   {"img2":"img/rank03.jpg","p2":"红棉 红枣枸杞黑糖"},
   {"img2":"img/rank04.jpg","p2":"满199减120三只松鼠"},
   {"img2":"img/rank05.jpg","p2":"满199减120_百草味"},
   {"img2":"img/rank06.jpg","p2":"三只松鼠方便食品"}]
   var ul2 = document.getElementsByClassName("ul2")[0];
   for(var i=0;i<arr2.length;i++){
    ul2.innerHTML +=`
     <li>
      <a href="#">
       <img src="${arr2[i].img2}" ><p>${arr2[i].p2}</p>
      </a>
     </li>
    `
   
   }
   
//   全球进口
   var arr3 = [{"p3":"ucc-满99减50","img3":"img/global01.jpg"},
   {"p3":"进口粮油米面-满99减50","img3":"img/global02.jpg"},
   {"p3":"进口水饮冲调-满99减50","img3":"img/global03.jpg"},
   {"p3":"孕妇坚果-满99减50","img3":"img/global04.jpg"},
   {"p3":"进口休闲零食-满99减50","img3":"img/global05.jpg"}]
   var ul3 = document.getElementsByClassName("ul3")[0];
   for(var i=0;i<arr3.length;i++){
    ul3.innerHTML +=`
     <li>
      <a href="#">
       <p>${arr3[i].p3}</p>
       <img src="${arr3[i].img3}" >
      </a>
     </li>
    `
   }
   
//   服装服饰
   var arr4 = [{"img4":"img/cloth01.jpg","p4":"2018秋冬新款女装减龄慵懒...","price":"¥300.00"},
   {"img4":"img/cloth02.jpg","p4":"【OSL高端定制】600070双...","price":"¥580.00"},
   {"img4":"img/cloth03.jpg","p4":"早秋装卫衣女2018新款chic...","price":"¥870.00"},
   {"img4":"img/cloth04.jpg","p4":"旗袍外搭外套 开衫 小披肩...","price":"¥180.00"},
   {"img4":"img/cloth05.jpg","p4":"2018秋季新款韩范高腰阔腿...","price":"¥149.00"},
   {"img4":"img/cloth06.jpg","p4":"2018秋季新款韩范高腰阔腿...","price":"¥380.00"},
   {"img4":"img/cloth07.jpg","p4":"裤子女2018新款潮宽松长袖...","price":"¥147.00"},
   {"img4":"img/cloth08.jpg","p4":"早秋卫衣少女2018新款chic...","price":"¥528.00"},
   {"img4":"img/cloth09.jpg","p4":"早秋卫衣少女2018新款chic...","price":"¥258.00"},
   {"img4":"img/cloth10.jpg","p4":"复古名媛秋装新款女装2018...","price":"¥297.00"},
   {"img4":"img/cloth11.jpg","p4":"时尚套装2018秋季新款长袖...","price":"¥239.00"},
   {"img4":"img/cloth12.jpg","p4":"商商sunny私人订制887226...","price":"¥980.00"}]
   var ul4 = document.getElementsByClassName("ul4")[0];
   for(var i=0;i<arr4.length;i++){
    ul4.innerHTML +=`
     <li>
      <a href="#">
       <div>
        <img src="${arr4[i].img4}" />
       </div>
       <p>${arr4[i].p4}</p>
       <p class="p1">${arr4[i].price}</p>
      </a>
     </li>
    `
   }
   
   
   
//   美妆护肤
   var arr5 = [{"cla":"","img5":"img/mod01.jpg","p5":"日本正品代购 资生堂...","price":"¥198.00"},
   {"cla":"","img5":"img/mod02.jpg","p5":"日本代购资生堂CPB肌...","price":"¥390.00"},
   {"cla":"","img5":"img/mod03.jpg","p5":"直邮韩国代购TOYNM...","price":"¥98.00"},
   {"cla":"","img5":"img/mod04.jpg","p5":"日本代购直邮 SYQQ...","price":"¥432.00"},
   {"cla":"li02","img5":"img/mod05.jpg","p5":"Benefit贝玲妃完美无...","price":"¥288.00"}]
   var ul5 = document.getElementsByClassName("ul5")[0];
   for(var i=0; i<arr5.length;i++){
    ul5.innerHTML +=`
     <li class="${arr5[i].cla}">
      <a href="#">
       <img src="${arr5[i].img5}" />
       <p>${arr5[i].p5}</p>
       <p class="p2">${arr5[i].price}</p>
      </a>
     </li>
    `
   }

//   图书学习
   var arr6 = [{"img6":"img/book01.jpg","p6":"七年级七册包邮 西游记原著...","price":""},
   {"img6":"img/book02.jpg","p6":"龙应台人生三书 目送+亲...","price":"¥59.80"},
   {"img6":"img/book03.jpg","p6":"√√西游记朝花夕拾鲁迅包...","price":"¥57.80"},
   {"img6":"img/book04.jpg","p6":"朗读者董卿正版书籍全套（1-....","price":"¥88.00"},
   {"img6":"img/book05.jpg","p6":"全5册 城南旧事正版包邮 林...","price":"¥39.00"},
   {"img6":"img/book06.jpg","p6":"平凡的世界（共3册）全三册3...","price":"¥47.00"},
   {"img6":"img/book07.jpg","p6":"正版包邮 HTML5权威指南...","price":"¥87.60"},
   {"img6":"img/book08.jpg","p6":"javascript高级程序升级+Ja...","price":"¥166.00"},
   {"img6":"img/book09.jpg","p6":"曹文轩系列全套七册...","price":"¥59.80"},
   {"img6":"img/book10.jpg","p6":"全套四本 米小圈上学记第一...","price":"¥59.90"},
   {"img6":"img/book11.jpg","p6":"编程思想第4版thinki..","price":"¥86.40"},
   {"img6":"img/book12.jpg","p6":"Vue.js实战尤雨溪作序 马骥...","price":"¥49.80<"}]
   var ul6 = document.getElementsByClassName("ul6")[0];
   for(var i=0; i<arr6.length;i++){
    ul6.innerHTML +=`
     <li>
      <a href="#">
       <img src="${arr6[i].img6}" />
       <p>${arr6[i].p6}</p>
       <p class="p1">${arr6[i].price}</p>
      </a>
     </li>
    `
   }
   }
  </script>
 </body>
</html>

技术分享图片

 

仿爱购网（首页） html+css+JS

原文：https://www.cnblogs.com/shuaiqixiaoha/p/11347544.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！