6
我对编码和CSS这个世界很陌生，这是我所做过的第一个要求我使用负值的页面。我记得前些时候在某处读过，最好不要使用负值。我不确定为什么，因为我似乎无法再找到那篇文章。在CSS中使用负值是否可以接受？
我想感谢您对我的代码中使用负值的反馈。我避免使用任何框架或类似的东西，以便我能够理解CSS编码的全部内容。
此外，我已经使用了一个内部样式表，以便我可以快速修改我的代码，而不是在两个不同的文件之间交换。在开发真实世界页面时，我肯定会考虑使用外部样式表。其次，这是我第一次使用导入来使用重置样式表。
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">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#topnav {
/* background-color: #8B8970; */
float: right;
margin-top: 50px;
width: 300px;
text-align: right;
}
#status {
/* background-color: #808080; */
width: 100px;
position: relative;
top: -80px;
left: 800px;
text-align: center;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="status">login</div>
</div>
</div>
<div id="separator"></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 id="rightcol">
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
编辑 - 每WDM的建议更新代码，只要正确使用
<!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">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#status {
/* background-color: #808080; */
position: relative;
top: -85px;
left: 780px;
width: 100px;
text-align: center;
}
#topnav {
/* background-color: #8B8970; */
float: right;
width: 300px;
margin-top: -70px;
text-align: right;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="status">Logged in</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div id="separator"></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 id="rightcol">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
负值是完全可以接受的，但我会谨慎使用它们。它们在某些情况下非常有用。 – wdm 2011-05-26 05:58:48
@wdm - 他们有什么用处？我的负值使用是否可以接受？ – PeanutsMonkey 2011-05-26 08:45:04
http://stackoverflow.com/questions/1623163/is-negative-margin-or-padding-invalid-css-according-to-w3c可能的重复？ – 2011-05-26 05:53:05