轉換爲無表格的表

無表都不懂，想知道在此表下面如何代碼，變成無表格轉換爲無表格的表

http://adresende.com.br/help/layout.html

誰能幫幫我，我會很感激

2010-11-16 NetoCostaJr

您是否嘗試過呢？首先嚐試一下，在網絡上搜索正常的做法等等。向我們展示您嘗試過的方法 - 它可以幫助我們幫助您。 – 2010-11-16 00:28:44

給它一個鏡頭，即使它是在Dreamweaver中。當你發帖問題時 - 這就是你學習的方式。 – 2010-11-16 00:29:27

沒有檢查代碼，但這是相當多的方式去...

<!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> 
    <title>Layout</title> 
    <style media="all" type="text/css"> 
     body { 
      font-family: Tahoma, Verdana, Arial, sans-serif; 
      font-size: 11px; 
      color: #000; 
      margin: 0; 
     } 

     #wrapper{ 
      background:#006699; 
     } 

     #cntwrapper{ 
      background:#005A86; 
      width:1024px; 
      margin:0 auto; 
     } 

     #menutopoesq { 
      float: left; 
      padding-left:16px; 
      padding-top:3px; 
      color: #FFF; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7); 
     } 

     #menutopodir { 
      float: right; 
      padding-right:14px; 
      padding-top:3px; 
      color: #FFF; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7); 
     } 

     img.menutopodir { 
      vertical-align: middle; 
     } 

     #shadow { 
      clear:both; 
      border-top:1px solid #666; 
      height:6px; 
      background:url(shadow.png); 
      position:fixed; 
      width:100%; 
      left:0; 
      right:0; 
      top:32px; 
      z-index:9009; 
      overflow:hidden; 
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='scale'); 
      _background:none; 
     } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="cntwrapper"> 
     <div id="menutopoesq"> 
      Início &nbsp; | &nbsp; Estabelecimentos &nbsp; | &nbsp; Consumidores &nbsp; | &nbsp; Blogs &nbsp; | &nbsp; O que é &nbsp; | &nbsp; Contato &nbsp; | &nbsp; Sugire 
     </div> 

     <div id="menutopodir"> 
      Olá, sejam bem vindo! &nbsp; | &nbsp; Crie seu perfil &nbsp; | &nbsp; Entrar &nbsp; | &nbsp; <img src="br.png" class="menutopodir" /> 
     </div> 
    </div> 
    <div id="shadow"></div> 
</div> 
</body> 
</html>

來源

2010-11-16 02:02:38 Conex

這裏的關鍵是使用jo的正確標記灣您目前該網站看起來像它的頂部顯示的東西的清單，最有可能的導航系統，所以我們在這裏使用列表：

<div id="topbar"> 
    <ul id="leftnav"> 
     <li>Início</li> 
     <li>Estabelecimentos</li> 
     <li>Consumidores</li> 
     <li>Blogs</li> 
     <li>O que é</li> 
     <li>Contato</li> 
     <li>Sugire</li> 
    </ul> 

    <ul id="rightnav"> 
     <li>Olá, sejam bem vindo!</li> 
     <li>Crie seu perfil</li> 
     <li>Entrar</li> 
     <li><img alt="Brazil!" src="http://adresende.com.br/help/br.png" /></li> 
    </ul> 
</div>

我們先創建佈局，浮動兩個ul小號每邊，然後浮動li的ul內創建一個在線列表：

#leftnav { 
    float: left; 
} 

#rightnav { 
    float: right; 
} 

#topbar ul li { 
    float: left; 
}

要創建兩色的背景下，我們可以應用background到body和#topbar兩者。

body { 
    background: url('shadow_2.png') repeat-x; 
} 

#topbar { 
    background: url('shadow.png') repeat-x; 
}

其中shadow.png文件將是您當前擁有的背景的1px x 45px切片。要在中間位置放置#topbar，我們給它一個寬度並使用margin: 0 auto。一個填充，也適用於內容放置到正確的位置，並施加clearfix以防止它倒塌：

#topbar { 
    padding: 8px 10px 20px; 
    width: 956px; 
    margin: 0 auto; 
    overflow: hidden; 
}

我們再申請的文本樣式 - 顏色，字體大小，文字陰影，等。在#topbar規則集：

#topbar { 
    font-family: Tahoma, Verdana, Arial, sans-serif; 
    font-size: 11px; 
    color: white; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); 
}

然後終於，我們在添加一個邊框，而不是使用豎線：

#topbar ul li { 
    padding: 0 10px; 
    border-left: 1px solid; 
    padding: 0 7px 2px; 
    line-height: 0.8em; 
} 

#topbar ul li:first-child { 
    border: 0; 
}

的:first-child規則用於刪除最左邊的li元素的邊框。

你可以看到最終結果了這裏：http://jsfiddle.net/yijiang/BWYGX/embedded/result,html,css

來源

2010-11-16 02:48:11

轉換爲無表格的表

回答

相關問題