1号店项目-CSDN博客

本文链接：https://blog.csdn.net/liujia20001123/article/details/84782712
1.首页
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>oneshop</title>
  <style>
   *{
    padding: 0px;
    margin: 0px;
   }
   ul li{
    list-style-type: none;
   }
   .ul1{
    margin: 0px 5px 0px 5px;
    display: inline;
    float: right;
    text-align: center;
    font-size: 14px;
   }
   .div1{
    border: 1px solid white;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(to bottom, #d1d1d1,#f4f4f4, #f5f5f5);
   }
   img,a{
    vertical-align: middle;
   }
   a:hover{
    color:orangered;
   }
   .span1{
    float: left;
    margin-top: 40px;
    height: 80px;
    margin-left: -50px;
   }
   
   .input1{
    height: 45px;
    width: 420px;
    border: 2px solid #FF3C3C;
    margin-left: 50px;
    font-size: 16px;
    padding-left: 10px;
   }
   .input2{
    background-color: #ff3c3c;
    border: 1px solid orangered;
    width: 100px;
    height: 45px;
    color: white;
    font-size: 17px;
    font-weight: bold;
   }
   .p{
    float: left;
    margin-top: 60px;
    margin-left: 100px;
   }
   .div2{
    float: left;
    margin-left: 55px;
    margin-top: 4px;
    font-size: 15px;
    color: #555555;
   }
   .span2{
    float: right;
    border: 1px solid #d9d9d9;
    padding: 12px 35px 12px 12px;
    margin-right: 100px;
    margin-top: 60px;
    background-color:#f6f6f6;
    
   }
   .div3{
    font-family: "微软雅黑";
    float: left;
    font-size: 18px;
    font-weight: bold;
    margin: 14px 15px 20px 15px;
    
   }
   .div4{
    float: left;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid orangered;
    background-color: #FF3C3C;
    margin-right: 40px;
    padding: 15px 80px 17px 40px;
    color: white;
    text-align: center;
   }
   .div5{
    border: 1px solid white;
    width: 1300px;
    height: 2550px;
    margin: 0 auto;
   }
   .div6{
    border: 1px solid white;
    width: 1300px;
    height: 150px;
    margin: 0 auto;
   }
   .div7{
    border: 3px solid orangered;
    height: 57px;
    border-style: none none solid none; 
   }
   .li1{
    float: left;
    border: 1px solid red;
    font-weight: bold;
    font-size: 16px;
    background-color: #b01d1d;
    width: 242px;
    height: 400px;
    color: white;
    
   }
   .li2:hover{
    transform: translate(20px,0);
   }
   .li2{
    margin-left: 20px; 
    margin-top: 15px;
    margin-bottom: 20px;
    transition: all 1s ease-in-out;
   }
   
   .div8{
    display: inline-block;
    margin-left: 10px;
    position: relative;
   }
   .img1{
    margin-right: 15px;
    margin-bottom: 2px;
   }
   .text1{
    color:black;
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: darkgray;
    line-height: 20px;
    text-align: center;
   }
   .k a:hover{
    color: white;
    background-color:#FF3C3C;
   }
   .ul2{
    position: relative;
    left: 300px;
    bottom: 40px;
   }
   .img2{
    float: right;
    margin-right: 8px;
    margin-top: 4px;
   }
   .div9{
    border: 1px solid darkgray;
    width: 240px;
    height: 400px;
    float: right;
    margin-top: -420px;
   }
   .h3{
    float: left;
    font-family: '微软雅黑';
    margin-top: 10px;
    margin-left: 15px;
    font-size: 17px;
   }
   .span3{
    float: right;
    font-size: 13px;
    color: darkgray;
    margin-top: 15px;
    margin-right: 15px;
   }
   .div10{
    border: 1px dashed darkgray;
    border-style: none none dashed none;
    width: 240px;
    height: 40px;
   }
   .ul3{
    font-size: 14px;
    color:#555555;
    margin-top: 15px;
    margin-left: 10px;
   }
   .span4{
    font-family: '微软雅黑';
    font-size: 15px;
    color: black;
    font-weight: bold ;
    
   }
   .div11{
    border: 1px solid darkgray;
    border-style: none none solid none;
    width: 240px;
    height: 175px;
   }
   .div12{
    border: 1px dashed darkgrey;
    border-style: none none dashed none;
    width: 240px;
    height: 33px;
   }
   .p1{
    font-size: 18px;
    font-family: '微软雅黑';
    font-weight: bold;
    margin-left: 15px;
    margin-top: 8px;
   }
   .p2{
    text-align: center;
    margin: 0 auto;
   }
   .div13{
    border: 1px solid white;
    width: 230px;
    height: 240px;
    float: left;
    background: #d8eefc;
   }
   .div13 a:hover{
    transform: scale(1.1);
    transition: all 0.8s;
   }
   
   .p3{
    border: 1px solid orangered;
    padding: 2px 4px 2px 8px;
    color: white;
    background: orangered;
    width: 55px;
    font-size: 15px;
    margin-left: 60px;
    position: relative;
    top: 15px;
   }
   .span5{
    font-size: 14px;
    color:orangered;
    position: relative;
    top: 18px;
    left: 20px;
   }
   .div14{
    border: 1px solid #eaeaea;
    width: 260px;
    height: 240px;
    float: left;
    margin-left: 20px;
    position: relative;
   }
   
   .span6{
    font-size: 22px;
    font-weight: bold;
    color:orangered ;
    margin-left:80px;
    margin-top: 20px;
   }
   .span7{
    font-size: 14px;
    color: darkgray;
    margin-left: 20px;
   }
   .a1{
    font-size: 18px;
    font-family: "微软雅黑";
    font-weight: bold;
    color: #555555;
    margin-left: 85px;
   }
   .a4{
    font-size: 18px;
    font-family: "微软雅黑";
    font-weight: bold;
    color: #555555;
    margin-left: 45px;
   }
   .a2{
    font-size: 14px;
    color: #888888;
    margin-left: 40px;
   }
   .div14 a:hover{
    text-decoration: underline;
    color: #888888;
   }
   .a3 a:hover{
    transform: scale(1.1);
    transition: all 0.8s;
   }
   .div15{
    border-bottom: 2px solid #ff4e00;
    width: 1300px;
    height: 40px;
    margin-top: 20px;
    position: relative;
   }
   .span8{
    width: 33px;
    height: 34px;
    background: url(img/floor.png)no-repeat center;
    float: left;
    color: white;
    font-size: 14px;
    margin-left: 5px;
    text-indent: 5px;
    margin-right: 15px;
    line-height: 40px;
   }
   .div15 a{
    margin-right: 20px;
   }
   .div16{
    position: relative;
   }
   .div17{
    
    background: url(img/s_txt.png)no-repeat;
    background-color:darkseagreen;
    width: 211px;
    height: 155px;
    font-size: 12px;
    background-color: ;
    line-height: 37px;
    margin-top: -10px;
   }
   .div17 a{
    margin-left: 25px;
    margin-bottom: 10px;
   }
   
   .div19{
    border: 1px solid #EAEAEA;
    width: 260px;
    height: 220px;
    float: left;
    font-size: 14px;
    border-style: solid solid none solid;
   }
   .div20{
    margin-left: 50px;
    margin-top: 10px;
   }
   .div20 a:hover{
    transform: scale(1.1);
    transition: all 0.8s;
   }
   .div21{
    margin-top: 50px;
    display: inline;
   }
   .div21 li {
    text-align: center;
    float: left;
    color: #888888;
    margin-left: 150px;
    margin-top: 20px;
   }
   .div21 li h3{
    color: #3e3e3e;
    margin-top: 10px;
   }
   .div21 a:hover{
    transition: all 3s ease;
    transform: rotate(360deg) scale(1.2);
   }
   .div22{
    border: 1px solid #D9D9D9;
    border-style: none none solid none; 
    width: 1300px;
    height: 400px;
    margin: 0 auto;
   }
   .div23{
    border: 1px solid white;
    width: 1300px;
    height: 190px;
   }
   .div22 dl dt{
    line-height: 30px;
    height: 30px;
    font-size: 17px;
    margin-bottom: 10px;
   }
   .div22 dl dd{
    line-height: 24px;
    color: #888888;
    font-size: 14px;
   }
   .div22 dl{
    margin-left: 50px;
    margin-right: 50px;
   }
   .div24{
    margin-left: 30px;
    margin-right: 20px;
   }
   .div25{
    margin-left: 15px;
   }
   .div25 span{
    color: #888888;
    font-size: 14px;
   }
   .div26{
    border: 1px solid white;
    width: 1300px;
    height: 200px;
    margin: 0 auto;
   }
   .div26 p{
    text-align: center;
    margin: 0px auto;
    font-size: 12px;
    color: #888888;
    margin-top: 30px;
    margin-bottom: 25px;
   }
   .div26 img{
    border: 1px solid #D9D9D9;
    border-radius:5px ;
   }
  </style>
 </head>
 <body>
  <div>
   <!--
             头部显示部分
            -->
   <header>
   <div class="div1">
     <ul>
      <li style="float: left;font-size: 14px;margin-left: 45px;margin-top: 2px;">送货至：四川</li>
      <li class="ul1"><img style="margin-right: 45px;" src="img/s_tel.png"/></li>
      <li class="ul1"><a>手机版</a></li>
      <li class="ul1">|</li>
      <li class="ul1"><img src="img/sh2.png"/></li>
      <li class="ul1"><img src="img/sh1.png"/></li>
      <li class="ul1">关注我们:</li>
      <li class="ul1">|</li>
      <li class="ul1"><img src="img/t_arrow.gif"/></li>
      <li class="ul1"><a>网站导航</a> </li>
      <li class="ul1"><img src="img/t_arrow.gif"/></li>
      <li class="ul1"><a>客户服务</a> </li>
      <li class="ul1"><img src="img/t_arrow.gif"/></li>
      <li class="ul1"><a>收藏夹</a></li>
      <li class="ul1">|</li>
      <li class="ul1"><a>我的订单</a></li>
      <li class="ul1">|</li>
      <li class="ul1"><a style="color: orangered;">免费注册</a></li>
      <li class="ul1"><a>登录</a></li>
      <li class="ul1" style="margin-top: 1px;margin-right: 0px;">您好！请</li>
     </ul>
   </div>
   </header>
   <footer>
    <div class="div6">
     <!--
                     1号店图片
                    -->
     <div>
      <span><img class="span1" src="img/logo.png"/></span>
     </div>
     <!--
                     搜索部分
                    -->
     <div class="p">
      <form action="#"method="post">
      <p>
       <input class="input1" type="search"name="sousuo"placeholder="请输入关键字" />
       <input style="margin-left: -5px;" class="input2" type="submit"value="搜索" />
      </p>
      </form>
     <div class="div2">
      <a style="margin-right:15px;">咖啡</a>
      <a style="margin-right:15px;">iPhone 6s</a>
      <a style="margin-right:15px;">新鲜美食</a>
      <a style="margin-right:15px;">蛋糕</a>
      <a style="margin-right:15px;">日用品</a>
      <a style="margin-right:15px;">连衣裙</a>
     </div>
     </div>
     <!--
                     购物车logo
                    -->
     <div>
      <span class="span2"><img style="margin-right: 20px;" src="img/car.png"/>购物车</span>
     </div>
    </div>
    <!--
                 内容主体部分
                -->
    <div class="div5">
     <!--
                     导航列单
                    -->
    <div class="div7">
     <div class="div4">全部商品分类</div>
     <ul>
      <li class="div3"style="color: orangered;"><a>首页</a></li>
      <li class="div3"style="color: orangered;"><a>自营超市</a></li>
      <li class="div3"><a>1号团</a></li>
      <li class="div3"><a>1号超市</a></li>
      <li class="div3"><a>女装</a></li>
      <li class="div3"><a>美妆</a></li>
      <li class="div3"><a>1号海购</a></li>
      <li class="div3"><a>团购</a></li>
     </ul>
     <span class="div3"style="float: right;"><img src="img/phone.png"/></span>
    </div>
   <!--
             家庭生活饮食列表
            -->
    <div>
     <!--
                     动态列表
                    -->
     <div>
      <ul class="li1">
       <li class="li2"><img class="img1" src="img/nav1.png"/>进口食品、生鲜<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav2.png"/>食品、饮料、酒<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav3.png"/>母婴、玩具、童装<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav4.png"/>家居、家庭清洁、纸品<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav5.png"/>美妆、个人护理、洗护<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav6.png"/>女装、内衣、中老年<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav7.png"/>鞋靴、箱包、腕表配饰<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav8.png"/>男装、运动<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav9.png"/>手机、小家电、电脑<img class="img2" src="img/n_arrow.gif"/></li>
       <li class="li2"><img class="img1" src="img/nav10.png"/>礼品、充值<img class="img2" src="img/n_arrow.gif"/></li>
      </ul>
     </div>
     <!--
                     广告
                    -->
                    <div class="div8">
                     <img src="img/ban1.jpg"height="400px" width="700px"/>
                     <img style="position: relative;right: 704px;" src="img/b_left.png" />
                     <img style="float: right;position: relative;right: 68px;top: 175px;" src="img/b_right.png" />
                     <ul class="ul2">
                      <li style="display: inline;"><span class="k"><a class="text1">1</a></span></li>
                      <li style="display: inline;"><span class="k"><a class="text1">2</a></span></li>
                      <li style="display: inline;"><span class="k"><a class="text1">3</a></span></li>
                     </ul>
                    </div>
       <!--
                 快讯列表
                -->
                <div class="div9">
                 <div class="div10">
              <h3 class="h3">快讯</h3>
              <span class="span3"><a>更多></a></span>
              </div>
              <div class="div11">
               <ul>
                <li class="ul3"><span class="span4">【特惠】</span><a>掬一轮明月&nbsp;表无尽惦念</a></li>
                <li class="ul3"><span class="span4">【公告】</span><a>好奇金装成长裤新品上市</a></li>
                <li class="ul3"><span class="span4">【特惠】</span><a>大牌闪购&nbsp;抢！</a></li>
                <li class="ul3"><span class="span4">【公告】</span><a>发福利&nbsp;买车就抢千元油卡</a></li>
                <li class="ul3"><span class="span4">【公告】</span><a>家电低至五折</a></li&