给我html实现一个简单的公告主页,有动态酷炫的背景,公告标题图、公告概述图、公告标题、公告简介、公告内容、公告作者、公告发布时间、其他等功能展示,代码
时间: 2023-07-04 12:16:04 浏览: 48
好的,以下是一个简单的公告主页的HTML代码,包括了您所要求的功能展示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公告主页</title>
<style>
body {
background: linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 48px;
margin: 0;
padding: 0 0 20px;
border-bottom: 2px solid #fff;
}
h2 {
font-size: 32px;
margin: 0;
padding: 20px 0 10px;
border-bottom: 1px solid #fff;
}
p {
font-size: 20px;
margin: 0;
padding: 10px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>公告主页</h1>
<h2>公告标题</h2>
<img src="公告标题图.jpg" alt="公告标题图">
<p>公告概述图:</p>
<img src="公告概述图.jpg" alt="公告概述图">
<p>公告简介:这是一条重要的公告,内容详细,请大家仔细阅读。</p>
<p>公告内容:</p>
<p>这是公告的具体内容,内容非常重要,请大家认真阅读。</p>
<p>公告作者:张三</p>
<p>公告发布时间:2022年1月1日</p>
<p>其他信息:其他信息展示在这里。</p>
</div>
</body>
</html>
```
您可以将公告标题图、公告概述图等图片文件命名为`公告标题图.jpg`、`公告概述图.jpg`等,然后将其放在与HTML文件相同的目录下。当然,您也可以将图片文件放在其他目录中,此时需要在HTML代码中正确指定图片文件的路径。