用HTML和css写一个贺卡代码
时间: 2024-05-06 07:16:36 浏览: 14
以下是一个简单的贺卡代码,使用 HTML 和 CSS 来制作:
```html
<!DOCTYPE html>
<html>
<head>
<title>贺卡</title>
<style>
body {
background-color: #FEE8E9;
margin: 0;
padding: 0;
}
.card {
background-color: #FFFFFF;
width: 600px;
height: 400px;
margin: auto;
margin-top: 50px;
border-radius: 20px;
box-shadow: 0px 0px 20px #CCC;
overflow: hidden;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
opacity: 0.5;
}
.card h1 {
font-size: 60px;
color: #FFFFFF;
text-align: center;
margin-top: 80px;
text-shadow: 0px 0px 10px #000;
}
.card p {
font-size: 30px;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
text-shadow: 0px 0px 10px #000;
}
.card:hover img {
filter: grayscale(0%);
opacity: 1;
}
</style>
</head>
<body>
<div class="card">
<img src="https://picsum.photos/600/400" alt="背景图片">
<h1>祝福语</h1>
<p>祝XXX生日快乐!</p>
</div>
</body>
</html>
```
这个代码会生成一个带有背景图片、祝福语和生日祝福的贺卡。你可以在 `img` 标签中更改图片的地址,也可以在 `h1` 和 `p` 标签中更改文字内容。如果需要更改贺卡的大小和颜色,可以在 CSS 中更改 `.card` 的属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)