注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浩瀚星云

上善若水 厚德载物<学习版>

 
 
 

日志

 
 

用CSS设计的导航实例  

2008-05-02 18:30:56|  分类: ASP(过时) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!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>网页特效观止|JsCode.CN|---用CSS设计的导航实例</title>
<style>
/*
www.jscode.cn 子鼠 */
#menu{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border:1px solid #000000;
 width:200px;
 background-color: #FF9D1F;
 text-align:center;
}
#menub{
 margin:20px;
}
.w1{
 margin:3px;
 border-top:1px solid #FFC881;
 border-right:1px solid #EE8600;
 border-bottom:1px solid #EE8600;
 border-left:1px solid #FFC881;
}
.w2{
 border-top:1px solid #EE8600;
 border-right:1px solid #FFAD42;
 border-bottom:1px solid #FFAD42;
 border-left:1px solid #EE8600;
}
.w3{
 border-top:2px solid #D07500;
 border-right:2px solid #FFB85D;
 border-bottom:2px solid #FFB85D;
 border-left:2px solid #D07500;
}
.w4{
 border:1px solid #FC8E00;
}
.w5{
 border:1px solid #000000;
}

.w7{
 border-top:1px solid #FFDCAF;
 border-right:1px solid #C87000;
 border-bottom:1px solid #C87000;
 border-left:1px solid #FFDCAF;
}
.w8{
 border-top:1px solid #FFD7A4;
 border-right:1px solid #FF9204;
 border-bottom:1px solid #FF9204;
 border-left:1px solid #FFD7A4;
}
.w9{
 background:#FFC881;
 border-top:1px solid #FECE8F;
 border-right:1px solid #FFAE44;
 border-bottom:1px solid #FFAE44;
 border-left:1px solid #FECE8F;
}
#menu a{
 color: #884C00;
 text-decoration: none;
 font-weight: bold;
}
#menu a:hover{background:#FFB85D; color:#000000;}
#menu a:hover .w7 {
 border-top:1px solid #C87000;
 border-right:1px solid #FFDCAF;
 border-bottom:1px solid #FFDCAF;
 border-left:1px solid #C87000;
}
#menu a:hover .w8 {
 border-top:1px solid #FF9204;
 border-right:1px solid #FFD6A1;
 border-bottom:1px solid #FFD6A1;
 border-left:1px solid #FF9204;
}
#menu a:hover .w9 {
 background:#FFB85D;
 border-top:1px solid #FFAE44;
 border-right:1px solid #FECF91;
 border-bottom:1px solid #FECF91;
 border-left:1px solid #FFAE44;
}
</style>
</head>
<body>
<!--
www.jscode.cn 子鼠-->
<div id="menu">
  <div id="menub">
    <div class="w1">
      <div class="w2">
        <div class="w3">
          <div class="w4">
            <div class="w5"> <a href="
http://www.jscode.cn" target="_blank">
              <div class="w7">
                <div class="w8">
                  <div class="w9">
www.jscode.cn </div>
                </div>
              </div>
              </a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w1">
      <div class="w2">
        <div class="w3">
          <div class="w4">
            <div class="w5"> <a href="
http://www.jscode.cn" target="_blank">
              <div class="w7">
                <div class="w8">
                  <div class="w9">
www.jscode.cn </div>
                </div>
              </div>
              </a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w1">
      <div class="w2">
        <div class="w3">
          <div class="w4">
            <div class="w5"> <a href="
http://www.jscode.cn" target="_blank">
              <div class="w7">
                <div class="w8">
                  <div class="w9">
www.jscode.cn </div>
                </div>
              </div>
              </a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w1">
      <div class="w2">
        <div class="w3">
          <div class="w4">
            <div class="w5"> <a href="
http://www.jscode.cn" target="_blank">
              <div class="w7">
                <div class="w8">
                  <div class="w9">
www.jscode.cn </div>
                </div>
              </div>
              </a> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w1">
      <div class="w2">
        <div class="w3">
          <div class="w4">
            <div class="w5"> <a href="
http://www.jscode.cn" target="_blank">
              <div class="w7">
                <div class="w8">
                  <div class="w9">
www.jscode.cn </div>
                </div>
              </div>
              </a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

  评论这张
 
阅读(48)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017