网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > 网页特效
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.用按钮查看访问者访问页面的次数.
.不断上升的气泡特效代码.
.网页特效:符合标准的随滚动条滚.
.使文本竖型显示的特效代码.
.一张图片实现的超酷效果网站导航.
.把HTML代码转换成javascript代码.
.CSS超酷网页导航实例!网页导航的.
.用快捷键来提交按钮,这样比较简.
.查看指定网页源代码.
.按钮保存页面.
.一个以二进制显示的时钟(挺有趣).
.在状态栏一条条的显示信息文字.
.对于分帧页面的打印,这个程序非.
.让你的标题栏文字动起来,标题也.
.离开一个页面时跳出一个警告框,.
.颜色英文代码全集(之三).
.打开页面后,随便按某个键,页面.
.页面的左右下脚始终固定不动的图.
.滚动条颜色生成器II IE5.5+.
.文本在文本区中自动分段输出,很.

CSS+DIV实现的滑动门菜单特效代码

发表日期:2007-12-19


<!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>Untitled Document</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">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="boxcontent">
  <ul id="menu">
   <li>
   <a href="/">
    <b class="h2">网页教学网</b><br />
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/img/link.gif" alt="knowsky.com | 网页教学网" />
    网页教学网knowsky.com,网页设计,网站制作建设,css学习,网页标准化
    </span>
   </a>
   </li>
   <li>
   <a href="/htmldata/sort/1.html">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <b class="h2">业界新闻了解</b><br />
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/img/link.gif" alt="knowsky.com | 网页教学网" />
    网页教学网knowsky.com,网页设计,网站制作建设,css学习,网页标准化
    </span>
   </a>
   </li>
   <li>
   <a href="/htmldata/sort/2.html">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <b class="h2">建站指南知识</b><br />
    <b class="h3">[2006-06-18]</b>
    <span>
    <img src="/img/link.gif" alt="knowsky.com | 网页教学网" />
    网页教学网knowsky.com,网页设计,网站制作建设,css学习,网页标准化
    </span>
   </a>
   </li>
   <li>
   <a href="/htmldata/sort/3.html">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <b class="h2">网页制作相关知识</b><br />
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/img/link.gif" alt="knowsky.com | 网页教学网" />
    网页教学网knowsky.com,网页设计,网站制作建设,css学习,网页标准化
    </span>
   </a>
   </li>
   <li>
   <a class="one" href="/htmldata/sort/4.html">
    <b class="b1"></b>
    <b class="b2"></b>
    <b class="b3"></b>
    <b class="b4"></b>
    <b class="h2">动画制作知识</b><br />
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/img/link.gif" alt="knowsky.com | 网页教学网" />
    网页教学网knowsky.com,网页设计,网站制作建设,css学习,网页标准化
    </span>
   </a>
   </li>
  </ul>
  </div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
</div>
</body>
</html>

上一篇:文字写在边线上的效果用CSS实现的特效代码 人气:875
下一篇:支持IE6 IE7 Firefox的纯CSS的下拉菜单 人气:1037
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐