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

模板网 2014-09-29

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

代码打包下载:手机站常用的底部导航条,宽度自适应

效果截图:

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

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

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

相关文章

  1. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. CSS blockquote美化效果

    blockquote相信大家都不陌生吧,在Word叫文本框,其实在网页了可叫它文本框吧,如果在一段文本的两头加上blockquote标签的话,那么文本将会接出来显示,而且其内的文本将含有blockquote的格式,所以只要用CSS定义好了blockquote的各个属性,你会发现这会是个

  4. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图:

  5. 手机站头部超赞QQ邀请效果

    手机站头部超赞QQ邀请效果,已整理为JS调用代码,方便直接引入网页调用。 打包下载: 手机站头部超赞QQ邀请效果 效果截图:

随机推荐

  1. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. CSS blockquote美化效果

    blockquote相信大家都不陌生吧,在Word叫文本框,其实在网页了可叫它文本框吧,如果在一段文本的两头加上blockquote标签的话,那么文本将会接出来显示,而且其内的文本将含有blockquote的格式,所以只要用CSS定义好了blockquote的各个属性,你会发现这会是个

  4. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图:

  5. 手机站头部超赞QQ邀请效果

    手机站头部超赞QQ邀请效果,已整理为JS调用代码,方便直接引入网页调用。 打包下载: 手机站头部超赞QQ邀请效果 效果截图: