XHTML CSS 3列布局
[英]XHTML CSS 3 Column Layout
問題描述
我是XHTML和CSS世界的新手。 我整理了一個需要3列布局的頁面。 該代碼在Internet Explorer，Firefox和Google Chrome上提供了所需的效果，但我不確定它是否是正確的編碼方式。
我已經在它工作之前發布了代碼，並在應用必要的更改后使其工作。
問題
- 這是編碼的正確方法嗎？
- 這是編碼的最佳方式嗎？
- 我可以在代碼中遇到什么問題？
在它工作之前
<!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>
2 個解決方案
解決方案1
2 已采納 2011-05-19 09:03:19
代碼非常好 - 你可能做的事情很少：
1.）您不需要在瀏覽器中定義默認設置的屬性： font-weight: normal; 已經是body的默認瀏覽器值，因此如果你不改變它的外觀，你可以省略它。
2.） margin: 0px; 不需要px - 做margin: 0;
3.）名稱ID和具有內容相關名稱的類 - 與布局無關： #rightnav可能位於當前css布局的右側，但有一天你可能會改變主意並把它放在左側並且id有點丟失一些相關性。 #subnav可能是更好的選擇。
4.）不要真正理解你想用這段代碼來完成什么（因為我沒有時間設置一個實時站點的例子）：
padding-bottom: 1000px;
margin-bottom: -1000px;
但看起來有點難看，盡管它完全有效並且可以完成這項工作。
5.） <img src="images/background.jpg" alt="background" id="bg" /> - 如果圖像是背景而不是內容相關，請使用css屬性background-image來應用它。
我不會評論meta標簽，因為我對它沒有足夠的了解。
解決方案2
0 2011-05-19 19:30:52
關於元標記的一些評論......
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
這些元標記是無用的。
<meta name="keywords" content="" />
meta關鍵字過去很重要。 沒有任何搜索引擎會因此而煩惱，因為它總是被濫用。
<meta name="description" content="" />
而這個元標記是......好吧......不是沒用，而是差不多。 頁面中的內容應該全部為您描述。
XHTML / CSS 3列Quandry
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.