制作一个简单HTML宠物猫网页（HTML+CSS）
以下是一个简单的HTML和CSS代码示例，用于创建一个包含宠物猫的HTML网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的宠物猫</title>
<style>
body {
background-color: #ddd;
font-family: Arial, sans-serif;
}
.cat-container {
width: 300px;
margin: 50px auto;
text-align: center;
border: 2px solid #000;
padding: 20px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.cat-image {
width: 200px;
margin: 0 auto;
}
.cat-name {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="cat-container">
<img src="cat.jpg" alt="猫咪头像" class="cat-image">
<h2 class="cat-name">猫咪名字</h2>
<p>这里可以添加关于猫咪的描述。</p>
</div>
</body>
</html>在这个示例中，我们定义了一个.cat-container类来创建一个有边框和阴影的盒子，里面包含猫的图片和其他信息。CSS样式使用了简单的属性如background-color, font-family, 和box-shadow来增加页面的视觉效果。图片和文本都是居中对齐的，使得页面看起来整洁而专业。
请确保将cat.jpg替换为你自己的猫咪图片路径，并将猫咪名字替换为你的猫咪实际名字。
评论已关闭