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列布局

回答

相关问题