本教程案例在线演示
有路网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 => viewport7.5 => viewport/100//失去1vw => 7.5// 元素list 宽为300px300 => 300/7.5 vw//失去@vv = 7.5vw300 => 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; } } }}