开发者学堂课程【移动 Web 前端开发：首页-底部页签】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8500
首页-底部页签
底部页签
在网页后台可以看到 footer 高度为100，<li>标签里面是内容，然后是<a>标签，<a>标签里面字体图标用<span>表示，后面跟着<p>，<p>标签里面就是文字，<span>中要添加样式，所以新建文件夹 fontawesome 导入第三方字体，在电脑中找到 font-awesome 压缩包，从压缩包里找到 css 和 fonts 文件夹导入即可。
可以看到 fonts 压缩包中也是有 less 和 scss 编译器的。
这样就完成了第三方字体的导入了。再在 index 最上面 link 从assets 里面找到fontawesome再进入 css 中完成 font- awesome . min.css样式的引入，
代码为：
…
<link rel="stylesheet" href=" assets/fontawesome/ css/ font- awesome . min.css”/>
…
接下来找到 sn_tabs 引入首页图标，<p>标签中为页签的文字内容，分别为首页，分类，必抢清单，我的易购，新手大礼包。
代码如下：
<!--底部页签-->
<footer class="sn_tabs">
<ul>
<li><a href="#"><span class="fa fa-home"></span><p>首页</p></a></li>
<li><a href="#"><span class="fa fa-home”></span><p>分类</p></a></li>
<li><a href="#"><span class="fa fa-home"></span><p>必抢清单 </p></a></li>
<li><a href="#"><span class="fa fa-home " ></span><p>我的易购</p></a></li>
<li><a href-="#"><span class="fa fa-home"></span><p>新手大礼包</p></a></li>
</ul>
</footer>
…
结构和文字已经显现，下面进行进一步改善。
设置底部页签，首先定义模块 sn_tabs，设置全局变量模块宽度为100%，高度为100/@bs，背景颜色设置为白色，上边框宽度最好设置为1，为单实线 solid，颜色为# ccc，设置无序列表 ul 宽度为100%，其中li设置宽度为20%，浮动属性 float 为向左浮动。此时刷新查看效果会发现 border-top 位置不对，
如图：
是因为设置浮动因素，只需要在导航中 sn_nav 里 ul 中清除浮动元素就行，
代码如下:
<nav class=”sn_nav”>
<ul class=”clearfix”>
…
此时刷新，网页效果如下：
要使底部标签在网页中固定，所以要设置 position 值为 fixed，left左边值为0，底部bottom 值为0，此时滚动到最下面是看不见的所以要给大容器设置 padding-bottom 值为100/@bs，再来到底部标签设置 list-style 为 none，给所有 li 设置text-align 为居中。
li 里面设置 a，样式 text-decoration 值为 none，作用是去掉页签的边框，再里面设置 span 中字体大小为 40px，换算成 rem 为40/@bs，颜色设置为#333。
p样式里面字体颜色设置成#666，字体大小为24/@bs，然后改图标，需要那个图标就改 sn_tabs 中对应 span 标签的图片名。代码如下：
index 中加入一下代码：
…
<link rel="stylesheet" href=" assets/fontawesome/ css/ font- awesome . min.css”/>
…
<!--底部页签-->
<footer class="sn_tabs">
<ul>
<li><a href="#"><span class="fa fa-home"></span><p>首页</p></a></li>
<li><a href="#"><span class="fa fa-reorder”></span><p>分类</p></a></li>
<li><a href="#"><span class="fa fa-file-text-o"></span><p>必抢清单 </p></a></li>
<li><a href="#"><span class="fa fa-user" ></span><p>我的易购</p></a></li>
<li><a href-="#"><span class="fa fa-suitcase"></span><p>新手大礼包</p></a></li>
</ul>
</footer>
…
在 model 增加代码如下：
//底部页签
.sn_ tabs{
width: 100%;
height: 100/@bs ;
background: #fff;
border-top: 1px solid #ccc;
position: fixed;
left: 0;
bottom: 0;
ul{
width: 10%;
li{
width: 20%;
float: left;
text-align: center;
a{
text- decoration: none ;
span{
font-size: 40/@bs;
color: #333;
margin-top: 107@bs;
}
p{
color: #666;
font-size: 24/@bs;
}}
……
最终根据窗口的变化结构和内容都做到了自适应，使用 less 和 rem 制作苏宁网页，只要把适配做好了，用rem按照标准做换算很容易，rem 主要用于内容的高宽适应，虽然 rem 在有 px 的地方都可以使用，但是在整体布局上，最好还是使用百分比，使用伸缩容器是没问题的，但要达到高宽度适用就要使用 rem，
效果如下：
然后放到移动端显示也能适应各种移动端设备。以上就是使用 less 加 rem 达到移动端另外的适配方式，就是百分比加 rem，并不能完全依赖于 rem。
