DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS+DIV實現的滑動門菜單特效代碼
CSS+DIV實現的滑動門菜單特效代碼
編輯:CSS詳解     

<!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="http://www.knowsky.com/">
    <b class="h2">*</b><br />
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/School/UploadFiles_7810/201104/20110411090833381.gif" alt="knowsky.com | *" />
    *knowsky.com,網頁設計,網站制作建設,CSS學習,網頁標准化
    </span>
   </a>
   </li>
   <li>
   <a href="http://www.knowsky.com/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="/School/UploadFiles_7810/201104/20110411090833381.gif" alt="knowsky.com | *" />
    *knowsky.com,網頁設計,網站制作建設,CSS學習,網頁標准化
    </span>
   </a>
   </li>
   <li>
   <a href="http://www.knowsky.com/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="/School/UploadFiles_7810/201104/20110411090833381.gif" alt="knowsky.com | *" />
    *knowsky.com,網頁設計,網站制作建設,CSS學習,網頁標准化
    </span>
   </a>
   </li>
   <li>
   <a href="http://www.knowsky.com/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="/School/UploadFiles_7810/201104/20110411090833381.gif" alt="knowsky.com | *" />
    *knowsky.com,網頁設計,網站制作建設,CSS學習,網頁標准化
    </span>
   </a>
   </li>
   <li>
   <a class="one" href="http://www.knowsky.com/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="/School/UploadFiles_7810/201104/20110411090833381.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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved