一款设计精美的CSS滑动门菜单

网页特效

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

您的位置: 网页特效 -> 菜单导航 -> 一款设计精美的CSS滑动门菜单

一款设计精美的CSS滑动门菜单

作者:admin 发布时间:2010-10-11 11:12:55 发布人: 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>一款设计精美的CSS滑动门菜单丨网页特效丨myjs.jz123.cn</title>
<style type="text/css">
#menu {
 margin:0;
 padding:0;
 height:26em;
 overflow:hidden;
 background:#FFFCF2;
 }
#menu li {
 list-style-type:none;
 float:left;
 display:block;
 width:100%;
 }
#menu li a {
 display:block;
 text-decoration:none;
 color:#00b;
 margin:0;
 width:100%;
 }
#menu li a span {
 display:none;
 color:#453739;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding: 10px 0px 5px;
 }
#menu li a.one span {
 display:block;
 height:15em;
 margin:0 10px;
 }
#menu li a:hover {
 background:#FFFCF2;
 }
#menu li a:hover span {
 display:block;
 height:15em;
 margin:0 10px;
 cursor:pointer;
 }
#menu .h2 {
 margin:0 5px;
 padding:0;
 color:#933A34;
 font-size:12px;
 border:0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 }
#menu .h3 {
 margin:0 5px;
 padding:0;
 font-size:10px;
 color:#62583B;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 }
#menu img {
 margin:0px 5px 5px;
 border:1px solid #000;
 float:left;
 }
.curved {
 width:21em;
 }
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
 font-size:1px;
 display:block;
 background:#C7BC98;
/* hide overflow:hidden from IE5/Mac */
/* */
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
 height:1px;
 }
.curved .b2, .curved .b3, .curved .b4 {
 background:#FFFCF2;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 }
.curved .b1 {
 margin:0 4px;
 background:#C7BC98;
 }
.curved .b2 {
 margin:0 2px;
 border-width:0 2px;
 }
.curved .b3 {
 margin:0 1px;
 }
.curved .b4 {
 height:2px;
 margin:0;
 }
.curved .c1 {
 margin:0 5px;
 background:#C7BC98;
 }
.curved .c2 {
 margin:0 3px;
 border-width:0 2px;
 }
.curved .c3 {
 margin:0 2px;
 }
.curved .c4 {
 height:2px;
 margin: 0 1px;
 }
.curved .boxcontent {
 display:block;
 background:transparent;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 font-size:0.9em;
 text-align:justify;
 }
</style>
</head>
<body>
 
<div class="curved">
 
 
 
 
 <div class="boxcontent">
 <ul id="menu">
 <li>
 <a href="#">
 网页特效 
 [2010-10-11]
 
 <img src="/web/20150918012634im_/http://myjs.jz123.cn/js/caidan/3516.html" alt="网页特效，专注于网页特效及广告代码。" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
 芯晴网页特效，专注于网页特效及广告代码，CsrCode.Cn
 
 </a>
 </li>
 <li>
 <a href="http://web.archive.org/web/20150918012634/http://www.jz123.cn/">
 
 
 
 
 源码下载站
 [2010-10-11]
 
 <img src="http://web.archive.org/web/20150918012634im_/http://www.jz123.cn/soft/" alt="源码下载站。" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
 源码下载站：淘客源码下载、CMS系统源码下载。
 
 </a>
 </li>
 <li>
 <a href="http://web.archive.org/web/20150918012634/http://links.csrcode.cn/">
 
 
 
 
 链接交换平台
 [2010-10-11]
 
 <img src="http://web.archive.org/web/20150918012634im_/http://www.zzgjj.com.cn/" alt="友情链接交换平台。" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
 友情链接交换平台，免费发布友情链接交换交易信息。
 
 </a>
 </li>
 <li>
 <a href="http://web.archive.org/web/20150918012634/http://changshi.csrcode.cn/">
 
 
 
 
 生活常识网
 [2010-10-11]
 
 <img src="/web/20150918012634im_/http://myjs.jz123.cn/js/caidan/3516.html" alt="生活常识网。" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
 生活常识网，健康知识，美容知识，减肥知识，养生知识。
 
 </a>
 </li>
 <li>
 <a class="one" href="#">
 
 
 
 
 淘宝站
 [2010-10-11]
 
 <img src="/web/20150918012634im_/http://myjs.jz123.cn/js/caidan/3516.html" alt="淘宝购物导航。" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
 淘宝站，淘宝购物导航。
 
 </a>
 </li>
 </ul>
 </div>
 
 
 
 
</div>
</body>
</html>

一款设计精美的CSS滑动门菜单

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

上一篇：文章：兼容多种浏览器的纯CSS红色风格下拉菜单下一篇：文章：非常酷的css带说明信息导航菜单

网页特效

一款设计精美的CSS滑动门菜单

本类浏览排行 »

本站推荐文章 »