中秋之礼，匠心呈献：打造响应式HTML/CSS中秋礼品卡

2024-02-17 15:23:00

中秋佳节，匠心独运的HTML/CSS响应式礼品卡，传递团圆祝福

HTML和CSS：网页设计的基石

中秋佳节，阖家团圆，一份精心挑选的礼品卡承载着美好的祝愿与节日的喜悦。HTML（超文本标记语言）和CSS（层叠样式表）是网页设计的基石，熟练掌握它们，可以制作出赏心悦目的网页，而中秋礼品卡页面是一个绝佳的实践案例。

打造响应式中秋礼品卡：分步指南

1. 构建页面结构（HTML）

HTML负责网页的结构，以下示例代码构建了一个基本的礼品卡页面：

<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>中秋礼品卡</h1>
  <p>赠予您一份中秋佳节的祝福，愿您度过一个团圆美满的节日。</p>
  <form action="submit.php" method="post">
    <input type="text" name="name" placeholder="收礼人姓名">
    <input type="email" name="email" placeholder="收礼人邮箱">
    <input type="submit" value="发送">
  </form>
</body>
</html>

2. 美化页面样式（CSS）

CSS定义网页的样式，以下是让礼品卡页面更具美感和风格的示例代码：

body {
  background-color: #f5f5f5;
  font-family: 'Arial', sans-serif;
}
h1 {
  color: #444;
  text-align: center;
}
p {
  color: #666;
  text-align: center;
}
form {
  margin: 0 auto;
  width: 50%;
}
input[type="text"], input[type="email"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
}
input[type="submit"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  background-color: #444;
  color: #fff;
  border: none;
}

3. 实现响应式布局

为了让礼品卡页面在不同屏幕尺寸上都能完美呈现，可以使用CSS媒体查询实现响应式布局：

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  p {
    font-size: 16px;
  }
  form {
    width: 90%;
  }
  input[type="text"], input[type="email"] {
    width: 100%;
  }
  input[type="submit"] {
    width: 100%;
  }
}