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

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

效果截图：

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

&lt;title&gt;手机站常用的底部导航条，宽度自适应&lt;/title&gt;
&lt;style&gt;
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;}
&lt;/style&gt;	

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

随机推荐

手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。代码打包下载：手机站底部很好看的导航条效果效果截图：
纯CSS实现的二级菜单
纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。主要利用了CSS伪类hover来实现的，代码简单容易理解。相比较采用JS或者jQuery库实现的二级菜单，代码量极少。效果截图：
手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。代码打包下载：手机站常用的底部导航条，宽度自适应效果截图：
利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。效果截图：
常用CSS重置代码
CSS重置(CSS reset),也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，

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

相关文章

随机推荐