web前端html5手机端底部导航多种方法推荐

随着web前端html5的发展,各种手机端的适配也是一个大的趋势,一个网站的构成必有的一个功能栏 导航功能。今天跟大家分享一下几种手机底部导航的案例。

方法一:(推荐使用)

web前端html5手机端底部导航多种方法推荐-上流阁

代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEMO</title>

<style>
* {
padding:0px;
margin:0px;
font-family:微软雅黑;
}

ul li {
list-style:none;
}
.container {
width:800px;
margin:20px auto;
}

.container .box {
width:320px;
height:568px;
border:1px solid #E4E4E4;
margin:0 auto;
position:relative;
background:#F2F2F2;
}

.box .bottom {
width:100%;
height:60px;
position:absolute;
bottom:0px;
background:#fff;
}

#example1 ul{
width:100%;
text-align:center;
overflow:hidden;
margin-top:2px;
}

#example1 ul li{
width:25%;
float:left;
}

#example1 li img {
width:35px;
height:35px;
vertical-align:bottom;
}

</style>
</head>

<body>
<div class="container">
<p>方法一:(推荐使用)www.o6c.com</p>
<div class="box">
<div class="bottom">
<div id="example1">
<ul>
<li>
<img src="../images/icon_chengji_tab_nor2.png" />
<div>成绩</div>
</li>
<li>
<img src="../images/icon_task_tab_nor2.png" />
<div>作业</div>
</li>
<li>
<img src="../images/icon_weike_tab_nor2.png" />
<div>微课</div>
</li>
<li>
<img src="../images/icon_my_tab_green2.png" />
<div>我的</div>
</li>
</ul>
</div>
</div>
</div>

</div>
</body>
</html>

方法二:

web前端html5手机端底部导航多种方法推荐-上流阁

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEMO</title>

<style>
* {
padding:0px;
margin:0px;
font-family:微软雅黑;
}

ul li {
list-style:none;
}
.container {
width:800px;
margin:20px auto;
}

.container .box {
width:320px;
height:568px;
border:1px solid #E4E4E4;
margin:0 auto;
position:relative;
background:#F2F2F2;
}

.box .bottom {
width:100%;
height:60px;
position:absolute;
bottom:0px;
background:#fff;
}

#example2 ul {
width:100%;
text-align:center;
overflow:hidden;
margin-top:2px;
}

#example2 ul li {
width:25%;
float:left;
}

#example2 li img {
width:35px;
height:35px;
vertical-align:bottom;
}
#example2 li span {
display:block;
}
</style>
</head>

<body>
<div class="container">
<p>方法二:www.o6c.com</p>
<div class="box">
<div class="bottom">
<div id="example2">
<ul>
<li>
<img src="../images/icon_chengji_tab_nor2.png" />
<span>成绩</span>
</li>
<li>
<img src="../images/icon_task_tab_nor2.png" />
<span>作业</span>
</li>
<li>
<img src="../images/icon_weike_tab_nor2.png" />
<span>微课</span>
</li>
<li>
<img src="../images/icon_my_tab_green2.png" />
<span>我的</span>
</li>
</ul>
</div>
</div>
</div>

</div>
</body>
</html>

方法三:(已淘汰,不推荐使用)

web前端html5手机端底部导航多种方法推荐-上流阁

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DEMO</title>

<style>
* {
padding:0px;
margin:0px;
font-family:微软雅黑;
}

ul li {
list-style:none;
}
.container {
width:800px;
margin:20px auto;
}

.container .box {
width:320px;
height:568px;
border:1px solid #E4E4E4;
margin:0 auto;
position:relative;
background:#F2F2F2;
}

.box .bottom {
width:100%;
height:60px;
position:absolute;
bottom:0px;
background:#fff;
}
#example3 table {
width:100%;
text-align:center;
}

#example3 td {
width:25%;
}

#example3 td img {
width:35px;
height:35px;
vertical-align:bottom;
}
</style>
</head>

<body>
<div class="container">
<p>方法三:(已淘汰,不推荐使用)www.o6c.com</p>
<div class="box">
<div class="bottom">
<div id="example3">
<table>
<tr>
<td>
<img src="../images/icon_chengji_tab_nor2.png" />
<div>成绩</div>
</td>
<td>
<img src="../images/icon_task_tab_nor2.png" />
<div>作业</div>
</td>
<td>
<img src="../images/icon_weike_tab_nor2.png" />
<div>微课</div>
</td>
<td>
<img src="../images/icon_my_tab_green2.png" />
<div>我的</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2016/10/25/419.html
发表评论

坐等沙发
相关文章
WEB前端Nodejs升级高版本启动错误ERESOLVE unable to resolve dependency tree
WEB前端Nodejs升级高版本启动错误ERESOL…
GoAccess轻量nginx日志分析工具与中文可视化goaccess-1.6.2.tar
GoAccess轻量nginx日志分析工具与中文可…
HTML中Data URI scheme BASE64 文件的拼接头
HTML中Data URI scheme BASE64 文件的拼…
WEB前端 解决监听浏览器窗口关闭之onbeforeunload不起作用?
WEB前端 解决监听浏览器窗口关闭之onbef…
VUE el-input__suffix样式大小修改
VUE el-input__suffix样式大小修改
VUE el ui el-date-picker时间禁用范围禁用干货
VUE el ui el-date-picker时间禁用范围…
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论