手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。
代码打包下载：手机站常用的底部导航条，宽度自适应
效果截图：
<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>
相关文章
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 不错的CSS重置代码base.css
今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html
随机推荐
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 不错的CSS重置代码base.css
今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html