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

本文主要是介绍HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本教程案例在线演示

有路网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="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="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><metacharset="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><inputtype="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;}}}
}

这篇关于HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

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

本教程案例在线演示

免费配套视频教程

教程配套源码资源

本章目标

LESS

1.什么是less

2. 变量

3. Mixins

4. 嵌套

5. 运算

vw单位

阿里图标库iconfont使用

移动端首页制作

顶部搜索框

热门搜索

轮播图

保证条款

五大模块

中栏广告

推荐图书

推荐图书列表

换一换

特色教材

特色教材列表

底部导航

完整代码

相关文章

基于Python开发Windows屏幕控制工具

CSS place-items: center解析与用法详解

CSS实现元素撑满剩余空间的五种方法

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

HTML5 getUserMedia API网页录音实现指南示例小结

全面解析HTML5中Checkbox标签

HTML5 搜索框Search Box详解

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

Python实例题之pygame开发打飞机游戏实例代码