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

  • A+
所属分类：Web前端
摘要

有路网PC端
有路网移动端免费配套视频教程教程配套源码资源Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁，可以被翻译为CSS。
便宜好用的国外VPS推荐

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

本章目标

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

LESS

1.什么是less

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

在vs code安装less的编译插件

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

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

有了这个后，可以在编辑器新建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中的表现
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战

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

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战
原理
以设计稿为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/
搜索你想要的 ，比如【我的】

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

出来以后加入购物车

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

点击购物车

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

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

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

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

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

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

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

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

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

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

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

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

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

看下效果

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

移动端首页制作

顶部搜索框

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

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

热门搜索

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

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

轮播图

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

html

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

css

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

保证条款

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

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

五大模块

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

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

中栏广告

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

html

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

推荐图书

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

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

推荐图书列表

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

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

换一换

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

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

特色教材

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

html

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

特色教材列表

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

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

底部导航

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

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;       }     }   } }
便宜好用的国外VPS推荐