设计一个 html 炫酷 的 欢迎界面
时间: 2023-06-08 18:05:45 浏览: 137
当然可以!以下是一个简单的 HTML 欢迎界面,您可以根据自己的需要进行修改。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎来到我的网站</title>
<style>
/* 设置背景图片 */
body {
background-image: url("https://www.example.com/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}
/* 所有元素居中 */
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 设置大标题 */
.title {
font-size: 3rem;
color: #ffffff;
text-align: center;
margin-bottom: 2rem;
text-shadow: 1px 1px 2px #000000;
}
/* 设置欢迎信息 */
.welcome-message {
font-size: 1.5rem;
color: #ffffff;
text-align: center;
text-shadow: 1px 1px 2px #000000;
}
/* 设置按钮样式 */
.button {
background-color: #ffffff;
color: #000000;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-top: 2rem;
box-shadow: 1px 1px 2px #000000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="center">
<h1 class="title">欢迎来到我的网站</h1>
<p class="welcome-message">感谢您的访问!</p>
<a href="#" class="button">点击开始浏览</a>
</div>
</body>
</html>
```
希望这个简单的实例可以帮到你!