Web实现：页面底部栏实例

HTML部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./index.css" /><title>移动端问吧首页</title></head><body><footer class="footer"><div class="item item-selected"><span class="icon footer-icon1"></span><span class="txt">首页</span></div><div class="item"><span class="icon footer-icon2"></span><span class="txt">练习</span></div><div class="item"><span class="icon footer-icon3"></span><span class="txt">消息</span></div><div class="item"><span class="icon footer-icon4"></span><span class="txt">我的</span></div></footer></body>
</html>

CSS部分：

html,
body {height: 100%;margin: 0; }ul,
li {margin: 0;padding: 0; }li {list-style: none; }h1,
h2 {margin: 0; }p {margin: 0;padding: 0; }@media screen and (max-width: 768px) {html {font-size: 20px; } }@media screen and (max-width: 320px) {html {font-size: 17.0666666667px; } }.btn {padding: 0;border: none;background: transparent;cursor: pointer; }.btn:focus {outline: none; }body {max-width: 768px;margin: 0 auto; }.footer {max-width: 768px;height: 2.45rem;margin: 0 auto;box-sizing: border-box;background: #FFFFFF;border-top: 1px solid #E1E1E1;display: flex;justify-content: space-between;align-items: flex-end;padding: 0 2.3rem;position: fixed;bottom: 0;left: 0;right: 0;z-index: 10; }.footer .item {text-align: center;font-size: 0.5rem;line-height: 0.7rem;color: #666666;padding-bottom: 0.175rem; }.footer .item-selected {color: #3492FD; }.footer .item:nth-child(1) .icon {background: url(./images/footer-icon1.png) no-repeat center/contain; }.footer .item:nth-child(2) .icon {background: url(./images/footer-icon2.png) no-repeat center/contain; }.footer .item:nth-child(3) .icon {background: url(./images/footer-icon3.png) no-repeat center/contain; }.footer .item:nth-child(4) .icon {background: url(./images/footer-icon4.png) no-repeat center/contain; }.footer .item:nth-child(1) .icon, .footer .item:nth-child(4) .icon {margin-bottom: 0.125rem; }.footer .item:nth-child(2) .icon {margin-bottom: 0.05rem; }.footer .item:nth-child(3) .icon {margin-bottom: 0.1rem; }.footer .item .icon {width: 1.2rem;height: 1.2rem;display: block; }/*scss代码如下：*//*html,
body {height: 100%;margin: 0;
}ul,
li {margin: 0;padding: 0;
}
li {list-style: none;
}h1,
h2 {margin: 0;
}p {margin: 0;padding: 0;
}// 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式@media screen and (max-width: 768px) {html {font-size: 20px;}
}@media screen and (max-width: 320px) {html {font-size: 20px / 375 * 320;}
}@function px2rem($px) {@return #{$px / 40}rem;
}.btn {padding: 0;border: none;background: transparent;cursor: pointer;&:focus {outline: none;}
}$maxWidth: 768px;body {max-width: $maxWidth;margin: 0 auto;
}.footer {max-width: $maxWidth;height: px2rem(98);margin: 0 auto;box-sizing: border-box;background: #FFFFFF;border-top: 1px solid #E1E1E1;display: flex;justify-content: space-between;align-items: flex-end;padding: 0 px2rem(92);position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;.item {text-align: center;font-size: px2rem(20);line-height: px2rem(28);color: #666666;padding-bottom: px2rem(7);&-selected {color: #3492FD;}@for $i from 1 to 5 {&:nth-child(#{$i}) .icon {background: url(./images/footer-icon#{$i}.png) no-repeat center / contain;}}&:nth-child(1), &:nth-child(4){.icon {margin-bottom: px2rem(5);}}&:nth-child(2) .icon {margin-bottom: px2rem(2);}&:nth-child(3) .icon {margin-bottom: px2rem(4);}.icon {width: px2rem(48);height: px2rem(48);display: block;}}
}
*/

Web实现：页面底部栏实例相关推荐

简述php和web交互过程,PHP与Web页面交互操作实例分析
PHP与Web页面交互操作实例分析,表单,数组,参数,字符串,属性 PHP与Web页面交互操作实例分析易采站长站,站长之家为您整理了PHP与Web页面交互操作实例分析的相关内容. 本文实例讲述了PH ...
web页面导航栏自适应问题
web页面导航栏自适应问题 1. 问题描述 2.问题原因 3.解决思路 1. 问题描述 Axure RP 9 矩形元件转化为动态面板后,通过设置100%宽度(具体方法可以百度,在此不详细介绍),出来的 ...
Bootstrap静止在页面底部的导航栏
用Bootstrap制作页面,使用<header><content><footer>结构时会遇到,页面内容较少,底部栏或页脚浮到页面中间. Bootstrap本身提 ...
ajax文字上下滚动,ajax页面底部滚动加载效果实例
html部分: //ajax读取的 data.html 使用append 的方式添加到这里 //ajax 状态文字输出到这里 [数据加载中][数据加载成功][没有数据了] js代码需要jquery支持 ...
ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
滑轮滚动到页面底部ajax加载数据的实例
滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的j ...
高性能web建站规则（将js放在页面底部）
版权声明:欢迎转载,请注明沉默王二原创. https://blog.csdn.net/qing_gee/article/details/80123552 简单解释一下为什么要将js放在页面底部: 浏览 ...
解决华为手机虚拟按键遮挡页面底部tab栏的问题
谷歌原生,华为之类的虚拟按键遮挡页面底部RadioButton之类的问题. if (AndroidWorkaround.checkDeviceHasNavigationBar(this)) { //适 ...

Web实现：页面底部栏实例

Web实现：页面底部栏实例相关推荐

最新文章

热门文章