HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

本章目标

LESS

1.什么是less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁，可以被翻译为CSS。

在vs code安装less的编译插件

安装插件Easy LESS，如下图所示

有了这个后，可以在编辑器新建less文件，后缀名是.less,保存后会自动编译成css

2. 变量

less可以声明变量，在其它地方直接引用。

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

将其编译成 CSS 代码如下：

p{
    background-color: #ffffff;
    color: #1A237E;
    padding: 15px;
}

ul{
    background-color: #ffffff;
}

li{
    color: #1A237E;
}

现在我们要切换二者的值，也就是黑色的背景和白色的文本，我们只需要修改两个变量的值就可以了，而不是手动的去修改每个值。

---

3. Mixins

Less 允许我们将常用的样式，打包封装到 class 或 id 选择器中。 其它地方可以方便的引用。

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
   50px;
  height: 50px;
  #circle
}

#big-circle{
   100px;
  height: 100px;
  #circle
}

将其转换成 CSS 代码如下

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
     50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
     100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

如果只用于样式打包，而不出现在css代码中，那么请在它的后面加上括号：

#circle(){
    background-color: #4CAF50;
    border-radius: 100%;
}

#small-circle{
     50px;
    height: 50px;
    #circle
}

#big-circle{
     100px;
    height: 100px;
    #circle
}

此时编译成 CSS :

#small-circle {
     50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
     100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

Mixin 另一个比较酷的功能就是它支持传入参数，下面这个例子就为 circle 传入一个指定宽高的参数，默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

     @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

转换成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
     25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
     100px;
    height: 100px;
}

---

4. 嵌套

嵌套可用于以与页面的HTML结构相匹配的方式构造样式表，同时减少了冲突的机会。下面是一个无序列表的例子。

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

编译成 CSS 代码：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

就像在其它高级语言中一样， Less 的变量根据范围接受它们的值。如果在指定范围内没有关于变量值的声明， less 会一直往上查找，直至找到离它最近的声明。

回到 CSS 中来，我们的 li 标签将有白色的文本，如果我们在 ul 标签中声明 @text-color 规则。

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

编译生成的 CSS 代码如下：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

---

5. 运算

你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签，第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

@div- 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
     @div-width;
    background-color: @color;
}

#right{
     @div-width * 2;
    background-color: @color;
}

编译成 CSS 如下：

div {
    height: 50px;
    display: inline-block;
}
#left {
     100px;
    background-color: #03a9f4;
}
#right {
     200px;
    background-color: #03a9f4;
}

vw单位

vw是css的一个属性，和px，rem等类似，属于长度单位。

在浏览器中， 1 vw = viewport 的宽度 /100

根据这个特性，vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。

推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。

@vv:7.5vw;

.circle{
   100/@vv;
  height: 100/@vv;
  border: 1px solid red;
  border-radius: 50%;
  font-size: 16/@vv;
  text-align: center;
  line-height: 100/@vv;
}

header.clear{
   100%;
  height: 80/@vv;
  font-size: 42/@vv;
  background: #ededed;
  line-height: 80/@vv;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vw布局练习</title>
    <link href="less/style.css" rel="stylesheet" type="text/css">

</head>

<body>
    <header class="clear">
        这是header
    </header>
    <div class="circle">
        circle
    </div>
</body>
</html>

下面三张图分别是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表现

原理
以设计稿为750为例，假设viewport代表窗口宽度

750 => viewport
7.5 => viewport/100
//得到
1vw => 7.5
// 元素list 宽为300px
300 => 300/7.5 vw
//得到
@vv = 7.5vw
300 => 300/@vv

阿里图标库iconfont使用

话不多说 进入官网 https://www.iconfont.cn/
搜索你想要的 ，比如【我的】

出来以后加入购物车

点击购物车

点击添加至项目 这时你如果没登录的话 ，会让你登陆随便选择一个登陆方式比如 github

登陆成功之后你可以选择新建也可以选择老的项目

确定好之后会是这样一个页面，然后下载至本地

下载后解压会是一些这样的文件

然后像我这样把字体文件和css文件拿到你的项目里

看下效果

移动端首页制作

顶部搜索框

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="less/style.css">
</head>
<body>
  <div class="com-header-area">
    <div class="search-box">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="书名、作者、出版社、ISBN、文具">
    </div>
  </div>
</body>
</html>

less

@vv:3.75vw;

/*默认样式重置(css reset)*/
*{
  margin: 0;
  font-size: 12/@vv; /* 中文字体大小的最小值 */
  /* font-family: xx; 也可以设置字体 */
}
ol,ul {
  list-style: none; /* 去除列表样式 */
  padding: 0;
  margin: 0;
}

a {
  color: #464646;
  text-decoration: none;
}

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area{
  background-color: #f0f0f0;
  padding: 6/@vv 10/@vv;
  .search-box{
    background-color: #fff;
    display: flex;
    align-items: center;
    input{
      border: 0;
      padding: 6/@vv 0;
       100%;
    }
    span{
      font-size: 12/@vv;
    }
  }
}

热门搜索

html

  <div class="com-content">
    <ul class="hot-search">
      <li class="hot">热门搜索：</li>
      <li><a href="#">高等数学</a></li>
      <li><a href="#">高等数学</a></li>
      <li><a href="#">高等数学</a></li>
      <li><a href="#">高等数学</a></li>
    </ul>
  </div>

css

.com-content{
  background-color:#e1e5ee;
  .hot-search{
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 2/@vv;
    li{
      margin: 0 4/@vv;
      &.hot{
        color: orange;
      }
      a{
        color: #ccc;
      }
    }
  }
}

轮播图

html

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

css

  .slide {
    img {
      width : 375/@vv;
      height: 187.5/@vv;
    }
  }

保证条款

html

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保证正品</span>
        <span class="guarantee-span"><span class="check">√</span>保证低价</span>
        <span class="guarantee-span"><span class="check">√</span>24小时发货</span>
        <span class="guarantee-span"><span class="check">√</span>无理由退货</span>
      </div>

css

  .guarantee-g {
    display        : flex;
    justify-content: center;
    background     : #fff;

    .guarantee-span {
      margin   : 6/@vv;
      .check {
        color: red;
      }
    }
  }

五大模块

html

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
      </div>

css

  .tab {
    display        : flex;
    justify-content: space-around;
    background     : #fff;
    a {
      display       : flex;
      flex-direction: column;
      align-items   : center;
      padding       : 6/@vv;
      img {
        width : 26/@vv;
        height: 26/@vv;
      }
    }
  }

中栏广告

html

    <div class="bookList">
        <div>
          <a href="#"><img style="100%;" src="img/ico_index.gif"></a>
        </div>
      </div>

推荐图书

html

      <div class="bookList">
        <div>
          <a href="#"><img style="100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推荐图书</span>
            <span class="left-arrow">您喜欢的都在这里</span>
            <a class="span-more">更多</a>
          </div>
        </div>
      </div>

css

.book-items {
    background: #fff;
    color     : #757070;

	.item {
      line-height: 42/@vv;
      display    : flex;
      font-weight: bold;
      .book_recommend {
        font-size  : 14/@vv;
        margin-left: 14/@vv;
      }

      .left-arrow {
        margin-left: 20/@vv;
      }

      a {
        margin-left : auto;
        margin-right: 20/@vv;
      }
    }
  }

推荐图书列表

html

   <div class="list-recommend">
          <ul>
            <li>
              <a href="#">
                <div class="book-img">
                  <img alt="阿弥陀佛么么哒" src="img/book.jpg">
                </div>
                <div class="bookName">阿弥陀佛么么哒</div>
                <div class="price">
                  <span>有路价 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥14.30</span>
                </div>
              </a>
            </li>
            <li><a href="#">
                <div class="book-img"><img alt="乖.摸摸头" src="img/book.jpg"></div>
                <div class="bookName">乖.摸摸头</div>
                <div class="price">
                  <span>有路价 ￥14.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥13.30</span>
                </div>
              </a></li>
            <li><a href="#">
                <div class="book-img"><img alt="好吗好的" src="img/book.jpg"></div>
                <div class="bookName">好吗好的</div>
                <div class="price">
                  <span>有路价 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP价 ￥14.30</span>
                </div>
              </a></li>
          </ul>
        </div>

css

 .list-recommend ul {
      display: flex;
      li {
        display        : flex;
        flex-direction: column;
        align-items: center;
        flex           : 1;
        img {
          max-width    : 80/@vv;
          margin-bottom: 10/@vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }

换一换

html

       <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>换一换</span></a>
       </div>

css

    .book-refresh {
      display        : flex;
      justify-content: center;
      line-height    : 40/@vv;
    }

特色教材

html

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特色教材</span>
            <span class="left-arrow">大学里受欢迎的书</span>
          </div>
        </div>

特色教材列表

html

          <div class="bookInfo">
          <ul>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽车理论(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽车理论(第5版)</div>
                </a>
                <div class="author">余志生</div>
                <div class="price">
                  <span>有路价：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 价：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>团购价：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽车理论(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽车理论(第5版)</div>
                </a>
                <div class="author">余志生</div>
                <div class="price">
                  <span>有路价：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 价：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>团购价：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽车理论(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽车理论(第5版)</div>
                </a>
                <div class="author">余志生</div>
                <div class="price">
                  <span>有路价：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 价：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>团购价：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
          </ul>
        </div>

css

  .bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
           80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }

底部导航

html

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>首页</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我要卖书</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>购物车</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我的有路</a>
      </div>
    </div>

css

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-fangdajing{
        font-size: 26/@vv;
      }
    }
  }
}

完整代码

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      charset="UTF-8"
      content="width=device-width, minimum-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      id="viewport"
      name="viewport"
    />
    <title>Title</title>
    <link href="iconfont/iconfont.css" rel="stylesheet" />
    <link href="less/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="com-header-area">
      <div class="search-box">
        <span class="iconfont icon-sousuo"></span>
        <input
          type="text"
          placeholder="书名、作者、出版社、ISBN、文具"
          value=""
        />
      </div>
    </div>

    <div class="com-content">
      <div class="hot-search">
        <ul>
          <li><span class="hot">热门搜索：</span></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
          <li><a>高等数学</a></li>
        </ul>
      </div>

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保证正品</span>
        <span class="guarantee-span"><span class="check">√</span>保证低价</span>
        <span class="guarantee-span"><span class="check">√</span>24小时发货</span>
        <span class="guarantee-span"><span class="check">√</span>无理由退货</span>
      </div>

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
        <a href="#"><img src="img/classify.jpg">分类搜索</a>
      </div>

      <div class="bookList">
        <div>
          <a href="#"><img style="100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推荐图书</span>
            <span class="left-arrow">您喜欢的都在这里</span>
            <a class="span-more">更多</a>
          </div>

          <div class="list-recommend">
            <ul>
              <li>
                <a href="#">
                  <div class="book-img">
                    <img alt="阿弥陀佛么么哒" src="img/book.jpg">
                  </div>
                  <div class="bookName nape">阿弥陀佛么么哒</div>
                  <div class="price nape cost">
                    <span>有路价 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥14.30</span>
                  </div>
                </a>
              </li>
              <li><a href="#">
                  <div class="book-img"><img alt="乖.摸摸头" src="img/book.jpg"></div>
                  <div class="bookName nape">乖.摸摸头</div>
                  <div class="price nape cost">
                    <span>有路价 ￥14.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥13.30</span>
                  </div>
                </a></li>
              <li><a href="#">
                  <div class="book-img"><img alt="好吗好的" src="img/book.jpg"></div>
                  <div class="bookName nape">好吗好的</div>
                  <div class="price nape cost">
                    <span>有路价 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP价 ￥14.30</span>
                  </div>
                </a></li>
            </ul>
          </div>

          <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>换一换</span></a>
          </div>
        </div>

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特色教材</span>
            <span class="left-arrow">大学里受欢迎的书</span>
          </div>

          <div class="bookInfo">
            <ul>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽车理论(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽车理论(第5版)</div>
                  </a>
                  <div class="author">余志生</div>
                  <div class="price">
                    <span>有路价：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 价：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>团购价：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>首页</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我要卖书</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>购物车</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我的有路</a>
      </div>
    </div>
  </body>
</html>

less

@vv:3.75vw;

/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
  margin: 0;
  font-size: 12/@vv; 
  /* font-family: xx; 也可以设置字体 */
}
ol,ul {
  list-style: none; /* 去除列表样式 */
  padding: 0;
  margin: 0;
}

a {
  color: #464646;
  text-decoration: none;
}

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area {
  background: #f0f0f0;
  padding: 6 / @vv 10 / @vv 6 / @vv 10 / @vv;
  .search-box {
    background: #fff;
    display: flex;
    align-items: center;
    input {
      font-size: 12/@vv; 
      padding: 5 / @vv 0;
      margin: 0;
      border: 0;
       100%;
      color: #999;
      margin-left: 12 / @vv;
    }
    span{
      font-size: 12/@vv; 
    }
  }
}

.com-content {
  background: #e1e5ee;
  box-shadow: 0 0 10 / @vv #000;
  .hot-search ul {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2 / @vv 2 / @vv;
    li {
      margin: 0 6 / @vv;
      .hot {
        color: #ddb496;
      }
      a {
        color: #ccc;
      }
    }
  }
  .slide {
    img {
       375 / @vv;
      height: 187.5 / @vv;
    }
  }
  .guarantee-g {
    display: flex;
    justify-content: center;
    background: #fff;

    .guarantee-span {
      margin: 6 / @vv;
      .check {
        color: red;
      }
    }
  }

  .tab {
    display: flex;
    justify-content: space-around;
    background: #fff;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6 / @vv;
      img {
         26 / @vv;
        height: 26 / @vv;
      }
    }
  }

  .book-items {
    background: #fff;
    color: #757070;

    .item {
      line-height: 42 / @vv;
      display: flex;
      font-weight: bold;
      .book_recommend {
        font-size: 14 / @vv;
        margin-left: 14 / @vv;
      }

      .left-arrow {
        margin-left: 20 / @vv;
      }

      a {
        margin-left: auto;
        margin-right: 20 / @vv;
      }
    }

    .list-recommend ul {
      display: flex;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        img {
          max- 80 / @vv;
          margin-bottom: 10 / @vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }
    .book-refresh {
      display: flex;
      justify-content: center;
      line-height: 40 / @vv;
    }

    .bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
           80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }
  }
}

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-sousuo{
        font-size: 20/@vv;
      }
    }
  }
}