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
发表评论

坐等沙发
相关文章
html5手机端播放器可拖动播放自定义播放器
html5手机端播放器可拖动播放自定义播放器
Web前端html5网页three.js、earth会转动的地球
Web前端html5网页three.js、earth会转动…
jQuery on()动态加载点击事件失效
jQuery on()动态加载点击事件失效
thinkphp PHPExcel导入到数据库,插入空白数据的解决方案
thinkphp PHPExcel导入到数据库,插入空…
laravel接收get传值和接收post传值
laravel接收get传值和接收post传值
web前端之常用js方法整理common共同引用
web前端之常用js方法整理common共同引用
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论

  • 137博客

    每天醒来,敲醒自己的不是钟声,而

  • 137博客

    谢谢分享,我的博客,欢迎回访

  • 外星人

    爱美是人的天性,就连外星人也不例

  • 陈沩亮网络营销

    谢谢分享!我也想在手机移动端,实

  • shift

    我QQ也被冻永久啊,