手机站底部很好看的导航条效果

模板网 2014-10-04

手机站底部很好看的导航条效果，采用了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>

相关文章

  1. CSS blockquote美化效果

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

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

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

  3. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

  4. CSS仿Win7对话框黑色阴影效果

    CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:

  5. 纯CSS实现的二级菜单

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

随机推荐

  1. CSS blockquote美化效果

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

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

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

  3. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

  4. CSS仿Win7对话框黑色阴影效果

    CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:

  5. 纯CSS实现的二级菜单

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