HTMLcss制作长颈鹿动物名片
时间: 2024-06-19 16:03:34 浏览: 133
html+css广告名片
HTML和CSS是用于网页设计的两种语言,可以用它们来制作出独特的长颈鹿动物名片。
以下是一个简单的HTML和CSS代码示例,可以让你开始创建一个基本的长颈鹿动物名片:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>长颈鹿动物名片</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<h1>长颈鹿</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Giraffe_portrait.jpg/220px-Giraffe_portrait.jpg" alt="长颈鹿图片">
<p>长颈鹿是世界上最高的陆地动物。它们生活在非洲的草原和树林中,以树叶和树芽为食。</p>
</div>
</body>
</html>
```
CSS代码:
```
.card {
width: 400px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
text-align: center;
}
h1 {
font-family: 'Helvetica Neue', sans-serif;
font-size: 36px;
color: #333;
margin-bottom: 15px;
}
img {
width: 100%;
height: auto;
border-radius: 50%;
margin-bottom: 15px;
}
p {
font-family: 'Helvetica Neue', sans-serif;
font-size: 18px;
color: #333;
line-height: 1.5;
margin-bottom: 15px;
}
```
这个代码创建了一个基本的长颈鹿动物名片,包括一个标题、一张图片和一段描述。你可以根据自己的需求进行修改和扩展。
阅读全文