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章有路网移动端主页实战的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！