手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。
代码打包下载：手机站底部很好看的导航条效果
效果截图：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
<title>手机站底部很好看的导航条效果</title>
<style type="text/css">
* {margin:0;padding:0;}
a { text-decoration: none; }
a:hover { text-decoration: none; }
#bottomnav{
position:fixed;
left:0px !important;
bottom:0px !important;
width:100%;
height:40px;
z-index:1000;
font-size:18px;
text-align:center;
font-weight:bold;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#c10032), to(#920026));
background:-moz-linear-gradient(top,#c10032,#920026);
overflow:hidden;
}
#bottomnav a{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#c10032), to(#920026));
background:-moz-linear-gradient(top,#c10032,#920026);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c10032,endColorstr=#920026,grandientType=0);
color:#ffffff;
display:inline-block;
float:left;
width:40%;
height:100%;
line-height:40px;
font-size:14px;
}
#bottomnav a.free_tel{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#ff6900), to(#ff6900));
background:-moz-linear-gradient(top,#ff6900,#ff6900);}
#bottomnav a.free_tel img{-webkit-animation: change 1s infinite;animation: change 1s infinite;-moz-animation:change 1s infinite;}
#bottomnav a.botdet{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
background:-moz-linear-gradient(top,#fff,#fff);
width:20%;
color:#5f5f60;
font-size:14px;
position:relative;
}
#bottomnav a.botdet em{width:45px;text-align:center;position:absolute;left:41%;top:30px;color:#5f5f60;}
@keyframes change
{
0% {transform: scale(.8);}
50% {transform: scale(1);}
100% {transform: scale(.8);}
}
@-webkit-keyframes change
{
0% {-webkit-transform: scale(.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(.8);}
}
@-moz-keyframes change
{
0% {-moz-transform: scale(.8);}
50% {-moz-transform: scale(1);}
100% {-moz-transform: scale(.8);}
}
</style>
<body>
<div id="bottomnav">
<a onclick="openZoosUrl();return false;" href="javascript:void(0)" target="_self" data-role="none" rel="external" class="yournews"><img src="/demo/20141004/001/images/bottom_03.png" style="width:30px; vertical-align:middle;margin-bottom:3px;" /> 悄悄提问</a>
<a href="/" target="_self" class="botdet"><img src="/demo/20141004/001/images/bottom_055.png" style="width:28px;height:40px; vertical-align:middle;margin-bottom:3px;" /></a>
<a href="tel:10086" class="free_tel"><img style="width:25px; vertical-align:middle;margin-bottom:3px;" src="/demo/20141004/001/images/btn22_tel.png">电话咨询</a>
<div style="clear:both;"></div>
</div>
</body>
</html>相关文章
- 纯CSS实现的二级菜单
纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。 主要利用了CSS伪类hover来实现的，代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单，代码量极少。 效果截图：
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 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实现的二级菜单
纯CSS实现的二级菜单，完全采用CSS样式来实现的，为添加任何JS代码。 主要利用了CSS伪类hover来实现的，代码简单容易理解。 相比较采用JS或者jQuery库实现的二级菜单，代码量极少。 效果截图：
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：
- 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当中增加上