XHTML CSS 3列布局

我是XHTML和CSS世界的新手。我把一個需要3列布局的頁面放在一起。該代碼在Internet Explorer，Firefox和Google Chrome中爲我帶來了期望的效果，但我不確定它是否是正確的代碼編寫方式。XHTML CSS 3列布局

我已經發布了它的代碼之前它的工作，並在應用必要的更改，使其工作。

問題

這是正確的方式來編碼呢？
這是編碼的最佳方式嗎？
我可以在代碼中遇到什麼問題？

之前，它的工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="Content-Language" content="en-us" /> 
    <meta http-equiv="imagetoolbar" content="no" /> 

    <meta name="MSSmartTagsPreventParsing" content="true" /> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title>Sample page</title> 

    <link rel="stylsheet" type="text/css" href="web.css" media="all" /> 

    <style type="text/css" media="all"> 

    html, body { 

     height: 100%; 
     margin: 0; 
     padding: 0; 
     font-family: arial, verdana, sans-serif; 
     font-size: medium; 
     font-weight: normal; 
     font-style: none; 
     text-decoration: none; 

    } 

    img#bg { 

     height: 100%; 
     width: 100%; 
     position: fixed; 
     top: 0; 
     left: 0; 

    } 

    #wrapper { 

     border: 1px solid #eeeeee; 
     width: 960px; 
     margin: 0px auto; 
     position: relative; 
     z-index: 1; 

    } 

    #header { 

     background-color: orange; 

    } 

    #container { 

     overflow: auto; 

    } 

    #leftnav { 

     background-color: yellow; 
     float: left; 
     width: 100px; 

    } 

    #rightnav { 

     background-color: blue; 
     float: right; 

    } 

    #rightnav p { 

     border: 1px solid #000000; 
     font-size: small; 
     font-style: italic; 

    } 


    #content { 

     background-color: gray; 

    } 


    #footer { 
     clear: both; 
     background-color: green; 

    } 

    ul { 

     margin: 0px; 
     padding: 5px; 

    } 

    ul li { 

     list-style-type: none; 
     display: inline; 

    } 

    </style> 

</head> 

<body> 

    <div> 
     <img src="images/background.jpg" alt="background" id="bg" /> 
    </div> 

    <div id="wrapper"> 
     <div id="header"> 
      <ul> 
       <li>home</li> 
       <li>about</li> 
       <li>contact</li> 
      </ul> 
     </div> 

     <div id="container"> 

      <div id="leftnav"> 
       <ol> 
        <li>Link 1</li> 
        <li>Link 2</li> 
        <li>Link 3</li> 
       </ol> 
      </div> 

      <div id="rightnav"> 
       <p>Test</p> 
      </div> 

      <div id="content"> 
       content 
      </div> 
     </div> 

     <div id="footer"> 
      footer 
     </div> 
    </div> 

</body> 
</html>

它的工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="Content-Language" content="en-us" /> 
    <meta http-equiv="imagetoolbar" content="no" /> 

    <meta name="MSSmartTagsPreventParsing" content="true" /> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title>Sample page</title> 

    <link rel="stylsheet" type="text/css" href="web.css" media="all" /> 

    <style type="text/css" media="all"> 

    html, body { 

     height: 100%; 
     margin: 0; 
     padding: 0; 
     font-family: arial, verdana, sans-serif; 
     font-size: medium; 
     font-weight: normal; 
     font-style: none; 
     text-decoration: none; 

    } 

    img#bg { 

     height: 100%; 
     width: 100%; 
     position: fixed; 
     top: 0; 
     left: 0; 

    } 

    #wrapper { 

     border: 1px solid #eeeeee; 
     width: 960px; 
     margin: 0px auto; 
     position: relative; 
     z-index: 1; 

    } 

    #header { 

     background-color: orange; 

    } 

    #container { 

     overflow: hidden; 

    } 

    #leftnav { 

     background-color: yellow; 
     float: left; 
     width: 100px; 

    } 

    #rightnav { 

     background-color: blue; 
     float: right; 
     width: 100px; 
     padding-bottom: 1000px; 
     margin-bottom: -1000px; 

    } 

    #rightnav p { 

     border: 1px solid #000000; 
     font-size: small; 
     font-style: italic; 

    } 


    #content { 

     background-color: gray; 

    } 


    #footer { 
     clear: both; 
     background-color: green; 

    } 

    ul { 

     margin: 0px; 
     padding: 5px; 

    } 

    ul li { 

     list-style-type: none; 
     display: inline; 

    } 

    </style> 

</head> 

<body> 

    <div> 
     <img src="images/background.jpg" alt="background" id="bg" /> 
    </div> 

    <div id="wrapper"> 
     <div id="header"> 
      <ul> 
       <li>home</li> 
       <li>about</li> 
       <li>contact</li> 
      </ul> 
     </div> 

     <div id="container"> 

      <div id="leftnav"> 
       <ol> 
        <li>Link 1</li> 
        <li>Link 2</li> 
        <li>Link 3</li> 
       </ol> 
      </div> 

      <div id="rightnav"> 
       <p>Test</p> 
      </div> 

      <div id="content"> 
       content 
      </div> 
     </div> 

     <div id="footer"> 
      footer 
     </div> 
    </div> 

</body> 
</html>

來源

2011-05-19 PeanutsMonkey

哇這是一個非常寬泛的問題 – Kieran 2011-05-19 01:53:09

@Kieran - 它是如何廣泛？如果需要，我可以更新這個問題。 – PeanutsMonkey 2011-05-19 01:57:25

@基蘭 - 不是很廣泛 - 它只是評論一些代碼:) – easwee 2011-05-19 09:04:54

後的代碼是非常正常 - 幾件事情，你可以這樣做：

1）您不需要定義在默認情況下設置的屬性瀏覽器：font-weight: normal;已經是body的默認瀏覽器值，所以如果你不改變它的外觀，你可以忽略它。

2）margin: 0px;不需要與它的PX - 做margin: 0;

3）名稱ID和班級與內容相關的名字 - 沒有與佈局相關：#rightnav可能是右側在當前的CSS佈局，但有一天，你可能會改變主意，把它放在左邊，id有點失去一些相關性。 #subnav可能是更好的選擇。

4）真的不明白你想用此位的代碼acomplish（因爲我沒有時間去建立一個直播網站爲例）什麼：

padding-bottom: 1000px; 
    margin-bottom: -1000px;

，但看起來有點醜altough這是完全有效的，可以完成這項工作。

5.）<img src="images/background.jpg" alt="background" id="bg" /> - 如果圖像是背景而不是內容相關的，則使用css屬性background-image來應用它。

我不會評論元標記，因爲我對它沒有足夠的瞭解。

來源

2011-05-19 09:03:19 easwee

@ easwee-謝謝。我定義了諸如'font-weight：normal'之類的屬性是爲了我自己明白他們做了什麼。當我更好地掌握不同的屬性和價值時，我一定會將其刪除。感謝您的高舉。考慮使用該單位的保證金屬性。至於名稱ID和類，我按照佈局對它們進行命名的原因是，它很容易識別它影響的佈局的一部分。＃＃subnav似乎相當模糊。 – PeanutsMonkey 2011-05-19 19:44:23

@ easwee-另外在代碼塊的結構方面，你有任何評論它是如何影響SEO的？我發佈了一個單獨的問題在http://stackoverflow.com/questions/6050799/xhtml-and-search-engine-optimization – PeanutsMonkey 2011-05-19 19:48:18

@easwee - 我使用填充和保證金屬性的原因是因爲正確的文本數量導航要少得多，背景比左邊的要短。如果你有時間，你會看到我複製和粘貼代碼的意思。至於圖片背景，我嘗試過使用背景圖片，但是它不允許我伸展，因爲與可用的屏幕尺寸相比，圖片尺寸小得多。 – PeanutsMonkey 2011-05-19 20:01:54

至於meta標籤的一些評論...

<meta http-equiv="imagetoolbar" content="no" /> 
<meta name="MSSmartTagsPreventParsing" content="true" />

這些元標籤是沒有用的。

<meta name="keywords" content="" />

meta關鍵字用來說明問題。搜索引擎再也不會受到影響，因爲它總是被濫用。

<meta name="description" content="" />

而這個元標記是......好......不是無用的，但差不多。頁面內的內容應該全部爲你描述。

來源

2011-05-19 19:30:52

谷歌最近有一篇關於'描述'元的文章，並提倡使用它。 http://goo.gl/YlLH3 – Rob 2011-05-19 19:37:13

@Patrick Fredriksson - 當你說他們沒用時，爲什麼？我見過很多例子引用它們。 @Rob - 太好了。將閱讀它。 – PeanutsMonkey 2011-05-19 19:49:34

@Rob是Google主張它的用途，因爲他們有時會抓住描述。但是，當您搜索特定的單詞時，Google仍會突出顯示這些單詞以及任何圍繞它的單詞。所以很少顯示。 – 2011-05-20 15:17:46

XHTML CSS 3列布局

回答

相關問題