3
我對編碼和CSS這個世界很陌生。我已經整理了一個頁面，但是我不確定我是否可能過度使用了div標記，是否會影響頁面的性能，以及我是否應該將浮點數作爲其自己的div標記清除。多個DIV的使用是否影響頁面性能？
#content {
clear: both;
}
我已經包含下面
<!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>Example</title>
<base href="" />
<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;
}
#wrapper {
/* background-image: url('images/bg-inner-page.gif'); */
background-color: #808080;
height: 200px;
}
#innerwrapper {
width: 960px;
overflow: auto;
}
#header {
}
#logo {
float: left;
margin-top: 20px;
margin-left: 50px;
background-color: gray;
}
#topnav {
float: left;
margin-top: 50px;
margin-left:30px;
color: #ffffff;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
clear: both;
}
#innercontent {
float: left;
margin-top: 100px;
margin-left: 225px;
margin-bottom: 20px;
width: 400px;
}
#rightcol {
float: left;
margin-top: 125px;
margin-left: 50px;
width: 200px;
}
#footer {
background-color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="150" height="96" alt="logo" /></div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="innercontent">
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 id="rightcol"><img src="http://htmldog.com/r/logo.gif" width="140" height="91" alt="html" /></div>
</div>
<div id="footer">footer</div>
<div>
</body>
</html>
@Alastair Pitts - 謝謝。所以，即使我使用'div'來清除浮點數是絕對好的嗎？ – PeanutsMonkey 2011-05-24 05:57:24
@PananutsMonkey：我絲毫不擔心。就個人而言，我避免使用浮游物，但這是個人喜好。如果你有100個div的話，我真的會開始擔心。然後它變得更可維護性問題。 – 2011-05-24 05:59:19
@PananutsMonkey：AFAIK，這是大多數人建議清除浮游物的方式。由於它是最主流的場景之一，我認爲它也是最優化的。 – 2011-05-24 06:00:03