京东网页html+css简单制作1（附带源码和素材）

<div class="top"> 
    <img src=".//images/京东素材/京东顶部广告素材图.png" alt="" width="100%" height="58px" class="topimage">
    <nav class="toptext">
        <a href="">江西 &nbsp;切换至企业版</a>
        <a href="">你好，<span style="color: red;">请登录</span></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>
    </nav>
   </div>
   <div class="banner">
       <img src="./images/京东素材/京东logo素材图.png" alt="" width="90px" height="55px" class="logo">
       <input type="search"  id="search">
        <div style="width: 80px; height:23px" class="car">
            <img src="./images/京东素材/京东购物前购物车logo.png" alt="" width="27px" style="float: left;top:10px">
        </div>
        <img src="./images/京东素材/京东顶部右侧活动图.png" alt="" width="90px" height="50px" class="opr">
   </div>

   <div class="main">
      <div class="ol"></div>
      <div class="oe"></div>
      <div class="ce"></div>
      <div class="or"></div>
      <div class="oi"></div>
   </div>
   <div class="fortet-image">
         
   </div>
   <div class="fortter">

   </div>

 *{margin: 0;padding: 0;}
    a{text-decoration: none;color: rgb(83, 81, 81);font-size: 10px;}
    .top{height: 70px;}
    .topimage{top: 0;height: 50px;}
    .toptext{margin-top: 0;height: 20px;position: relative;background-color: rgb(211, 206, 206);}
    .banner{height: 60px;background-color: white;width: 100%;}
    body{background-color: rgb(234, 232, 232);}
   #search{width: 400px;border: 1.2px solid rgb(207, 15, 15);position: relative;
    height: 20px;top: -20px;left: 410px;background-image: url(./images/京东素材/京东搜索框拍照logo.png);background-repeat: no-repeat;background-size: 25px;background-position: right;}
  .logo{position: relative;left: 400px;top: 5px;}
    .car{border: 1px solid rgb(218, 206, 206);position: relative;left: 920px;top: -44px;}
    .main{width: 100%;height: 480px;display:inline;}
    .ol{width: 150px;height: 460px;
        background-image: url(./images/京东素材/京东最左侧广告宣传图.png);float: left;background-repeat: no-repeat;
        background-size: 150px 460px;background-position: center;}
    .oe{width: 230px; height: 420px;background-image: url(./images/京东素材/京东左侧分类选择图.png);
    float: left;background-repeat: no-repeat;background-size: 230px 420px;background-position: center;}
    .ce{width: 480px; height: 420px;background-image: url(./images/京东素材/京东轮播图1.png) ;
    float: left;background-repeat: no-repeat;background-size:460px 410px;background-position: center;}
    .or{width: 270px; height: 420px;background-image: url(./images/京东素材/京东右侧快捷选择图.png);
    float: left;background-repeat: no-repeat;background-size: 270px 420px;background-position: center;}
    .oi{width: 150px; height: 460px;background-image: url(./images/京东素材/京东最右侧广告宣传图.png);
    float: left;background-repeat: no-repeat;background-size:150px 460px;}
  .fortet-image{width:70%;height: 400px;background-image: url(./images/京东素材/京东下方活动特价商品图.png);background-repeat: no-repeat;
    background-size: 100% 400px;position: relative;top: 420px;left: 15%;}
  .fortter{width:70%;height: 200px;background-image: url(./images/京东素材/京东下方广告图1.png);background-repeat: no-repeat;
    background-size: 100% 100px;position: relative;top: 430px;left: 15%;}
    .opr{position: relative;left: 1100px;top: -79px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
   </script>
   <script>
        var app=new Vue({
            el:"#haoge",
            data: {
                imageArr:[
               "./images/京东素材/京东轮播图1.png",
               "./images/京东素材/京东轮播图3.png",
               "./images/京东素材/京东轮播图2.png",
               "./images/京东素材/京东轮播图4.png",
                ],
            index:0

            },
       methods: {
           prev:function(){},
           next:function(){},
       },
        })


   </script>