帮我写一个html生日贺卡
时间: 2023-03-15 19:53:57 浏览: 80
我很高兴为你写一个html生日贺卡!<html>
<head>
<title>生日快乐</title>
</head>
<body>
<h1>祝你生日快乐!</h1>
<p>愿你今天充满喜悦,祝你度过美好的一天!</p>
</body>
</html>
相关问题
html制作一个生日贺卡
好的,下面是一个简单的HTML生日贺卡的制作代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>生日贺卡</title>
<style>
body {
background-color: pink;
text-align: center;
}
h1 {
font-size: 40px;
color: white;
text-shadow: 2px 2px black;
margin-top: 100px;
}
p {
font-size: 30px;
color: white;
text-shadow: 2px 2px black;
margin-top: 50px;
}
img {
margin-top: 50px;
border-radius: 50%;
box-shadow: 2px 2px black;
}
</style>
</head>
<body>
<h1>生日快乐!</h1>
<p>祝你天天快乐,岁岁平安!</p>
<img src="https://picsum.photos/id/237/200/200" alt="生日蛋糕">
</body>
</html>
```
这个页面使用了pink作为背景颜色,居中对齐,并添加了一个40px的白色标题“生日快乐!”和一个30px的白色祝福语“祝你天天快乐,岁岁平安!”,最后添加了一张圆形的生日蛋糕图片。你可以根据自己的喜好和需要进行修改。
用HTML和css写一个贺卡代码
以下是一个简单的贺卡代码,使用 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` 的属性。