亲手打的网页代码

<!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=utf-8"/>
  <title>王八的个人网站</title>
  <style>
  #content{ width:1000px; height:1800px; margin:auto;background:#CCC;}
  #header{height:190px; background-image:url(images/header.jpg); position:relative;}
  #mainer{ height:550px; background: #FC6;}
  #footer{height:60px;background-image:url(images/footer.jpg);}
  *{ margin:0px; padding:0px; }
  #menu{ height:30px; width:800px; position:relative; top:140px; left:100px;}
  #menu ul li{ list-style:none; float:left; height:30px ; width:100px; position:relative;}
  #menu ul li a { height:30px; line-height:30px; width:98px; display:block; border:#6C9 1px dashed; text-decoration:none; text-align:center; color:#696;}
  #menu ul li a:hover{ background:#6F3; color:#FCC; font-weight:bold; border-radius:30px;}
  #menu ul ul{ display:none;}
  #menu ul ul ul{ display:none;}
  #menu ul li:hover ul ul { display:none;}
  #menu ul li:hover ul { background:#F99; display:block; position:absolute; left:0px; top:30px;}
  #menu ul li:hover ul li:hover ul{ display:block; position:absolute; left:100px; top:0px;}
  </style>
  </head>
   
  <body>
  <div id="content">
  <div id="header">
  <div id="menu">
  <ul type="circle">
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a>
  <ul>
  <li><a href="#">二级导航</a><ul>
  <li><a href="#">三级导航</a><li><a href="#">三级导航</a>
  </ul>
  </li>
  <li><a href="#">二级导航</a>
  <li><a href="#">二级导航</a>
  <li><a href="#">二级导航</a>
  </ul>
  </li>
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a></li>
  <li><a href="#">一级导航</a></li>
  </ul>
  </div>
  </div>
  <div id="main"></div>
  <div id="footer"></div>
  </div>
  </body>
  </html>
 
posted @ 2016-10-26 20:29  西域大名流  阅读(124)  评论(0)    收藏  举报