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

最新推荐文章于 2021-06-07 11:26:25 发布

aiqingshan6402

最新推荐文章于 2021-06-07 11:26:25 发布

阅读量213

点赞数

原文链接：http://www.cnblogs.com/shaoing/p/7620095.html

版权

<!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>

转载于:https://www.cnblogs.com/shaoing/p/7620095.html

aiqingshan6402

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手机站常用的底部导航条，宽度自适应

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>手机底部导航栏</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/l...
复制链接

扫一扫