使用HTML CSS 写一个元旦贺卡
时间: 2023-07-20 21:12:20 浏览: 85
好的,以下是一个简单的HTML CSS 元旦贺卡示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy New Year!</title>
<style>
body {
background-color: #F5DEB3;
}
.card {
width: 400px;
height: 500px;
margin: 50px auto;
padding: 20px;
background-color: #FFFFFF;
border: 5px solid #FFDAB9;
box-shadow: 5px 5px 10px #888888;
text-align: center;
}
h1 {
font-size: 50px;
margin-top: 80px;
color: #FF6347;
text-shadow: 2px 2px #FFC0CB;
}
p {
font-size: 30px;
margin-top: 50px;
color: #000000;
text-shadow: 1px 1px #FFFFFF;
}
</style>
</head>
<body>
<div class="card">
<h1>Happy New Year!</h1>
<p>May all your dreams come true in 2022!</p>
</div>
</body>
</html>
```
说明:
- 使用了HTML5的文档类型声明,以及设置了文档语言为英语。
- 使用了内置样式表的方式来设置页面样式。
- 设置了背景颜色、卡片容器的宽高、边距、内边距、背景颜色、边框、阴影和居中对齐。
- 给标题和正文设置了字体大小、顶部边距、颜色和阴影效果。
- 最后在body中添加了一个包含标题和正文的卡片容器,实现了一个简单的元旦贺卡。
相关推荐
![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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![image/jpeg](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)