移动端页面底部固定芬兰

移动端底部经常会有一个tap的切换

Html代码为：

 1 <footer>
 2             <a href="userInfor.html">
 3                 <i class="iconfont bottom_com_icon">&#xe611;</i>
 4                 个人中心
 5             </a>
 6             <a href="home.html">
 7                 <i class="iconfont bottom_com_icon">&#xe64e;</i>
 8                 首页
 9             </a>
10             <a href="orderManagement.html">
11                 <i class="iconfont bottom_com_icon">&#xe606;</i>
12                 订单管理
13             </a>
14         </footer>

css代码为：

 1 /********** footer  ************/
 2 footer {
 3     position: fixed;
 4     z-index: 300;
 5     bottom: 0;
 6     width: 100%;
 7     max-width: 640px;
 8     height: 64px;
 9     display: inline-flex;
10     align-items: center;
11     justify-content: space-around;
12     background: #fff;
13     border-top: solid 1px #ccc;
14 }
15 footer a.active {
16     color: #0dc441;
17 }
18 footer a {
19     display: inline-flex;
20     flex-flow: column nowrap;
21     justify-content: center;
22     align-items: center;
23     width: 35%px;
24     height: 64px;
25     color: #333;
26     font-size: 16px;
27 }
28 footer a i.bottom_com_icon{
29     font-size: 20px;
30     color: #333;
31 }
32 footer a:nth-child(2) i.bottom_com_icon{
33     font-size: 24px;
34     color: #fff;
35 }
36 footer a:nth-child(3) i.bottom_com_icon{
37     font-size: 24px;
38 }
39 footer a:nth-child(2) {
40     align-self: flex-end;
41     width: 70px;
42     height: 70px;
43     padding-bottom: 5px;
44     border: solid 1px #ddd;
45     background: #5dca88;
46     color: #fff;
47     border-radius: 50%;
48     box-sizing: border-box;
49 }

 

posted @ 2017-02-27 12:09  haonanElva  阅读(1258)  评论(0)  编辑  收藏  举报