XHTML CSS 3列布局
[英]XHTML CSS 3 Column Layout
问题描述
I am new to the world of XHTML and CSS. 
我是XHTML和CSS世界的新手。 I put together a page that requires 3 column layout. 我整理了一个需要3列布局的页面。 The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code. 该代码在Internet Explorer，Firefox和Google Chrome上提供了所需的效果，但我不确定它是否是正确的编码方式。
I have posted the code for it before it worked and after applying the necessary changes to make it work. 我已经在它工作之前发布了代码，并在应用必要的更改后使其工作。
Questions 问题
- Is this the correct way to code it? 这是编码的正确方法吗？
- Is it the best way to code? 这是编码的最佳方式吗？
- What issues can I run into with the code? 我可以在代码中遇到什么问题？
Before it worked 在它工作之前
<!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>
After it worked 工作之后
<!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>
2 个解决方案
解决方案1
2 已采纳 2011-05-19 09:03:19
The code is pretty much ok - few things you may do: 代码非常好 - 你可能做的事情很少：
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; 1.）您不需要在浏览器中定义默认设置的属性： font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look. 已经是body的默认浏览器值，因此如果你不改变它的外观，你可以省略它。
2.) margin: 0px; 2.） margin: 0px; does not need the px with it - do margin: 0; 不需要px - 做margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. 3.）名称ID和具有内容相关名称的类 - 与布局无关： #rightnav可能位于当前css布局的右侧，但有一天你可能会改变主意并把它放在左侧并且id有点丢失一些相关性。 #subnav might be a better choice. #subnav可能是更好的选择。
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example): 4.）不要真正理解你想用这段代码来完成什么（因为我没有时间设置一个实时站点的例子）：
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job. 但看起来有点难看，尽管它完全有效并且可以完成这项工作。
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it. 5.） <img src="images/background.jpg" alt="background" id="bg" /> - 如果图像是背景而不是内容相关，请使用css属性background-image来应用它。
I won't comment on meta tags since I don't have enough knowledge about it. 我不会评论meta标签，因为我对它没有足够的了解。
解决方案2
0 2011-05-19 19:30:52
A few comments with regards to meta tags... 关于元标记的一些评论......
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless. 这些元标记是无用的。
<meta name="keywords" content="" />
The meta keywords used to matter. meta关键字过去很重要。 No search engines bother with it anymore as it's always abused. 没有任何搜索引擎会因此而烦恼，因为它总是被滥用。
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. 而这个元标记是......好吧......不是没用，而是差不多。 The content within the page should all the describing for you. 页面中的内容应该全部为您描述。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.