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

模板网 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. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  2. 纯CSS实现的二级菜单

    纯CSS实现的二级菜单,完全采用CSS样式来实现的,为添加任何JS代码。 主要利用了CSS伪类hover来实现的,代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单,代码量极少。 效果截图:

  3. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:

  4. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index,显示在最

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

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

随机推荐

  1. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  2. 纯CSS实现的二级菜单

    纯CSS实现的二级菜单,完全采用CSS样式来实现的,为添加任何JS代码。 主要利用了CSS伪类hover来实现的,代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单,代码量极少。 效果截图:

  3. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:

  4. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index,显示在最

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

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