用html做一个漂亮的页面,可以展示作品,每一个作品链接都是有图片和标题、作者、发布时间,而且点击图片或者那个标题都可以进到对应的作品链接,在加载开始时有漂亮的加载动画,加载完毕自动关闭,网站有动态漂亮的背景,有各种小功能,不包含任何图片,顶部有漂亮的导航栏,随着用户拉动鼠标导航栏会变化形,一直跟着页面下拉,有页脚和作者,有网站公告的功能,可以关闭,背景和网站都是交互式的,页面左下角还有一个动态的小人的代码
时间: 2023-10-03 13:04:39 浏览: 47
好的,让我为你介绍如何用 HTML 制作这样一个漂亮的页面。
首先,我们需要编写 HTML 文件,包含以下基本结构:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漂亮的作品展示页面</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<!-- 作品展示 -->
<section id="works">
<h2>作品展示</h2>
<ul>
<li>
<a href="#">
<img src="work1.jpg">
<h3>作品标题1</h3>
<p>作者:张三</p>
<p>发布时间:2021年4月1日</p>
</a>
</li>
<li>
<a href="#">
<img src="work2.jpg">
<h3>作品标题2</h3>
<p>作者:李四</p>
<p>发布时间:2021年4月2日</p>
</a>
</li>
<!-- 其他作品 -->
</ul>
</section>
<!-- 网站公告 -->
<section id="notice">
<h2>网站公告</h2>
<p>欢迎来到我们的网站!</p>
<button class="close">关闭</button>
</section>
<!-- 页脚 -->
<footer>
<p>版权所有 © 2021 漂亮的作品展示页面</p>
<p>联系我们:abc@example.com</p>
</footer>
<!-- 侧边栏 -->
<aside>
<!-- 动态的小人 -->
<div class="animation"></div>
</aside>
<!-- 引入脚本文件 -->
<script src="script.js"></script>
</body>
</html>
```
接下来,我们需要编写 CSS 文件,添加样式和动画效果:
```css
/* 导航栏 */
header {
background-color: #222;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
nav ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
list-style: none;
}
nav li {
padding: 10px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/* 作品展示 */
#works {
margin-top: 100px;
text-align: center;
}
#works h2 {
font-size: 2em;
margin-bottom: 30px;
}
#works ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 30px;
padding: 0;
margin: 0;
list-style: none;
}
#works li a {
display: block;
border: 1px solid #ccc;
padding: 10px;
text-align: left;
text-decoration: none;
color: #333;
}
#works li a:hover {
background-color: #eee;
}
#works li img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
/* 网站公告 */
#notice {
background-color: #f8d7da;
color: #721c24;
padding: 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
}
#notice h2 {
font-size: 1.5em;
margin-top: 0;
}
#notice button.close {
float: right;
background-color: #721c24;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
/* 页脚 */
footer {
background-color: #eee;
padding: 20px;
text-align: center;
}
/* 侧边栏 */
aside {
position: fixed;
bottom: 20px;
right: 20px;
}
.animation {
width: 50px;
height: 50px;
background-color: #222;
border-radius: 50%;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
```
最后,我们需要编写 JavaScript 文件,添加加载动画和交互式背景效果:
```javascript
// 加载动画
window.addEventListener('load', function() {
var loader = document.querySelector('.loader');
loader.classList.add('hidden');
});
// 网站公告
var notice = document.querySelector('#notice');
var closeBtn = notice.querySelector('.close');
closeBtn.addEventListener('click', function() {
notice.style.display = 'none';
});
// 交互式背景
var body = document.body;
body.addEventListener('mousemove', function(e) {
var x = e.clientX / window.innerWidth;
var y = e.clientY / window.innerHeight;
body.style.backgroundColor = 'rgb(' + (x * 255) + ',' + (y * 255) + ', 100)';
});
```
这样,一个漂亮的作品展示页面就完成了。你可以根据自己的需求和喜好,自由地修改页面的样式和功能。