我是编码和CSS的新手,并且已经整理了一个示例页面,但不确定我是否正确地进行了操作,即我的CSS的使用是否有效？我似乎得到了所需的布局但是想知道我是否犯了任何错误.
<!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="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
position: relative;
top: 50px;
left: 100px;
}
#topnav {
position: relative;
top: 35px;
left: 300px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
nav
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
解决方法
你的CSS看起来很好,没有问题,但我提供了2个建议：
1)将CSS移动到单独的文件中.这允许浏览器缓存它并减少您(及其)的带宽使用.它还可以缩小您的HTML文件,使其更易于阅读.
2)尽管ID选择器完全没问题,但我倾向于选择类选择器(例如.class-selector {…})而不是ID选择器(例如#id-selector {…}),因为您可能需要第二个包装器div后面的代码,你的ID必须是唯一的.使用class属性将允许您在代码中具有两个(或更多)具有相同样式的包装器(这是CSS的一部分).我不止一次看到人们创建了一遍又一遍地重复自己的样式表,因为他们只使用ID选择器来设置内容的样式,这违背了CSS的要点.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
