css3网页底部固定导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3网页底部固定导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3网页底部固定导航</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="awesome_image"> </div>
<p>Minimize your browser to see stickey footer in action </p>
<div id="stickey_footer">
  <ul id="footer_menu">
    <li class="imgmenu"><a href="#"><span>Home</span></a></li>
    <li><a href="#">Services</a>
    <li><a href="#">Portfolio</a>
    <li><a href="#">Friends</a>
    <li><a href="#">Blog</a>
    <li><a href="#">Testimonials</a>
    <li><a href="#">Contact</a>
  </ul>
  <ul id="social_icons">
    <li><a href="#" ><img src='images/twitter.png' alt="" /><span>Twitter</span></a></li>
    <li><a href="#" ><img src='images/digg.png' alt="" /><span>Digg</span></a></li>
    <li><a href="#" ><img src='images/flickr.png' alt="" /><span>Flickr</span></a></li>
    <li><a href="#" ><img src='images/facebook.png' alt="" /><span>Facebook</span></a></li>
  </ul>
</div>
</body>
</html>

CSS代码(zzsc.css):

.awesome_image{background-image:url("../images/awesome_css3_footer.png");background-repeat:no-repeat;height:103px;margin:235px auto 0;padding:0;width:751px;}
p{margin:0 auto;text-align:center;color:#ffffff;}
body{background-color:#a2200a;font-family:Tahoma;}
img{border:0px;}
a:link{color:#FFFFFF;}
a:visited{color:#FFFFFF;}
a:hover{color:#333333;}
a:active{color:#FFFFFF;}
#stickey_footer{/* This will make your footer stay where it is */
background:none repeat scroll 0 0 #1D1D1D;border:1px solid rgba(0,0,0,0.3);bottom:0;font-family:Arial,Helvetica,sans-serif;height:40px;left:50%;margin:0 auto 0 -490px;padding:0 10px;position:fixed;text-shadow:1px 1px 1px #000000;width:960px;}
/* border curves */
#stickey_footer{-moz-border-radius:10px 10px 0px 0px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;}
/* hover effect */
#stickey_footer:hover{background:none repeat scroll 0 0 #2b2a2a;}
/* shadow for the footer*/
#stickey_footer{-moz-box-shadow:0px 0px 11px #191919;-webkit-box-shadow:0px 0px 11px #191919;box-shadow:0px 0px 11px #191919;}
#footer_menu{margin:0;padding:0;width:auto;}
#footer_menu li{list-style:none;float:left;font-size:12px;padding:12px 14px 14px 14px;border-right:1px solid rgba(0,0,0,0.4);background:rgba(0,0,0,0.1);}
#footer_menu .imgmenu{padding:5px 8px 3px 14px;float:left;background:url("../images/home.png") 13px 5px no-repeat;width:36px;height:30px;border:none;border-right:1px solid rgba(0,0,0,0.4);cursor:pointer;}
#footer_menu li:hover{background:#202020;/* Fallback color for old browsers */
background:rgba(0,0,0,0.3);}
#footer_menu .imgmenu:hover{background:url("../images/home_hover.png") 13px 5px no-repeat;}
#footer_menu li a{display:block;color:#cccccc;text-decoration:none;}
#footer_menu li a:hover{color:#ffffff;}
#footer_menu li span{display:none;}
#stickey_footer #social_icons{float:right;/* social icons positions */
width:auto;margin:5px 15px 0px;padding:0px;overflow:hidden;}
#stickey_footer #social_icons li{margin-right:12px;/* 12px is the space between each one of them */
float:left;width:24px;padding:0px;height:32px;list-style:none;_margin-right:0px;/* this is for IE6 only */
}

附件:下载该文件资源,减少时间成本(增值服务)