![6126f9ad6d07e2b8a201a5d163777b96.png](https://i-blog.csdnimg.cn/blog_migrate/4c8f37e7b8841858fa387299f9a4b3c3.jpeg)
本教程案例在线演示
有路网PC端 有路网移动端
免费配套视频教程
免费配套视频教程
教程配套源码资源
教程配套源码资源
本章目标
![7318a231c9de7f652325ebe3ef98a1cd.png](https://i-blog.csdnimg.cn/blog_migrate/b1ba338bdacc62444b53396a16dff7c0.jpeg)
LESS
1.什么是less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁,可以被翻译为CSS。
在vs code安装less的编译插件
安装插件Easy LESS
,如下图所示
![9b7d37ff9e7c7113415532bec21471e3.png](https://i-blog.csdnimg.cn/blog_migrate/143689edc6d7dcdfc824bad90032b830.png)
有了这个后,可以在编辑器新建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中的表现
![2bb1ca406eaf4808df9c721b674d589d.png](https://i-blog.csdnimg.cn/blog_migrate/00f861586b646dd2ecca14bfeb022905.png)
![006ef337ebaca1934efccd84b0c90c4b.png](https://i-blog.csdnimg.cn/blog_migrate/d2457b9ebea442ba59b6830e73d68686.png)
![e2099886f677b17f103853658ba05813.png](https://i-blog.csdnimg.cn/blog_migrate/5d0b09422207a91a479aa23cbf3b8c80.png)
原理 以设计稿为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/ 搜索你想要的 ,比如【我的】
![639eb28a2667952a0612f68c1bad9ba7.png](https://i-blog.csdnimg.cn/blog_migrate/710bad058a3f5716082aa71ac73dc183.jpeg)
出来以后加入购物车
![a331f15a9876f2d61ee578185e802889.png](https://i-blog.csdnimg.cn/blog_migrate/81c68058e0a1b490275fe47723b93190.jpeg)
点击购物车
![e16d00c302d25cb8610a0cae29e95368.png](https://i-blog.csdnimg.cn/blog_migrate/b7976f77bd94be399ee71dbd15836d67.jpeg)
点击添加至项目 这时你如果没登录的话 ,会让你登陆随便选择一个登陆方式比如 github
![3b3f548c3a2bc4f9ad6c27e474c98944.png](https://i-blog.csdnimg.cn/blog_migrate/404b2fca4bf7826db6c6af4e2d90bc8d.png)
登陆成功之后你可以选择新建也可以选择老的项目
![869754c977dd84d5c46b68894f0531f0.png](https://i-blog.csdnimg.cn/blog_migrate/1063a1787c0ccbc860540ca231acaf2c.png)
确定好之后会是这样一个页面,然后下载至本地
![9af8f1c46b256930f19c7b0e9cfe37fa.png](https://i-blog.csdnimg.cn/blog_migrate/e5b4299087af2576bd670da6bad946bc.jpeg)
下载后解压会是一些这样的文件
![cf0000b6458c13eaad12ac161d07c795.png](https://i-blog.csdnimg.cn/blog_migrate/97f3804a047103672bd089722e95366d.png)
然后像我这样把字体文件和css文件拿到你的项目里
![2eac27d24eac391154017e39e1b6e6a4.png](https://i-blog.csdnimg.cn/blog_migrate/4844e0443b03c3c1139d6571b3f139cc.png)
![1c7f506958d20adb8c0ed2d5aa8ffc94.png](https://i-blog.csdnimg.cn/blog_migrate/97ef517a2c1a3a22256ff4096e329f35.jpeg)
![ba4c80bbcac18076ad9d500d0369edac.png](https://i-blog.csdnimg.cn/blog_migrate/9b7d0596b2d8db8308ceb35bf2296010.jpeg)
看下效果
![d55dcc5b0226eb53637f33526836fba1.png](https://i-blog.csdnimg.cn/blog_migrate/5a4fa83a9daf3dee88fe77745818a44f.png)
移动端首页制作
顶部搜索框
![ee41dc4604fd90543f9ae649503e4db5.png](https://i-blog.csdnimg.cn/blog_migrate/8838e39304858936e1b0d44c45559336.png)
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;
}
}
}
热门搜索
![eea0f15682a74375f613f7668f796c1f.png](https://i-blog.csdnimg.cn/blog_migrate/e494db7a1d333fa2879508a101c4139c.png)
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;
}
}
}
}
轮播图
![267f8137c9b5bcd5c16ba07f7b93d730.png](https://i-blog.csdnimg.cn/blog_migrate/934713406903a48835a653eae4471b88.jpeg)
html
<div class="slide">
<img src="img/slide.jpg">
</div>
css
.slide {
img {
width : 375/@vv;
height: 187.5/@vv;
}
}
保证条款
![3f7cea35e7a19f1e80ffbe9d8c94d588.png](https://i-blog.csdnimg.cn/blog_migrate/798fa958c494fc4fc955e1c0756c549f.jpeg)
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;
}
}
}
五大模块
![8844c4121273d3dfabfd6d3897678dfe.png](https://i-blog.csdnimg.cn/blog_migrate/1b28b1215c0bd0274b80da5833fc23d0.jpeg)
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;
}
}
}
中栏广告
![44f4f37babd8eabc76f293228ff518a4.png](https://i-blog.csdnimg.cn/blog_migrate/c3bb9070d25b52cbdedc281772a95f28.jpeg)
html
<div class="bookList">
<div>
<a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
</div>
</div>
推荐图书
![5ac57ebfb2e2622e0c438b1dc1a359e4.png](https://i-blog.csdnimg.cn/blog_migrate/8bd891055a324b4e2054b19847b1ca19.jpeg)
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;
}
}
}
推荐图书列表
![871dba6197c6b6e448a45e81bd6f6fd1.png](https://i-blog.csdnimg.cn/blog_migrate/7abf0a47ba86a38b913494127eb27333.jpeg)
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;
}
}
}
换一换
![fe415c1255320a04685a78fee370facb.png](https://i-blog.csdnimg.cn/blog_migrate/8c3c08700dceec797ca6583461f87396.jpeg)
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;
}
特色教材
![fda554553a66ac10dd6997cc277b1b59.png](https://i-blog.csdnimg.cn/blog_migrate/75bc8ad010a1625e427071f7a739ce29.png)
html
<div class="book-items">
<div class="item">
<span class=book_recommend>特色教材</span>
<span class="left-arrow">大学里受欢迎的书</span>
</div>
</div>
特色教材列表
![5c46a31b4f51e15e6e7adfb29b82fa3c.png](https://i-blog.csdnimg.cn/blog_migrate/3fcf4191a98a6131f18a3aa58ecb2f89.jpeg)
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;
}
}
}
}
}
底部导航
![c68213a6edd0809d58e97511b9aebe27.png](https://i-blog.csdnimg.cn/blog_migrate/fcfe79f3f6a1b8d4e56c92a55f308e09.jpeg)
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;
}
}
}
}