用html做一个漂亮的页面,可以展示作品,每一个作品链接都是有图片和标题、作者、发布时间,而且点击图片或者那个标题都可以进到对应的作品链接,在加载开始时有漂亮的加载动画,加载完毕自动关闭,网站有动态漂亮的背景,有各种小功能,不包含任何图片,顶部有漂亮的导航栏,随着用户拉动鼠标导航栏会变化形,一直跟着页面下拉,有页脚和作者,有网站公告的功能,可以关闭,背景和网站都是交互式的,页面左下角还有一个动态的小人的代码,和刚刚不一样的,优美一点
时间: 2023-10-09 16:06:07 浏览: 44
好的,以下是一个简单的示例 HTML 页面,仅供参考。注意,这只是一个基础的框架,更漂亮、更复杂的效果需要使用 CSS 和 JavaScript 进行实现。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作品展示</title>
<style>
/* 设置背景 */
body {
background-color: #f5f5f5;
background-image: url("background.gif");
background-size: cover;
background-attachment: fixed;
}
/* 设置导航栏 */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 60px;
transition: all 0.3s;
}
/* 滚动时导航栏透明度渐变 */
#navbar.scrolled {
background-color: rgba(0, 0, 0, 0.8);
}
/* 设置作品展示区域 */
#works {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 80px;
}
.work {
width: 300px;
height: 400px;
margin: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.work img {
width: 100%;
height: 250px;
object-fit: cover;
}
.work h3 {
margin: 10px;
font-size: 24px;
}
.work p {
margin: 5px 10px;
font-size: 14px;
color: #999;
}
/* 设置加载动画 */
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#loading img {
width: 100px;
height: 100px;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
/* 设置页脚 */
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 60px;
}
/* 设置公告 */
#announcement {
position: fixed;
top: 80px;
right: -300px;
width: 300px;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 20px;
transition: all 0.3s;
}
#announcement.show {
right: 0;
}
#announcement h2 {
margin-top: 0;
font-size: 24px;
}
#announcement p {
margin: 10px 0;
font-size: 16px;
}
/* 设置小人 */
#little-man {
position: fixed;
bottom: 20px;
left: 20px;
width: 100px;
height: 100px;
background-image: url("little-man.gif");
background-size: cover;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div id="navbar">
<h1>作品展示</h1>
</div>
<!-- 作品展示区域 -->
<div id="works">
<div class="work">
<a href="work1.html">
<img src="work1.jpg" alt="作品1">
<h3>作品1</h3>
<p>作者:张三</p>
<p>发布时间:2022-01-01</p>
</a>
</div>
<div class="work">
<a href="work2.html">
<img src="work2.jpg" alt="作品2">
<h3>作品2</h3>
<p>作者:李四</p>
<p>发布时间:2022-01-02</p>
</a>
</div>
<!-- 更多作品 -->
</div>
<!-- 加载动画 -->
<div id="loading">
<img src="loading.gif" alt="加载中...">
</div>
<!-- 页脚 -->
<div id="footer">
<p>© 2022 作者</p>
</div>
<!-- 公告 -->
<div id="announcement">
<h2>网站公告</h2>
<p>欢迎来到我的作品展示网站!</p>
<p>本网站仅供学习交流,不涉及任何商业用途。</p>
<button onclick="closeAnnouncement()">关闭</button>
</div>
<!-- 小人 -->
<div id="little-man"></div>
<script>
// 监听页面滚动事件,改变导航栏透明度
window.addEventListener("scroll", function() {
var navbar = document.getElementById("navbar");
if (window.pageYOffset > 0) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});
// 模拟加载动画,加载完毕后自动关闭
setTimeout(function() {
var loading = document.getElementById("loading");
loading.style.display = "none";
}, 3000);
// 控制公告的显示和隐藏
function closeAnnouncement() {
var announcement = document.getElementById("announcement");
announcement.classList.remove("show");
}
</script>
</body>
</html>
```