码迷,mamicode.com
首页 > 移动开发 > 详细

手机站常用的底部导航条,宽度自适应

时间:2017-10-02 14:57:03      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:ima   index   http   idt   foo   lin   repeat   cdn   导航   

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手机 底部 导航栏</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<title>手机站常用的底部导航条,宽度自适应</title>
<style>
body,ul,li,span,p,b,strong,h1,h2,h3,h4,h5,h6,dl,dt,dd,form{margin:0px;padding:0px;}
body{font-size:12px;color:#666666;}
a{text-decoration:none;color:#666666;}
a:hover{text-decoration:underline;color:#FF0000;}

#position{height:56px;background:#227bd6;padding-top:8px;position:fixed;bottom:0px;left:0px;width:100%;z-index:999;overflow:hidden;}
#position dd{width:20%;text-align:center;float:left;background:url(/demo/20140929/002/images/foot_bg.jpg) repeat-y right top;overflow:hidden;}
#position dd font{display:block;padding-top:8px;}
#position dd a{color:#FFF;text-decoration:none;}
#blank{height:64px;}
</style>        
</head>
<body>
<div style=‘height:6000px;‘>
<h1>989898</h1>
<p>
1
1
1
1

1
1
1

1
1
1
1
1
1
1

</p>
<dl id="position">
  <dd><a href="/"><img src="/demo/20140929/002/images/foot_img1.jpg"><font>网站首页</font></a></dd>
  <dd><a href="#"><img src="/demo/20140929/002/images/foot_img2.jpg"><font>在线咨询</font></a></dd>
  <dd><a href="#"><img src="/demo/20140929/002/images/foot_img4.jpg"><font>电话咨询</font></a></dd>
  <dd><a href="#"><img src="/demo/20140929/002/images/foot_img3.jpg"><font>预约挂号</font></a></dd>
  <dd><a href="#"><img src="/demo/20140929/002/images/foot_img5.jpg"><font>医院地址</font></a></dd>
</dl>
</div>

</body>
</html>

 

手机站常用的底部导航条,宽度自适应

标签:ima   index   http   idt   foo   lin   repeat   cdn   导航   

原文地址:http://www.cnblogs.com/shaoing/p/7620095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!