HTML和CSS如何制作简单网页代码？-网页设计-锦华智联科技

、简介、图片列表和页脚的简单个人介绍页面。

（图片来源网络，侵删）

最终效果预览

我们将创建一个类似下面这样风格的简单网页：

第一步：创建基本文件结构

在你的电脑上创建一个文件夹，my-website，在这个文件夹里,我们需要创建两个文件：

index.html (这是网页的结构和内容)
style.css (这是网页的样式，比如颜色、字体、布局等)

文件结构如下：

my-website/
├── index.html
└── style.css

第二步：编写HTML内容 (`index.html`)

HTML (HyperText Markup Language) 是用来搭建网页骨架的，它使用各种“标签”（如 <h1>, <p>, <img>）来定义内容的结构。

（图片来源网络，侵删）

打开 index.html 文件,将下面的代码复制进去：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的简单网页</title>
    <!-- 链接到我们的CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的小天地</h1>
        <p>一个由HTML和CSS制作的简单个人主页</p>
    </header>
    <main>
        <section class="intro">
            <h2>关于我</h2>
            <p>你好！我是一名前端开发爱好者，这个页面是为了展示HTML和CSS的基础用法而创建的，希望你喜欢这个简单的设计！</p>
        </section>
        <section class="gallery">
            <h2>我的爱好</h2>
            <div class="image-container">
                <img src="https://via.placeholder.com/150.png?text=摄影" alt="摄影">
                <img src="https://via.placeholder.com/150.png?text=旅行" alt="旅行">
                <img src="https://via.placeholder.com/150.png?text=阅读" alt="阅读">
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的小天地. 保留所有权利.</p>
    </footer>
</body>
</html>

代码解释：

<!DOCTYPE html>: 声明这是一个HTML5文档。
<html>: 整个网页的根元素。
<head>: 包含网页的元数据（比如标题、字符编码、链接到CSS文件等）。
<title>: 显示在浏览器标签页上的标题。
<link rel="stylesheet" href="style.css">: 非常重要的一行，它告诉浏览器去加载同目录下的 style.css 文件,并应用其中的样式。
<body>: 网页所有可见内容都放在这里。
<header>, <main>, <section>, <footer>: 这些是HTML5的语义化标签，它们让代码结构更清晰,易于理解。
<h1>, <h2>: 标题标签。
<p>: 段落标签。
<img>: 图片标签。src 属性指定图片地址，我们这里用了一个占位图服务。alt 属性是图片的替代文本，当图片无法显示时会显示它,也有助于搜索引擎理解图片内容。
©: 一个HTML实体，代表版权符号 ©。

第三步：添加CSS样式 (`style.css`)

CSS (Cascading Style Sheets) 用来美化HTML页面，它可以为元素设置颜色、字体、间距、布局等。

打开 style.css 文件,将下面的代码复制进去：

（图片来源网络，侵删）

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    border-bottom: 5px solid #e74c3c;
}
header h1 {
    margin: 0;
}
区域样式 */
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 介绍部分样式 */
.intro {
    padding: 1rem;
    border-bottom: 1px solid #eee;
}
/* 图片画廊样式 */
.gallery h2 {
    text-align: center;
    margin-top: 0;
}
.image-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    padding: 1rem;
}
.image-container img {
    width: 150px;
    height: 150px;
    object-fit: cover; /* 保证图片填充区域且不变形 */
    border-radius: 8px;
    margin: 5px;
    transition: transform 0.3s ease; /* 添加一个简单的悬停动画 */
}
.image-container img:hover {
    transform: scale(1.05); /* 鼠标悬停时图片放大 */
}
/* 页脚样式 */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background: #333;
    color: #fff;
}

CSS代码解释：

body { ... }: 设置整个页面的默认字体、行高、外边距、背景色和文字颜色。
header { ... }: 设置头部的背景色、文字颜色、内边距和底部的边框。
main { ... }: 设置主要内容区域的宽度（最大800px）、外边距（使其居中）、内边距、背景色、圆角和阴影,使其看起来像一个卡片。
.image-container { ... }:
- display: flex;: 将图片容器变成一个弹性盒子。
- justify-content: space-around;: 让图片在容器中均匀分布。
- flex-wrap: wrap;: 当空间不足时,允许图片换行。
.image-container img { ... }:
- width 和 height: 统一图片尺寸。
- object-fit: cover;: 确保图片能填满整个150x150的区域,并且不会拉伸变形。
- transition: transform 0.3s ease;: 为 transform 属性添加一个0.3秒的平滑过渡效果。
.image-container img:hover { ... }: 当鼠标悬停在图片上时，transform: scale(1.05) 会让图片放大到105%,产生一个简单的交互效果。

第四步：在浏览器中查看网页

你的两个文件都已经准备好了。

找到 my-website 文件夹。
双击 index.html 文件。

它应该会在你的默认浏览器中打开,你就能看到我们制作的简单网页了！

进阶小技巧：如何调试？

如果网页看起来不正确,可以：

检查文件名和路径：确保 index.html 和 style.css 在同一个文件夹里，并且CSS文件中的 href="style.css" 路径是正确的。
使用浏览器开发者工具：
- 在浏览器中，按 F12 键（或右键点击页面，选择“检查”）打开开发者工具。
- 点击 “Elements” (元素) 标签，你可以在这里看到HTML结构，并且可以直接修改CSS样式来实时预览效果,非常方便调试。
- 如果看到样式被划掉，说明有CSS优先级问题；如果看到资源加载失败（比如图片或CSS文件路径旁边有个红叉）,说明路径错误。

这个例子涵盖了HTML和CSS最基础和核心的用法，希望能帮助你入门！你可以尝试修改颜色、字体、间距等，看看网页会发生什么变化,这是学习CSS的最好方式。

HTML和CSS如何制作简单网页代码？

最终效果预览

第一步：创建基本文件结构

第二步：编写HTML内容 (index.html)

第三步：添加CSS样式 (style.css)

第四步：在浏览器中查看网页

进阶小技巧：如何调试？

第二步：编写HTML内容 (`index.html`)

第三步：添加CSS样式 (`style.css`)