小兔鲜项目网页版

头部模块

 
  <header>
    
    <div class="xtx-shortcut">
      
      <nav class="container">
        <ul class="fr">
          <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>
    div>

    
    <div class="xtx-main-nav container">
      
      <h1 class="logo fl">
        <a href="#">小兔鲜儿a>
      h1>

      
      <nav class="fl">
        <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>

      
      <div class="search fl">
        <input type="search" placeholder="搜一搜">
      div>

      
      <div class="cart fl">
        <span>2span>
      div>
    div>
  header>

/* 版心的公共类 */
.container {
  width: 1240px;
  margin: 0 auto;
}

/* 快捷菜单模块：xtx-shortcut */
.xtx-shortcut {
  /* 通栏的话，不用设置宽度 */
  height: 52px;
  background-color: #333333;
}

/* container的高度与父元素xtx-shortcut保持一致 */
.xtx-shortcut .container{
  height: 52px;
  /* background-color: skyblue; */
}

.xtx-shortcut ul li {
  float:left;
  line-height: 52px;
  color:#666666;
}

.xtx-shortcut ul a{
  margin: 0 16px;
  color:#dcdcdc;
  font-size: 14px;
}

.xtx-shortcut li:last-child a {
  margin-right: 0;
}

.xtx-shortcut li:last-child a::before {
  content:'';
  display:inline-block;
  width: 11px;
  height: 16px;
  margin-top: -3px;
  margin-right: 8px;
  /* background-color: red; */
  background: url('../images/sprites.png') -160px -70px;
  vertical-align: middle;
}

/* 主导航模块：xtx-main-nav */
.xtx-main-nav {
  height: 130px;
  padding-top: 30px;
  /* 自动内减 */
  box-sizing: border-box;
  /* background-color: pink; */
}

.xtx-main-nav .logo {
  width: 207px;
  height: 70px;
  margin-left: 25px;
  /* background-color: red; */
}

.xtx-main-nav .logo a{
  display: block;
  height: 70px;
  background: url('../images/logo.png');
  background-size: 100% 100%;
  font-size: 0;
}

.xtx-main-nav nav {
  margin-left: 40px;
}

.xtx-main-nav nav li {
  float:left;
  height: 70px;
  margin-right: 48px;
  line-height: 70px;
}

.xtx-main-nav nav a:hover {
  color:#27ba9b;
  border-bottom: 1px solid #27ba9b;
  padding-bottom: 7px;
}

.xtx-main-nav .search {
  position: relative;
  width: 172px;
  height: 30px;
  margin-top: 24px;
  margin-left: 34px;
  /* background-color: orange; */
}

.xtx-main-nav .search::before{
  content:'';
  position: absolute;
  top:5px;
  left: 2px;
  width: 18px;
  height: 18px;
  /* background-color: red; */
  background: url('../images/sprites.png') -80px -70px;
}

.xtx-main-nav .search input{
  width: 172px;
  height: 30px;
  border-bottom: 2px solid #e7e7e7;
  padding-left:31px;
}

.xtx-main-nav .cart{
  position: relative;
  width: 23px;
  height: 23px;
  margin-top: 28px;
  margin-left: 15px;
  /* background-color: skyblue; */
  background: url('../images/sprites.png') -120px -70px;
}

.xtx-main-nav .cart span {
  position: absolute;
  width: 20px;
  height: 15px;
  right:-12px;
  top: -5px;
  background-color: #e26237;
  border-radius: 8px;
  color:#ffffff;
  font-size: 13px;
  text-align: center;
  line-height: 15px;
}

/* 宣传服务 xtx-service*/
.xtx-service {
  height: 174px;
  background-color: #333333;
}

.xtx-service .container{
  width: 1393px;
  height: 173px;
  border-bottom: 1px solid #434343;
  /* background-color: pink; */
}

.xtx-service .container a {
  float:left;
  width: 33.33%;
  height: 173px;
  /* background-color: skyblue; */
  text-align: center;
  line-height: 173px;
  font-size: 28px;
  color:#ffffff;
}

.xtx-service .container a::before{
  content:'';
  display: inline-block;
  width: 58px;
  height: 58px;
  margin-right: 19px;
  /* background-color: red; */
  background:url('../images/sprites.png') 0 0;
  /* 设置垂直对齐方式 */
  vertical-align:middle;
}

.xtx-service .container a:nth-child(2)::before{
  background: url('../images/sprites.png') -130px 0;
}

.xtx-service .container a:nth-child(3)::before{
  background: url('../images/sprites.png') -65px 0;
}

网站入口部分

 
  <div class="xtx-entry">
    <div class="container">
      
      <ul class="banner">
        <li>
          <a href="#">
            <img src="./uploads/banner_1.png" alt="">
          a>
        li>
      ul>

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

      
      <a href="#" class="prev">a>
      <a href="#" class="next">a>

      
      <ol class="indicator">
        <li>li>
        <li>li>
        <li class="active">li>
        <li>li>
        <li>li>
      ol>
    div>
  div>

/* 网站入口：xtx-entry */
.xtx-entry{
  height: 500px;
  background-color: #f5f5f5;
}

.xtx-entry .container{
  position: relative;
  height: 500px;
  background-color: pink;
}

.xtx-entry .container .category{
  position: absolute;
  left: 0;
  top: 0;
  width: 251px;
  height: 500px;
  background-color: rgba(0, 0, 0, .8);
}

.xtx-entry .category a{
  color:#fff;
}

.xtx-entry .category li {
  position: relative;
  height: 50px;
  padding-left: 36px;
  line-height: 50px;
}

.xtx-entry .category li:hover{
  background-color: #27ba9b;
}

.xtx-entry .category span{
  font-size: 14px;
}

.xtx-entry .category span:first-child{
  margin-left: 15px;
}

.xtx-entry .category a::after {
  content:'';
  /* 定位 */
  position: absolute;
  top: 19px;
  right: 19px;
  width: 6px;
  height: 11px;
  background:url('../images/sprites.png') -80px -110px;
}

.xtx-entry .prev {
  position: absolute;
  top: 228px;
  left: 260px;
  width: 45px;
  height: 45px;
  /* background-color: rgba(0, 0, 0, .2); */
  border-radius: 50%;
  background: rgba(0, 0, 0, .2) url('../images/sprites.png') 13px -60px;

}

.xtx-entry .next {
  position: absolute;
  top: 228px;
  right: 10px;
  width: 45px;
  height: 45px;
  /* background-color: rgba(0, 0, 0, .2); */
  border-radius: 50%;
  background: rgba(0, 0, 0, .2) url('../images/sprites.png') -22px -60px;

}

.xtx-entry .indicator {
  position: absolute;
  left: 680px;
  bottom: 31px;
  width: 110px;
  height: 10px;
  /* background-color: red; */
}

.xtx-entry .indicator li {
  float:left;
  width: 10px;
  height: 10px;
  margin-right: 15px;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.xtx-entry .indicator li.active{
  background-color: #fff;
}

.xtx-entry .indicator li:last-child {
  margin-right:0px;
}

新鲜好物模块

  <div class="xtx-new-goods container">
    
    <div class="goods-hd">
      
      <h2 class="fl">新鲜好物 <span>新鲜出炉 品质靠谱span>h2>
      
      
      <a href="#" class="fr">查看全部a>
    div>

    
    <ul class="goods-list">
      <li>
        <a href="#">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <h3>毫米无线吸尘器F8h3>
          <p><span>￥span> 899p>
        a>
      li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <h3>智能环绕3D空调h3>
          <p><span>￥span>1299p>
        a>
      li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <h3>广东软软糯米煲仔饭h3>
          <p><span>￥span>129p>
        a>
      li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <h3>罗西机械智能手表h3>
          <p><span>￥span>3399p>
        a>
      li>
    ul>
  div>

/* 新鲜好物模块：xtx-new-goods */
.xtx-new-goods{
  height: 520px;
  /* background-color: red; */
}

.xtx-new-goods .goods-hd {
  height: 115px;
  /* background-color: skyblue; */
  line-height: 115px;
}

.xtx-new-goods .goods-hd h2{
  height: 115px;
  font-size: 29px;
  font-weight: 400;
}

.xtx-new-goods .goods-hd h2 span {
  font-size: 16px;
  color:#999;
}

.xtx-new-goods .goods-hd a {
  color:#999;
}

.xtx-new-goods .goods-hd a::after{
  content:'';
  display:inline-block;
  width: 7px;
  height: 13px;
  margin-left: 13px;
  /* background-color: white; */
  background: url('../images/sprites.png') 0 -110px;
  vertical-align: middle;
}

.xtx-new-goods .goods-list {
  height: 405px;
  /* background-color: orange; */
}

.xtx-new-goods .goods-list li {
  float:left;
  width: 304px;
  height: 405px;
  margin-right: 8px;
  background-color: #f0f9f4;
  line-height: 1;
  text-align: center;
}

.xtx-new-goods .goods-list li:last-child {
  margin-right: 0px;
}

.xtx-new-goods .goods-list li img{
  width: 100%;
}

.xtx-new-goods .goods-list li h3{
  height: 30px;
  margin-top: 22px;
  font-size: 20px;
  font-weight: 400;
  /* margin-bottom: 19px; */
}

.xtx-new-goods .goods-list li p{
  color:#9a2e1f;
  font-size: 23px;
}

.xtx-new-goods .goods-list li span{
  font-size: 17px;
}

底部模块

  <footer>
    
    <div class="xtx-service">
      <div class="container">
        <a href="#">价格亲民a>
        <a href="#">物流快捷a>
        <a href="#">品质新鲜a>
      div>
    div>
    
    <div class="xtx-copyright">
      <div class="container">
        <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>
  footer>

* 版权信息模块xtx-copyright */
.xtx-copyright {
  height: 168px;
  background-color: #333;
}

.xtx-copyright .container {
  height: 168px;
  padding-top: 41px;
  box-sizing: border-box;
  /* background-color: pink; */
  text-align: center;
  font-size: 14px;
  color:#999;
}

.xtx-copyright .container a{
  color:#999;
}

.xtx-copyright .container p:first-child {
  height: 35px;
}