请帮我用html和css写一个简单的网页,要求为:网页背景色为白色,网页总宽度为1900px,中间放一个div板块,这个div板块居中,宽度为1190px,高度为940px,背景色为蓝色,在内容板块里边,再放五个div板块,它们的背景色都为红色,横向排列,间距为10px,这五个div只能在一行。
时间: 2023-11-28 11:05:16 浏览: 27
好的,以下是符合您要求的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单网页</title>
<style>
body {
background-color: #fff;
}
#container {
width: 1900px;
margin: 0 auto;
}
#content {
width: 1190px;
height: 940px;
margin: 0 auto;
background-color: blue;
display: flex;
}
.box {
width: 220px;
height: 920px;
background-color: red;
margin-right: 10px;
}
.box:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
```
解释一下代码:
- `body` 元素的背景色为白色,符合要求。
- `#container` 元素的宽度为 1900px,且通过 `margin: 0 auto` 属性使其居中,也符合要求。
- `#content` 元素的宽度为 1190px,高度为 940px,背景色为蓝色,同时通过 `display: flex` 属性将其内部的子元素变成 flex 容器,也就是让子元素横向排列,符合要求。
- `.box` 类的元素宽度为 220px,高度为 920px,背景色为红色,同时通过 `margin-right: 10px` 属性设置元素之间的间距为 10px,最后通过 `:last-child` 选择器将最后一个元素的间距设为 0,符合要求。
希望这个代码示例对您有所帮助!