以下是一个简单的网页设计示例,灵感来源于《言叶之庭》,您可以根据自己的需要进行修改和扩展。这个示例使用HTML和CSS,展示了一个简单的网页布局,包含一个标题、背景图像、一些文本内容和一个按钮。

html
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
background-image: url('背景图片链接.jpg'); /* 请更换为实际的图片路径 */
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
position: relative;
}
.overlay {
background: rgba(0, 0, 0, 0.5); /* 黑色透明层 */
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 3em;
margin: 0;
}
p {
font-size: 1.5em;
}
.button {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
}
说明:
1. 背景图片:将 `背景图片链接.jpg` 替换为您自己的背景图片的路径。
2. 字体和颜色:可以根据您的需求,自定义字体样式和颜色。
3. 按钮动作:按钮的 `onclick` 事件可以修改为任何您想要的功能。
4. 灵活性:可以通过添加更多的CSS或HTML元素扩展这个基本模板。
您可以将上面的代码复制到一个 `.html` 文件中,然后在浏览器中打开即可查看效果!

查看详情

查看详情