WEB2.0標(biāo)準(zhǔn)教程：第十一天 不用表格的菜單_Web標(biāo)準(zhǔn)教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      
布局初步搭建起來，我開始填充里面的內(nèi)容。首先是定義logo圖片：

      樣式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
      頁面代碼：<div id="logo"><a title="WEB2.0標(biāo)準(zhǔn)教程 循序漸進(jìn)十二天的基礎(chǔ)學(xué)習(xí)！ " href="http://www.yzci.com/" ><img height="80" alt="WEB2.0標(biāo)準(zhǔn)教程" src="logo.gif" width="200" /></a></div> 
      以上代碼現(xiàn)在應(yīng)該容易理解。先在CSS定義了一個(gè)logo的層，然后在頁面中調(diào)用它。需要說明的是，為了使網(wǎng)頁有更好的易用性，web標(biāo)準(zhǔn)要求大家給所有的、屬于正式內(nèi)容的圖片，加一個(gè)alt屬性。這個(gè)alt屬性是用來說明圖片的作用(當(dāng)圖片不能顯示的時(shí)候就顯示替換文字)，所以不要只寫成無意義的圖片名稱。
      接下來是定義菜單：

      1.不用表格的菜單(縱向)
      

    
        
            
            
      <html>
       <head>
      <style type="text/css">
      <!--
      body,div {font-size:12px;}
      #menu {
      MARGIN: 15px 20px 0px 15px;  /*定義層的外邊框距離*/
      PADDING:15px;    /*定義層的內(nèi)邊框?yàn)?5px*/
      BACKGROUND: #dfdfdf;   /*定義背景顏色*/
      COLOR: #666;    /*定義字體顏色*/
      BORDER:#fff 2px solid;  /*定義邊框?yàn)?px白色線條*/
      WIDTH:160px;    /*定義內(nèi)容的寬度為160px*/
      } 
      #menu ul {
      MARGIN: 0px;
      PADDING: 0px;
      BORDER: medium none; /*不顯示邊框*/
      LINE-HEIGHT: normal; 
      LIST-STYLE-TYPE: none;
      }
      #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;} 
      #menu li a {
      PADDING:5px 0px 5px 15px;
      DISPLAY: block; 
      FONT-WEIGHT: bold; 
      BACKGROUND: url(attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px; 
      WIDTH: 100%; 
      COLOR: #444; 
      TEXT-DECORATION: none;
      }
      #menu li a:hover { BACKGROUND: url(attachments/month_0612/42006122221553.gif) #C61C18 no-repeat 2px 8px;
      COLOR: #fff; } 
      -->
      </style> 
       </head>
      
            
       <body>
      <div id="menu"> 
      <ul>
      <li><a title="網(wǎng)站標(biāo)準(zhǔn)" href="/webstandards.html">什么是網(wǎng)站標(biāo)準(zhǔn)</a></li>
      <li><a title="標(biāo)準(zhǔn)的好處" href="http://www.mb5u..com/benefits.html">使用標(biāo)準(zhǔn)的好處</a></li>
      <li><a title="怎樣過渡" href="http://www.mb5u..com/howto.html">怎樣過渡</a></li>
      <li><a title="相關(guān)教程" href="http://www.mb5u..com/tutorial.html">相關(guān)教程</a></li>
      <li><a title="工具" href="http://www.mb5u..com/tools.html">工具</a></li>
      <li><a title="資源及鏈接" href="http://www.mb5u..com/resources.html">資源及鏈接</a></li>
      </ul>
      </div>
       </body>
      </html>
      
            
        
    


      


      

      



      


      來源：模板無憂//所屬分類：Web標(biāo)準(zhǔn)教程/更新時(shí)間：2008-04-18


      

      



      


      



      相關(guān)Web標(biāo)準(zhǔn)教程：