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

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

本章目标

image

LESS

1.什么是less

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

在vs code安装less的编译插件

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

image

有了这个后，可以在编辑器新建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{
  width: 50px;
  height: 50px;
  #circle
}

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

将其转换成 CSS 代码如下

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

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

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

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

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

此时编译成 CSS :

#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 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%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

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

转换成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 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-width: 100px;
@color: #03A9F4;

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

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

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

编译成 CSS 如下：

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

vw单位

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

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

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

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

@vv:7.5vw;

.circle{
  width: 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{
  width: 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中的表现


image
image
image

原理
以设计稿为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/
搜索你想要的 ，比如【我的】

image

出来以后加入购物车

image

点击购物车

image

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

image

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

image

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

image

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

image

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

image
image
image

看下效果

image

移动端首页制作

顶部搜索框

image

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;
      width: 100%;
    }
    span{
      font-size: 12/@vv;
    }
  }
}

热门搜索

image

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;
      }
    }
  }
}

轮播图

image

html

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

css

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

保证条款

image

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;
      }
    }
  }

五大模块

image

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;
      }
    }
  }

中栏广告

image

html

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

推荐图书

image

html

      <div class="bookList">
        <div>
          <a href="#"><img style="width: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;
      }
    }
  }

推荐图书列表

image

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;
        }
      }
    }

换一换

image

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;
    }

特色教材

image

html

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

特色教材列表

image

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;
          width: 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;
            }
          }
        }
      }
    }

底部导航

image

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="width: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;
      width: 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 {
      width: 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 {
        width: 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-width: 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;
          width: 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;
      }
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,684评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,143评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,214评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,788评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,796评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,665评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,027评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,679评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,346评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1赞 331
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,412评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,015评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2赞 343

推荐阅读更多精彩内容