1. 建立网页sx11.html。整个网页用一个div,id=container。 2. id=container的div中嵌套了四个div。对应图中1、2、3、4号,id值分别为header、menu、maincontent、footer。 3. 其中3号div中又嵌套了三个div。对应图中5、6、7号,id值分别为sidebar、sidebar2、content。见下图(3.jpg)。 4. 网页样式的设置: 5. 整个文档:字体Verdana;字号14像素;边距均为0。 6. id=container:上下边距0,左右边距auto;宽度100%。 7. id=header:高度100像素;背景颜色#99cc66;下边距5像素。 8. id=menu:高度30像素;背景颜色#669933;下边距5像素。 9. id=maincontent:高500像素;下边距5像素。 10. id=sidebar:宽200像素;高500像素;背景颜色#ccff99;向左浮动。 11. id=sidebar2:宽200像素;高500像素;背景颜色#ccff99;向右浮动。 12. id=content:上下边距为0,左右边距为205像素;高500像素;背景颜色#ffffaa。 13. id=footer:高60像素;背影颜色#99cc66。 14. 样式文件可以作为单独的文件保存为style.css。或者作为内嵌样式放在HTML文档中。 15. 尝试将页面宽度固定,例如将页面设为宽1000px,进一步观察页面效果。
时间: 2024-02-16 15:03:56 浏览: 145
以下是sx11.html的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>sx11</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="maincontent">
<div id="sidebar"></div>
<div id="content"></div>
<div id="sidebar2"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
```
以下是style.css的代码:
```css
body {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
#container {
margin: 0 auto;
padding: 0;
width: 100%;
}
#header {
height: 100px;
background-color: #99cc66;
margin-bottom: 5px;
}
#menu {
height: 30px;
background-color: #669933;
margin-bottom: 5px;
}
#maincontent {
height: 500px;
margin-bottom: 5px;
}
#sidebar {
width: 200px;
height: 500px;
background-color: #ccff99;
float: left;
}
#sidebar2 {
width: 200px;
height: 500px;
background-color: #ccff99;
float: right;
}
#content {
padding: 0 0 0 205px;
height: 500px;
background-color: #ffffaa;
margin: 0;
}
#footer {
height: 60px;
background-color: #99cc66;
}
```
以上代码实现了要求的布局和样式。如果想将页面宽度固定为1000px,只需要将#container的width改为1000px即可。
阅读全文