一個CSS和HTML頭部

來源:互聯網
上載者:User
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定義過渡型DOCTYPE-->  
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定義名字空間-->  
<head><!--網頁頭部開始-->  
<title>網頁布局+純CSS縱向下拉式功能表</title><!--標題列-->  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定義語言編碼-->  
<meta http-equiv="Content-Language" content="gb2312" /><!--針對老版瀏覽器定義語言編碼-->  
<meta content="all" name="robots" /><!--允許搜尋機器人-->  
<meta name="author" content="7273771@gmail.com,陽詭子,QQ:7273771" /><!--作者資訊-->  
<meta name="Copyright" content="blog.529600.com,共同探討,允許轉載" /><!--著作權資訊-->  
<meta name="description" content="下拉式功能表,CSS,布局" /><!--簡介-->  
<meta content="下拉,菜單,CSS,布局" name="keywords" /><!--關鍵詞-->  
<!--CSS樣式開始-->  
<style type=text/css>  
*{  
  margin:0;  
  padding:0;  
  border:0;  
}  
html{  
  background:#bfc4c7;/*背景顏色*/  
}  
body{  
  font:12px/150% '宋體';  
  margin:0 auto;  
  width:770px;  
  text-align:center;  
}  
#menu,#nav,#footer{  
  clear:both;  
}  
#nav{  
  padding-left:20px;  
  text-align:left;  
  background:#a60;  
}  
#footer{  
  background:#a30;  
}  
#logo,#banner,#mail,#left,#middle,#right{  
  float:left;  
  width:180px;  
  background:#f00;  
}  
#logo,#banner,#mail{  
  height:60px;  
}  
#banner{  
  width:468px;  
  background:#f60;  
}  
#mail{  
  width:122px;  
  background:#f90;  
}  
#left,#right{  
  width:200px;  
}  
#left{  
  background:#093;  
}  
#middle{  
  width:370px;  
  background:#063;  
}  
#right{  
  background:#033;  
}  

/*menu部分*/  

#menu{  
  margin:0 auto;  
    
  width:770px!important;  
  clear:both  
}  
#menu ul{  
  list-style:none;  
}  
#menu li {  
  float:left;  
  position:relative;  
}     
#menu ul ul {  
  visibility:hidden;  
  position:absolute;  
  left:0px;  
  top:30px;   
}  
#menu table{  
  position:absolute;  
  left:0;  
  top:0;  
}  
#menu ul li:hover ul,#menu ul a:hover ul{  
  visibility:visible;  
}  
#menu a{  
  display:block;  
  text-align:center;  
  text-decoration:none;  
  width:77px;  
  height:30px;  
  color:#000;  
  line-height:30px;  
  background:#c9c9a7;  
}  
#menu a:hover{  
  color:#fff;  
  background:#b3ab79;  
}  
#menu ul ul li {  
  clear:both;  
  text-align:left;  
}  
#menu ul ul li a{  
  display:block;  
  width:77px;  
  height:30px;  
  background:#faeec7;  
  color:#000;  
}  
#menu ul ul li a:hover{  
  background:#dfc184;  
  color:#000;  
}  

</style><!--CSS樣式結束-->  
</head><!--網頁頭部結束-->  
<body><!--網頁主體開始-->  

<div id="menu">    
  <ul>    
     <li>  
      <a href="">第一分類<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>  
        <table>  
          <tr>  
            <td><![endif]-->    
              <ul>    
                <li><a href="">XHTML</a></li>    
                <li><a href="">CSS</a></li>    
                <li><a href="">PHP</a></li>    
                <li><a href="">MySQL</a></li>    
                <li><a href="">Fireworks</a></li>  
                <li><a href="">Photoshop</a></li>    
                <li><a href="">Flash</a></li>    
                <li><a href="">Illustrator</a></li>    
              </ul><!--[if lte IE 6]>  
            </td>  
          </tr>  
        </table>  
      </a><![endif]-->    
    </li>  
  </ul>    
</div>  

</body><!--網頁主體結束-->  
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.