开发者学堂课程【移动 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></
l
i>
<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></
l
i>
<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。