小兔鲜网页制作

于 2024-12-30 17:50:29 发布
阅读量217 收藏 3
点赞数 8
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sanguine__/article/details/144772619
版权

1.top-nav上导航栏

<div class="top-nav">
      <div class="contain">
        <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>

css： 头部和尾部内容抽取出来写在common.css里面，方便调用

/*版心  */
.contain {
  width: 1240px;
  margin: 0 auto;
}

.top-nav {
  height: 52px;
  background-color: #333333;




}

.top-nav ul {
  float: right;
  list-style: none;
}

.top-nav ul li a {
  text-decoration: none;
  color: #dcdcdc;
  padding: 0 13px;
  display: block;
  border-right: 1px solid #dcdcdc;

}

.top-nav ul li a:hover {
  color: #27BA9B;
}

.top-nav ul li {
  float: left;
}

.top-nav ul li:last-child a {
  border-right: 0;
}

.top-nav ul li:last-child a::before {
  content: '';
  width: 11px;
  height: 16px;
  background-color: white;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -3px;
}

2.主导航 main-nav

<div class="main-nav">
      <div class="contain">
        <div class="logo">
          <h1>
            <a href="#" title="小兔鲜官网">小兔鲜</a>
          </h1>
        </div>
        <!-- nav导航 -->
        <nav class="nav clearfix">
          <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>

          </ul>

        </nav>
        <!-- search模块 -->
        <div class="search clearfix">
          <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <div class="chart">
          <a href="#">
            <span>2</span>
          </a>

        </div>

      </div>
    </div>

css：

.main-nav {
  height: 130px;

}

.logo {
  float: left;
  width: 207px;
  height: 70px;
  margin-top: 30px;

  padding: 0;


}

.logo a {
  display: block;
  width: 207px;
  height: 70px;
  text-indent: -100px;
  overflow: hidden;
  background: url('./06-素材(2)/电梯导航素材/images/logo.png') no-repeat;
  background-size: 207px 70px;


}

ul,
h1 {
  padding: 0;
  margin: 0;
}

/* 隐藏文字，向左移出去 ,另一种方法：font-size：0，*/
.nav {
  float: left;
  margin-left: 40px;
  margin-top: 56px;
}



.nav ul li {
  float: left;
  margin-right: 48px;
  list-style: none;


}

.nav ul li a {
  text-decoration: none;
  display: block;
  padding-bottom: 6px;
  color: black;
}

.nav ul li a:hover {
  color: #27BA9B;
  border-bottom: 1px solid #27BA9B;
}

.search {
  position: relative;
  margin-top: 52px;
  margin-left: 20px;
  float: left;
  width: 172px;
  height: 30px;



}

.search input {

  width: 100%;
  height: 100%;
  padding-left: 30px;
  border: none;
  outline: none;
  color: #333;
  border-bottom: 2px solid #e7e7e7e7;

}

.search::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0px;
  width: 18px;
  height: 18px;
  background-color: purple;
  /* 这里换成精灵图放大镜 */
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: block;
}

.clearfix:after {
  clear: both;
}

.chart {
  padding: 0;
  margin: 52px 0 0 45px;
  float: left;

}

.chart a {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  background-color: purple;
}

.chart a span {
  position: absolute;
  top: -8px;
  left: 14px;
  background-color: #e26237;
  border-radius: 8px;
  font-size: 13px;
  padding: 0 6px;
  color: #fff;
}

3.尾部 上部分

<div class="concat">
      <div class="contain">
        <dl class="service">
          <dt>客户服务</dt>
          <dd class="kefu">在线客服</dd>
          <dd class="wenti">问题反馈</dd>
        </dl>
        <dl class="service">
          <dt>关注我们</dt>
          <dd class="kefu">公众号</dd>
          <dd class="wenti">微博</dd>
        </dl>
        <dl class="service">
          <dt>关注我们</dt>
          <dd class="kefu">公众号</dd>
          <dd class="wenti">微博</dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="tel">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>

css：

dl,
dt,
dd {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.concat {
  height: 300px;

}

.concat .contain {
  padding-top: 75px;
}

.service {
  width: 310px;
  padding: 0 55px;
  float: left;
  border-right: 1px solid #eee;


}

.concat dl dt {
  text-align: center;
  color: #999;
}

.service dd {
  border: 1px solid #eee;
  margin-top: 35px;
  float: left;
  color: #999;
  width: 92px;
  height: 92px;
  text-align: center;
}

.service dd:nth-child(2) {
  margin-right: 6px;
}

.service dd::before {
  content: '';
  width: 29px;
  height: 27px;
  display: block;
  margin: 20px auto 10px;
}

.service .kefu::before {
  background-color: purple;
}

.service .wenti::before {
  background-color: green;
}

.tel {
  color: #666;
  font-size: 22px;
  padding-top: 60px;
  text-align: center;

}

small {
  font-size: 80%;
  display: block;
  font-size: 15px;
  color: #999;
}

4. 底部

 <section class="slogan">
          <ul>
            <li>价格亲民</li>
            <li>物流快捷</li>
            <li>品质新鲜</li>

          </ul>
        </section>
        <div class="copyright">
          <p>
            <a href="#">关于我们</a> |
            <a href="#">帮助中心</a> |
            <a href="#">售后服务</a> |
            <a href="#">配送与验收</a> |
            <a href="#">商务合作</a> |
            <a href="#">搜索推荐</a> |
            <a href="#">友情链接</a> |
          </p>
          <p>CopyRight @ 小兔鲜儿</p>
        </div>
.footer-bd {
  height: 340px;
  background-color: #333;
}

.slogan {
  height: 124px;
  padding-top: 56px;
  border-bottom: 3px solid #434343;
}

.slogan ul {
  list-style: none;

}

.slogan ul li {
  float: left;
  width: 413px;
  height: 58px;

  font-size: 28px;
  text-align: center;
  line-height: 58px;
  color: #fff;
}

.slogan ul li::before {
  content: '';
  display: inline-block;
  /* 要和文字一行，所以是行内块元素，中线对齐 */
  vertical-align: middle;
  width: 58px;
  height: 58px;
  background-color: purple;
  /* 换成精灵图 */
  margin: -7px 10px 0 0;
}

.copyright {
  color: #999;
  padding-top: 40px;
  font-size: 14px;
  text-align: center;
}

.copyright a {
  color: #999;
  padding: 0 8px;
}

.copyright p {
  margin-bottom: 15px;
}

5.中间内容，新建一个css 

5.1 entry入口块

<!-- entry入口模块 -->
  <section class="entry">
    <div class="contain">
      <!-- 轮播图 -->
      <div class="banner">
        <!-- 图片模块 -->
        <ul>
          <li><a href="#"><img src="./06-素材(2)/电梯导航素材/uploads/banner_1.png" alt=""></a></li>
        </ul>
        <!-- 左右按钮模块 -->
        <a href="#" class="pre"></a>
        <a href="#" class="next"></a>
        <!-- 小圆点模块 -->
        <ul class="circle">
          <li></li>
          <li class="active"></li>
          <li></li>
          <li></li>

        </ul>

      </div>
      <!-- 侧边栏 -->
      <aside class="category">
        <ul>
          <li><a href="#"><em>生鲜</em> 水果 蔬菜</a></li>
          <li><a href="#"><em>美食</em> 面点 干果</a></li>
          <li><a href="#"><em>电器</em> 数码产品</a></li>
          <li><a href="#"><em>居家</em> 床品 四件套 被枕</a></li>
          <li><a href="#"><em>洗护</em> 洗发洗护 美妆</a></li>
          <li><a href="#"><em>孕婴</em> 奶粉 玩具 辅食</a></li>
          <li><a href="#"><em>餐橱</em> 数码产品</a></li>
          <li><a href="#"><em>服饰</em> 女装 男装</a></li>
          <li><a href="#"><em>杂货</em> 户外 图书</a></li>
          <li><a href="#"><em>品牌</em> 品牌制造</a></li>
        </ul>

      </aside>
    </div>
  </section>
.entry {
  height: 500px;
  background-color: #f5f5f5f5;
}

ul {
  list-style: none;
}

.banner {
  position: relative;
  height: 500px;

}

.banner ul li a {
  display: block;
  width: 100%;
  height: 500px;
}

.next,
.pre {
  position: absolute;
  height: 45px;
  width: 45px;
  top: 50%;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
}

.next {
  right: 10px;
}

.pre {
  left: 260px;
}

.circle {
  position: absolute;
  bottom: 30px;
  left: 680px;
}

.circle li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 15px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.circle .active {
  background: rgba(255, 255, 255, 1);
}

.entry .contain {
  position: relative;
}

.category {
  position: absolute;
  width: 250px;
  height: 500px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
}

.category ul li a {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  padding-left: 36px;

}

.category ul li a:hover {
  background-color: #27ba9b;
}

.category em {
  font-style: normal;
  font-size: 16px;
  margin-right: 14px;
  vertical-align: middle;
}

.category ul li a::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 6px;
  height: 14px;
  background-color: pink;
  /* 替换成精灵图 */
}

5.2 新鲜购物模块 

 <!-- 新鲜购物模块 -->
  <div class="contain">
    <div class="xtx-panel-box">
      <div class="box-hd">
        <h3>新鲜好物
          <small>新鲜出炉 品质靠谱</small>
        </h3>
        <a href="#" class="more">查看更多</a>

      </div>
      <div class="box-bd">
        <ul>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_1.jpg" alt="">
            <h4>睿米无线吸尘器F8</h4>
            <p>￥<span>899</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_2.jpg" alt="">
            <h4>智能环绕3D空调</h4>
            <p>￥<span>1299</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_3.jpg" alt="">
            <h4>广东软软糯米煲仔饭</h4>
            <p>￥<span>129</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_4.jpg" alt="">
            <h4>罗西机械智能手表</h4>
            <p>￥<span>3399</span></p>
            <div class="new">新品</div>
          </li>

        </ul>

      </div>
    </div>
  </div>
/* 新鲜购物模块 */
.box-hd {
  height: 60px;
  margin-top: 40px;

}

.box-hd h3 {
  padding: 0;
  margin: 0;
  float: left;

  font-size: 29px;
  font-weight: 400;
}

.box-hd h3 small {
  display: inline-block;
  font-size: 16px;
  color: #999;
  margin-left: 20px;
}

.box-hd .more {
  float: right;
  margin-top: 10px;
  text-decoration: none;
  color: #999;

}

.box-hd .more::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 10px;
  background-color: pink;
  /* 替换成>精灵图 */

}

.box-bd {
  height: 408px;

}

.box-bd ul li {
  position: relative;
  text-align: center;
  color: #333333;
  top: 0;
  float: left;
  width: 304px;
  height: 408px;
  margin-right: 8px;
  background-color: #f0f9f4;
  transition: all .3s;
}

.box-bd ul li:last-child {
  margin-right: 0;
}

.box-bd ul li img {
  width: 304px;
  height: 305px;
}



.box-bd ul li h4 {
  margin: 18px 0 10px 0;
  font-size: 20px;
  font-weight: 400;

}

.box-bd ul li p {
  font-size: 17px;
  color: #9a2e1f;
}

.box-bd ul li p span {
  font-size: 23px;
}

.box-bd ul li .new {
  position: absolute;
  left: 16px;
  top: 18px;
  height: 51px;
  width: 29px;
  border: 1px solid #27ba9b;
  color: #27ba9b;
  font-size: 16px;

  border-radius: 3px;
  line-height: 22px;
}

.box-bd ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.box-bd ul li:hover {
  top: -5px;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);

}

 

5.3 生鲜模块

 <!-- 生鲜模块 -->
  <div class="contain">
    <div class="xtx-panel-box">
      <div class="box-hd">
        <h3>生鲜</h3>
        <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>
        <a href="#" class="more">查看更多</a>



      </div>
      <div class="goods">
        <div class="goods-l">
          <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_cover.jpg" alt="">
        </div>
        <div class="goods-r">
          <ul>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_1.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_2.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_3.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_4.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_5.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_6.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_7.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_8.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>

          </ul>
        </div>
      </div>

    </div>
  </div>
.box-hd ul {
  float: left;
  margin: 9px 0 0 635px;
}

.box-hd ul li {
  float: left;
  margin: 0 12px;
}

.box-hd ul li a {
  text-decoration: none;
  color: #333;
}

.box-hd ul li a:hover {
  background-color: #27ba9b;
  color: white;
}

.goods {
  height: 610px;

}

.goods .goods-l {
  float: left;
  height: 610px;
  width: 240px;


}

.goods .goods-l img {
  width: 240px;
  height: 610px;
}

.goods .goods-r {
  float: left;
  height: 610px;
  width: 1000px;

}

.goods-r ul li {
  position: relative;
  float: left;
  overflow: hidden;
  width: 238px;
  height: 304px;
  border: 2px solid transparent;
  margin-left: 8px;
  transition: all .5s;

}

.goods-r ul li:hover {
  border: 2px solid #27ba9b;
}

.pic {
  height: 160px;
  padding: 0 35px;

}

.pic img {
  width: 100%;
  height: 100%;
}

.goods-r ul li h4 {
  font-weight: 400;
  padding: 0 25px;
  margin: 0;


}

.goods-r ul li p {
  padding: 0 25px;
  margin: 0;

}

.price {
  padding: 0 25px;
  font-size: 17px;
  color: #9a2e1f;
}

.price span {
  font-size: 22px;
}

.goods-r ul li .find-simila {
  position: absolute;
  box-sizing: border-box;

  left: 0;
  bottom: -85px;
  height: 84px;
  width: 100%;
  background-color: #27ba9b;
  text-align: center;
  color: #fff;
  padding: 19px 55px 0;
  transition: all .5s;
}

.goods-r .find-simila h5 {
  padding-bottom: 7px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  border-bottom: 1px solid #ccc;


}

.goods-r ul li .find-simila span {
  font-size: 13px;

  padding-top: 5px;
}

.goods-r ul li:hover .find-simila {
  bottom: 0;
}

.goods-r ul li a {
  text-decoration: none;
  color: inherit;
}

整体的文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="index.css">

</head>

<body>
  <header>
    <div class="top-nav">
      <div class="contain">
        <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="main-nav">
      <div class="contain">
        <div class="logo">
          <h1>
            <a href="#" title="小兔鲜官网">小兔鲜</a>
          </h1>
        </div>
        <!-- nav导航 -->
        <nav class="nav clearfix">
          <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>

          </ul>

        </nav>
        <!-- search模块 -->
        <div class="search clearfix">
          <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <div class="chart">
          <a href="#">
            <span>2</span>
          </a>

        </div>

      </div>
    </div>

  </header>
  <!-- entry入口模块 -->
  <section class="entry">
    <div class="contain">
      <!-- 轮播图 -->
      <div class="banner">
        <!-- 图片模块 -->
        <ul>
          <li><a href="#"><img src="./06-素材(2)/电梯导航素材/uploads/banner_1.png" alt=""></a></li>
        </ul>
        <!-- 左右按钮模块 -->
        <a href="javascript:;" class="pre"></a>
        <a href="javascript:;" class="next"></a>
        <!-- 小圆点模块 -->
        <ul class="circle">
          <li></li>
          <li class="active"></li>
          <li></li>
          <li></li>

        </ul>

      </div>
      <!-- 侧边栏 -->
      <aside class="category">
        <ul>
          <li><a href="#"><em>生鲜</em> 水果 蔬菜</a></li>
          <li><a href="#"><em>美食</em> 面点 干果</a></li>
          <li><a href="#"><em>电器</em> 数码产品</a></li>
          <li><a href="#"><em>居家</em> 床品 四件套 被枕</a></li>
          <li><a href="#"><em>洗护</em> 洗发洗护 美妆</a></li>
          <li><a href="#"><em>孕婴</em> 奶粉 玩具 辅食</a></li>
          <li><a href="#"><em>餐橱</em> 数码产品</a></li>
          <li><a href="#"><em>服饰</em> 女装 男装</a></li>
          <li><a href="#"><em>杂货</em> 户外 图书</a></li>
          <li><a href="#"><em>品牌</em> 品牌制造</a></li>
        </ul>

      </aside>
    </div>
  </section>
  <!-- 新鲜购物模块 -->
  <div class="contain">
    <div class="xtx-panel-box">
      <div class="box-hd">
        <h3>新鲜好物
          <small>新鲜出炉 品质靠谱</small>
        </h3>
        <a href="#" class="more">查看更多</a>

      </div>
      <div class="box-bd">
        <ul>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_1.jpg" alt="">
            <h4>睿米无线吸尘器F8</h4>
            <p>￥<span>899</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_2.jpg" alt="">
            <h4>智能环绕3D空调</h4>
            <p>￥<span>1299</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_3.jpg" alt="">
            <h4>广东软软糯米煲仔饭</h4>
            <p>￥<span>129</span></p>
            <div class="new">新品</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/new_goods_4.jpg" alt="">
            <h4>罗西机械智能手表</h4>
            <p>￥<span>3399</span></p>
            <div class="new">新品</div>
          </li>

        </ul>

      </div>
    </div>
  </div>
  <!-- 人气推荐 -->
  <div class="contain">
    <div class="xtx-panel-box renqi">
      <div class="box-hd">
        <h3>人气推荐
          <small>人气爆款 不容错过</small>
        </h3>


      </div>
      <div class="box-bd">
        <ul>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/popular_1.jpg" alt="">
            <h4>特惠推荐</h4>
            <div class="info">我猜得到 你的需要</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/popular_2.jpg" alt="">
            <h4>爆款推荐</h4>
            <div class="info">人气好物推荐</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/popular_3.jpg" alt="">
            <h4>场景使用一站买全</h4>
            <div class="info">编辑精心整理推荐</div>
          </li>
          <li><img src="./06-素材(2)/电梯导航素材/uploads/popular_4.jpg" alt="">
            <h4>领劵中心</h4>
            <div class="info">发现更多超值优惠劵</div>
          </li>

        </ul>

      </div>
    </div>
  </div>
  <!-- 生鲜模块 -->
  <div class="contain">
    <div class="xtx-panel-box">
      <div class="box-hd">
        <h3>生鲜</h3>
        <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>
        <a href="#" class="more">查看更多</a>



      </div>
      <div class="goods">
        <div class="goods-l">
          <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_cover.jpg" alt="">
        </div>
        <div class="goods-r">
          <ul>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_1.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_2.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_3.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_4.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_5.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_6.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_7.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>
            <li>
              <a href="#">
                <div class="pic">
                  <img src="./06-素材(2)/电梯导航素材/uploads/fresh_goods_8.jpg" alt="">

                </div>
                <h4>美威 智利原味三文鱼排 240g/袋 4片装</h4>
                <p>海鲜年货</p>
                <div class="price">￥<span>59</span></div>
              </a>

              <div class="find-simila">
                <h5>找相似</h5>
                <span><a href="#">发现更多宝贝 ></a></span>
              </div>
            </li>

          </ul>
        </div>
      </div>

    </div>
  </div>


  <!-- 页面底部 -->
  <footer>
    <div class="concat">
      <div class="contain">
        <dl class="service">
          <dt>客户服务</dt>
          <dd class="kefu">在线客服</dd>
          <dd class="wenti">问题反馈</dd>
        </dl>
        <dl class="service">
          <dt>关注我们</dt>
          <dd class="kefu">公众号</dd>
          <dd class="wenti">微博</dd>
        </dl>
        <dl class="service">
          <dt>关注我们</dt>
          <dd class="kefu">公众号</dd>
          <dd class="wenti">微博</dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="tel">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <div class="footer-bd">
      <div class="contain">
        <section class="slogan">
          <ul>
            <li>价格亲民</li>
            <li>物流快捷</li>
            <li>品质新鲜</li>

          </ul>
        </section>
        <div class="copyright">
          <p>
            <a href="#">关于我们</a> |
            <a href="#">帮助中心</a> |
            <a href="#">售后服务</a> |
            <a href="#">配送与验收</a> |
            <a href="#">商务合作</a> |
            <a href="#">搜索推荐</a> |
            <a href="#">友情链接</a> |
          </p>
          <p>CopyRight @ 小兔鲜儿</p>
        </div>

      </div>
    </div>
  </footer>

</body>

</html>

 common.css

/*版心  */
.contain {
  width: 1240px;
  margin: 0 auto;
}

.top-nav {
  height: 52px;
  background-color: #333333;




}

.top-nav ul {
  margin-top: 15px;
  float: right;
  list-style: none;
}

.top-nav ul li a {
  text-decoration: none;
  color: #dcdcdc;
  padding: 0 13px;
  display: block;
  border-right: 1px solid #dcdcdc;

}

.top-nav ul li a:hover {
  color: #27BA9B;
}

.top-nav ul li {
  float: left;
}

.top-nav ul li:last-child a {
  border-right: 0;
}

.top-nav ul li:last-child a::before {
  content: '';
  width: 11px;
  height: 16px;
  background-color: white;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -3px;
}

.main-nav {
  height: 130px;

}

.logo {
  float: left;
  width: 207px;
  height: 70px;
  margin-top: 30px;

  padding: 0;


}

.logo a {
  display: block;
  width: 207px;
  height: 70px;
  text-indent: -100px;
  overflow: hidden;
  background: url('./06-素材(2)/电梯导航素材/images/logo.png') no-repeat;
  background-size: 207px 70px;


}

ul,
h1 {
  padding: 0;
  margin: 0;
}

/* 隐藏文字，向左移出去 ,另一种方法：font-size：0，*/
.nav {
  float: left;
  margin-left: 40px;
  margin-top: 56px;
}



.nav ul li {
  float: left;
  margin-right: 48px;
  list-style: none;


}

.nav ul li a {
  text-decoration: none;
  display: block;
  padding-bottom: 6px;
  color: black;
}

.nav ul li a:hover {
  color: #27BA9B;
  border-bottom: 1px solid #27BA9B;
}

.search {
  position: relative;
  margin-top: 52px;
  margin-left: 20px;
  float: left;
  width: 172px;
  height: 30px;



}

.search input {

  width: 100%;
  height: 100%;
  padding-left: 30px;
  border: none;
  outline: none;
  color: #333;
  border-bottom: 2px solid #e7e7e7e7;

}

.search::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0px;
  width: 18px;
  height: 18px;
  background-color: purple;
  /* 这里换成精灵图放大镜 */
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: block;
}

.clearfix:after {
  clear: both;
}

.chart {
  padding: 0;
  margin: 52px 0 0 45px;
  float: left;

}

.chart a {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  background-color: purple;
}

.chart a span {
  position: absolute;
  top: -8px;
  left: 14px;
  background-color: #e26237;
  border-radius: 8px;
  font-size: 13px;
  padding: 0 6px;
  color: #fff;
}

/* 底部 */
dl,
dt,
dd {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.concat {
  height: 300px;

}

.concat .contain {
  padding-top: 75px;
}

.service {
  width: 310px;
  padding: 0 55px;
  float: left;
  border-right: 1px solid #eee;


}

.concat dl dt {
  text-align: center;
  color: #999;
}

.service dd {
  border: 1px solid #eee;
  margin-top: 35px;
  float: left;
  color: #999;
  width: 92px;
  height: 92px;
  text-align: center;
}

.service dd:nth-child(2) {
  margin-right: 6px;
}

.service dd::before {
  content: '';
  width: 29px;
  height: 27px;
  display: block;
  margin: 20px auto 10px;
}

.service .kefu::before {
  background-color: purple;
}

.service .wenti::before {
  background-color: green;
}

.tel {
  color: #666;
  font-size: 22px;
  padding-top: 60px;
  text-align: center;

}

small {
  font-size: 80%;
  display: block;
  font-size: 15px;
  color: #999;
}

.footer-bd {
  height: 340px;
  background-color: #333;
}

.slogan {
  height: 124px;
  padding-top: 56px;
  border-bottom: 3px solid #434343;
}

.slogan ul {
  list-style: none;

}

.slogan ul li {
  float: left;
  width: 413px;
  height: 58px;

  font-size: 28px;
  text-align: center;
  line-height: 58px;
  color: #fff;
}

.slogan ul li::before {
  content: '';
  display: inline-block;
  /* 要和文字一行，所以是行内块元素，中线对齐 */
  vertical-align: middle;
  width: 58px;
  height: 58px;
  background-color: purple;
  /* 换成精灵图 */
  margin: -7px 10px 0 0;
}

.copyright {
  color: #999;
  padding-top: 40px;
  font-size: 14px;
  text-align: center;
}

.copyright a {
  color: #999;
  padding: 0 8px;
}

.copyright p {
  margin-bottom: 15px;
}

index.css

.entry {
  height: 500px;
  background-color: #f5f5f5f5;
}

ul {
  list-style: none;
}

.banner {
  position: relative;
  height: 500px;

}

.banner ul li a {
  display: block;
  width: 100%;
  height: 500px;
}

.next,
.pre {
  position: absolute;
  height: 45px;
  width: 45px;
  top: 50%;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
}

.next {
  right: 10px;
}

.pre {
  left: 260px;
}

.circle {
  position: absolute;
  bottom: 30px;
  left: 680px;
}

.circle li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 15px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.circle .active {
  background: rgba(255, 255, 255, 1);
}

.entry .contain {
  position: relative;
}

.category {
  position: absolute;
  width: 250px;
  height: 500px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
}

.category ul li a {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  padding-left: 36px;

}

.category ul li a:hover {
  background-color: #27ba9b;
}

.category em {
  font-style: normal;
  font-size: 16px;
  margin-right: 14px;
  vertical-align: middle;
}

.category ul li a::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 6px;
  height: 14px;
  background-color: pink;
  /* 替换成精灵图 */
}

/* 新鲜购物模块 */
.box-hd {
  height: 60px;
  margin-top: 40px;

}

.box-hd h3 {
  padding: 0;
  margin: 0;
  float: left;

  font-size: 29px;
  font-weight: 400;
}

.box-hd h3 small {
  display: inline-block;
  font-size: 16px;
  color: #999;
  margin-left: 20px;
}

.box-hd .more {
  float: right;
  margin-top: 10px;
  text-decoration: none;
  color: #999;

}

.box-hd .more::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 10px;
  background-color: pink;
  /* 替换成>精灵图 */

}

.box-bd {
  height: 408px;

}

.box-bd ul li {
  position: relative;
  text-align: center;
  color: #333333;
  top: 0;
  float: left;
  width: 304px;
  height: 408px;
  margin-right: 8px;
  background-color: #f0f9f4;
  transition: all .3s;
}

.box-bd ul li:last-child {
  margin-right: 0;
}

.box-bd ul li img {
  width: 304px;
  height: 305px;
}



.box-bd ul li h4 {
  margin: 18px 0 10px 0;
  font-size: 20px;
  font-weight: 400;

}

.box-bd ul li p {
  font-size: 17px;
  color: #9a2e1f;
}

.box-bd ul li p span {
  font-size: 23px;
}

.box-bd ul li .new {
  position: absolute;
  left: 16px;
  top: 18px;
  height: 51px;
  width: 29px;
  border: 1px solid #27ba9b;
  color: #27ba9b;
  font-size: 16px;

  border-radius: 3px;
  line-height: 22px;
}

.box-bd ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.box-bd ul li:hover {
  top: -5px;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);

}

.info {
  color: #999;
}

.renqi .box-bd ul li {
  background-color: #fff;
}

.box-hd ul {
  float: left;
  margin: 9px 0 0 635px;
}

.box-hd ul li {
  float: left;
  margin: 0 12px;
}

.box-hd ul li a {
  text-decoration: none;
  color: #333;
}

.box-hd ul li a:hover {
  background-color: #27ba9b;
  color: white;
}

.goods {
  height: 610px;

}

.goods .goods-l {
  float: left;
  height: 610px;
  width: 240px;


}

.goods .goods-l img {
  width: 240px;
  height: 610px;
}

.goods .goods-r {
  float: left;
  height: 610px;
  width: 1000px;

}

.goods-r ul li {
  position: relative;
  float: left;
  overflow: hidden;
  width: 238px;
  height: 304px;
  border: 2px solid transparent;
  margin-left: 8px;
  transition: all .5s;

}

.goods-r ul li:hover {
  border: 2px solid #27ba9b;
}

.pic {
  height: 160px;
  padding: 0 35px;

}

.pic img {
  width: 100%;
  height: 100%;
}

.goods-r ul li h4 {
  font-weight: 400;
  padding: 0 25px;
  margin: 0;


}

.goods-r ul li p {
  padding: 0 25px;
  margin: 0;

}

.price {
  padding: 0 25px;
  font-size: 17px;
  color: #9a2e1f;
}

.price span {
  font-size: 22px;
}

.goods-r ul li .find-simila {
  position: absolute;
  box-sizing: border-box;

  left: 0;
  bottom: -85px;
  height: 84px;
  width: 100%;
  background-color: #27ba9b;
  text-align: center;
  color: #fff;
  padding: 19px 55px 0;
  transition: all .5s;
}

.goods-r .find-simila h5 {
  padding-bottom: 7px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  border-bottom: 1px solid #ccc;


}

.goods-r ul li .find-simila span {
  font-size: 13px;

  padding-top: 5px;
}

.goods-r ul li:hover .find-simila {
  bottom: 0;
}

.goods-r ul li a {
  text-decoration: none;
  color: inherit;
}

sanguine__
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值