返回

网页制作小能手，来学HTML+CSS做小黄人！附完整代码

前端

用 HTML 和 CSS 打造灵动的小黄人网页

准备工作

踏上制作小黄人网页之旅的第一步是准备一些必备工具。你需要一个文本编辑器，例如记事本或 Atom，以及一个浏览器，例如 Chrome 或 Firefox。准备好这些后，创建两个新文件：index.html 和 style.css，并确保它们位于同一文件夹中。

HTML 结构

index.html 文件将容纳网页的 HTML 结构。在这里，我们定义页面的各个部分，例如标题、正文和包含小黄人的人物介绍部分。使用以下 HTML 代码作为基础：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>小黄人介绍</h1>
  <div class="container">
    <div class="minion">
      <img src="minion.png" alt="小黄人">
      <div class="info">
        <h2>凯文</h2>
        <p>凯文是一个乐天派，他总是很开心。他喜欢吃香蕉和玩游戏。</p>
      </div>
    </div>
    <div class="minion">
      <img src="minion.png" alt="小黄人">
      <div class="info">
        <h2>斯图尔特</h2>
        <p>斯图尔特是一个悲观派，他总是很沮丧。他喜欢吃苹果和看电视。</p>
      </div>
    </div>
    <div class="minion">
      <img src="minion.png" alt="小黄人">
      <div class="info">
        <h2>鲍勃</h2>
        <p>鲍勃是一个现实派，他总是很冷静。他喜欢吃玉米和听音乐。</p>
      </div>
    </div>
  </div>
</body>
</html>

CSS 样式

style.css 文件负责网页的视觉效果。使用 CSS 代码定义字体、颜色、布局和动画。以下是用于此小黄人网页的 CSS 代码：

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  font-size: 2.5em;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.minion {
  width: 200px;
  height: 300px;
  margin: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.minion img {
  width: 100%;
  height: 200px;
}

.info {
  padding: 10px;
}

h2 {
  font-size: 1.5em;
}

p {
  font-size: 1em;
}

.minion:hover {
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
}

效果演示

现在，打开 index.html 文件并使用浏览器查看结果。你应该会看到三个可爱的小黄人，鼠标悬停在其上方时会放大。

缩放动画

为了进一步提升视觉吸引力，我们为小黄人添加了一个流畅的缩放动画。找到 CSS 代码中的以下部分：

.minion:hover {
  transform: scale(1.1);
}

并将其替换为：

.minion:hover {
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
}

现在，当鼠标悬停在小黄人上方时，它们将以缓和的速度放大。

常见问题解答

1. 如何更改小黄人的图像？

更新 style.css 文件中 .minion img 部分中的 src 属性，指向你自己的小黄人图像。

2. 如何添加更多小黄人？

在 .container div 中复制并粘贴 .minion div，并更新图像和文本以匹配新的小黄人。

3. 如何更改网页背景颜色？

在 body {} 部分中更改 background-color 属性的值，例如 background-color: #00FF00;。

4. 如何居中小黄人？

在 .container {} 部分中，将 justify-content 属性更改为 justify-content: center;。

5. 如何更改小黄人的大小？

在 .minion {} 部分中，更新 width 和 height 属性以设置新的大小。

结语

恭喜你，你已经成功创建了一个用 HTML 和 CSS 制作的小黄人网页！通过理解这些基础知识，你可以在未来制作更多有吸引力和交互性的网页。不断探索、实验并享受网页制作的乐趣！