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

30次阅读

共计 16767 个字符，预计需要花费 42 分钟才能阅读完成。

本教程案例在线演示

有路网 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{
  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 中的体现


原理
以设计稿为 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;
      width: 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="width:100%;" src="img/ico_index.gif"></a>
        </div>
      </div>

举荐图书

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

举荐图书列表

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

底部导航

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

正文完
css
发表至： css
2020-08-13
 0
关于css:一文解读CSS语法注释使用方式选择器
关于css3:10分钟理解CSS3-Grid布局
关于css:干货关于vue3-SFC-范围内-scopedstyles-样式穿透
关于css:前端面试题整理入门版