编写html布局程序,div包括header、slider-images、spacer、多个article盒子、copyright
时间: 2023-08-13 16:05:05 浏览: 48
好的,以下是一个简单的 HTML 布局程序,其中包括了一个 div,包括 header、slider-images、spacer、多个 article 盒子和一个版权信息:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML 布局程序</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #F5F5F5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #333;
color: #FFF;
padding: 20px;
text-align: center;
}
.slider-images {
background-image: url('slider-images.jpg');
background-size: cover;
height: 400px;
}
.spacer {
height: 50px;
}
article {
background-color: #FFF;
border: 1px solid #CCC;
padding: 20px;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #FFF;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>HTML 布局程序</h1>
</header>
<div class="slider-images"></div>
<div class="spacer"></div>
<article>
<h2>文章标题1</h2>
<p>文章内容1</p>
</article>
<article>
<h2>文章标题2</h2>
<p>文章内容2</p>
</article>
<article>
<h2>文章标题3</h2>
<p>文章内容3</p>
</article>
<footer>
<p>版权所有 © 2021</p>
</footer>
</div>
</body>
</html>
```
这个布局程序中的 div 具有以下特点:
- `header` 元素包含了一个标题,在这个布局程序中用于显示网站的名称。
- `slider-images` 元素是一个占满整个宽度的元素,用于显示一个幻灯片或者轮播图。
- `spacer` 元素是一个用于分隔不同元素的空白元素,可以根据需要进行调整。
- `article` 元素是一个用于显示文章内容的元素。根据需要可以添加多个 `article` 元素。
- `footer` 元素包含了版权信息。