DIV+CSS打造背景图片翻转网页导航菜单

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> DIV+CSS打造背景图片翻转网页导航菜单

DIV+CSS打造背景图片翻转网页导航菜单

作者:admin 发布时间:2010-11-17 5:33:48 发布人: admin

<!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=gb2312"/>
<title>DIV+CSS打造背景图片翻转网页导航菜单丨网页特效丨myjs.jz123.cn</title>
<style>
* {
 margin:0;
 padding:0;
 font-size:12px;
 text-align:center;
}
body {
 background:#ffff;
}
#nav {
 width:700px;
 margin:20px auto 0 auto;
}
#nav li {
 display:inline;
 list-style-type:none;
}
#nav li a:link,#nav li a:visited {
 float:left;
 margin-right:1px;
 height:26px;
 line-height:26px;
 padding:0 8px;
 text-decoration: none;
 color:#333;
 background:url(http://web.archive.org/web/20150329090601im_/http://myjs.jz123.cn/img/bg01.jpg);
}
#nav li a:hover {
 color:#000;
 background:url(http://web.archive.org/web/20150329090601im_/http://myjs.jz123.cn/img/bg02.jpg);
}
#home #nav li a#cur1,#divcss #nav li a#cur2,#csslayout #nav li a#cur3,#css20 #nav li a#cur4,#websites #nav li a#cur5,#moban #nav li a#cur6 {
 color:#fff;
 background:url(http://web.archive.org/web/20150329090601im_/http://myjs.jz123.cn/img/bg03.jpg);
}
#topline {
 width:100%; 
 height:3px; 
 overflow:hidden;
 background:#06f;
}
#content {
 width:680px;
 margin:18px auto 0 auto;
 text-align:left;
 color:#000;
}
</style>
</head>
<body id="home">
<ul id="nav">
    <li><a href="http://web.archive.org/web/20150329090601/http://www.jz123.cn/" id="cur1">站长网</a></li>
    <li><a href="http://web.archive.org/web/20150329090601/http://www.zzgjj.com.cn/" id="cur2">友情链接平台</a></li>
    <li><a href="http://web.archive.org/web/20150329090601/http://www.jz123.cn/soft/" id="cur3">源码下载</a></li>
    <li><a href="http://web.archive.org/web/20150329090601/http://www.0491.com/" id="cur4">团购网站大全</a></li>
    <li><a href="http://web.archive.org/web/20150329090601/http://www.bankcha.com/" id="cur5">银行网点查询</a></li>
    <li><a href="http://web.archive.org/web/20150329090601/http://www.wozuan.com/" id="cur6">钻石网</a></li>
</ul>
<div id="topline"></div>
<div id="content">
 现在的位置: <strong>home</strong> (myjs.jz123.cn 首页)
</div>
</body>
</html>

DIV+CSS打造背景图片翻转网页导航菜单

将本文收藏到QQ书签与更多好友分享

上一篇：文章：博客常用的jQuery滑动菜单插件下一篇：文章：纯CSS的下拉菜单支持IE6 IE7 Firefox

网页特效

DIV+CSS打造背景图片翻转网页导航菜单

本类浏览排行 »

本站推荐文章 »