demo练习

昨天系统的过了一遍weui框架，熟悉了他的写法和使用方法，所以今天就自己练习了一个小demo的练习，效果图如下：

1.首先关于头部

头部这里使用cell来写比较方便，因为是左右2个icon中间内容，不过这里遇到一个小问题，头部导航栏使用了navbar标签后宽度缩小了不在是百分之百，所以需要自己在下一层的cell手动添加宽度才可以，代码如下：

<!--头部导航-->

<div class="weui-navbar" style="background: #aaa;">

<div class="weui-cell" style="width: 100%;">

<div class="weui-cell__hd">

<i class="iconfont icon-guanbi"></i>

</div>

<div class="weui-cell__bd" style="color: #fff;margin-left: 5px;">

<p>智学无忧教育系统</p>

</div>

<div class="weui-cell__ft">

<i class="iconfont icon-gengduo"></i>

</div>

</div>

</div>

2.关于内容

下面的内容的话基本上就是按照hd，bd，ft这样3层的思路来进行写比较方便，前面一张已经介绍过了，代码就不粘贴了，只要系统的过了一遍weki文档就能快速的写出来。

3.关于底部

底部其实就是一个tabbar底部导航栏，不过这里有一个坑，因为weki里面的事例代码是这样的：

<div class="weui-tab">
    <div class="weui-tab__panel">
        <div>Page 1</div>
        <div style="display:none">Page 2</div>
        <div style="display:none">Page 3</div>
    </div>
    <div class="weui-tabbar">
        
    </div>
</div>

最外层的一个tab标签加上去以后会导致页面混乱，底部的导航栏出现不在底部而是在内容的下方，这是因为tab类里面有个position：relative会影响到布局，所以最外层的tab类名去掉加上一个height：100%即可

4.关于引用icon图标的问题

今天下午引用icon图标的时候发现出来的图标都是灰色的图标，于是查找了一下资料，https://blog.csdn.net/NaNa309706/article/details/79083391这个网站上面的内容很好的消除了疑惑以及如果你想给icon加颜色也可以通过上面的方法实现

以上是今天通过练习获得的收货