1
我對編碼和CSS這個世界很陌生，試圖創建一個有2列和多行類似於表的頁面，但我不確定這是否是正確的方式達到結果。使用CSS的2列和多行
注意
我使用內部樣式表之前，我碰到一個外部的樣式表複製。
我簡單地命名了列leftnav和leftnav1以及content和content1。我知道這些名稱並不理想，但我正試圖確定編寫頁面的最佳方式，而不是擔心此刻命名約定。
CODE
<!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 name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#backdrop {
background-color: #000000;
width: 100%;
height: 10px;
}
#wrapper {
/* background-color: gray; */
width: 960px;
margin: 0px auto;
margin-top: 100px;
}
#logo {
float: left;
background-color: #E0EEEE;
margin-bottom: 10px;
}
#topnav {
float: right;
margin-right: 180px;
margin-bottom: 10px;
/* background-color: #C1CDCD; */
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#innerwrapper {
clear: both;
width: 800px;
margin: 0px auto;
}
#header {
background-color: #000000;
width: 700px;
height: 200px;
}
#innerhead {
color: #ffffff;
padding: 50px;
}
#leftnav {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
#leftnav1 {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content1 {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
</style>
</head>
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div id="leftnav">About</div>
<div id="content">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="leftnav1">About</div>
<div id="content1">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
</html>
@ Phil.Wheeler - 由於這並不是說我不想使用O看看使用網格CSS框架，但我想學習和了解如何實現類似的結果。這可能需要我編寫更多的代碼，但至少我正在學習每個屬性的含義，如何最好地使用它等，以及如何最好地將頁面分爲多個部分。儘管如此，我很欣賞這個建議。 – PeanutsMonkey 2011-05-25 03:33:35
能否請您詳細說明我們在結果中想要什麼。因此我們將對此進行處理。 – NewUser 2011-05-25 04:01:59
@ Phil.Wheeler - 謝謝。發佈問題後，它確實發生在我身上，我應該使用類而不是IDS。您建議的解決方案是否被視爲最佳實踐？ – PeanutsMonkey 2011-05-25 19:41:57