示例 1：最简单的个人简介页面

这是一个非常基础的静态页面，包含标题、段落、图片和链接,适合作为学习HTML和CSS的起点。

最终效果预览图

这是一个该代码在浏览器中显示的效果：

代码截图

下面是完整的HTML代码截图,您可以复制使用：

代码解释

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 设置字符编码，防止中文乱码 -->
    <meta charset="UTF-8">
    <!-- 网页标题，显示在浏览器标签页上 -->我的个人简介</title>
    <!-- 内联CSS样式，用于美化页面 -->
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif; /* 设置字体 */
            background-color: #f0f2f5; /* 浅灰色背景 */
            color: #333; /* 深灰色文字 */
            line-height: 1.6; /* 增加行高，提高可读性 */
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px; /* 内容区域最大宽度 */
            margin: 40px auto; /* 上下40px外边距，左右自动（居中） */
            background-color: #ffffff; /* 白色背景 */
            padding: 30px;
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
        }
        h1 {
            color: #2c3e50; /* 标题颜色 */
        }
        p {
            text-align: justify; /* 两端对齐 */
        }
        a {
            color: #3498db; /* 链接颜色 */
            text-decoration: none; /* 去掉下划线 */
        }
        a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>你好，我是张三</h1>
        <p>我是一名热爱前端开发的程序员，这个页面是我用HTML和CSS创建的第一个简单网页。</p>
        <p>我喜欢学习新技术，并且享受将创意变为现实的过程，除了编程，我还喜欢摄影和旅行。</p>
        <p>如果你想了解更多关于我的信息，可以访问我的 <a href="https://github.com" target="_blank">GitHub</a> 主页。</p>
    </div>
</body>
</html>

示例 2：带导航栏和响应式的产品展示页

这个例子稍微复杂一些，包含了顶部导航栏、产品卡片网格，并使用了媒体查询来实现简单的响应式设计（在手机上会变成单列布局）。

最终效果预览图

桌面端效果：

手机端效果（响应式）：

代码截图

HTML代码：

CSS代码：

代码解释

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计viewport -->产品展示</title>
    <style>
        /* --- 全局样式 --- */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* --- 导航栏样式 --- */
        nav {
            background-color: #333;
            overflow: hidden; /* 清除浮动 */
        }
        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        /* --- 产品卡片网格 --- */
        .products-grid {
            display: grid; /* 使用CSS Grid布局 */
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动列数，每列最小250px */
            gap: 20px; /* 卡片间距 */
            margin-top: 20px;
        }
        .product-card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            text-align: center;
            transition: transform 0.2s; /* 添加过渡效果 */
        }
        .product-card:hover {
            transform: translateY(-5px); /* 鼠标悬停时上移 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .product-card img {
            max-width: 100%;
            height: auto;
        }
        .product-card h3 {
            margin: 10px 0;
        }
        .product-card p {
            color: #777;
        }
        /* --- 响应式设计：当屏幕宽度小于600px时 --- */
        @media (max-width: 600px) {
            nav a {
                float: none; /* 取消浮动 */
                display: block; /* 每个链接占一行 */
                text-align: left;
            }
            .products-grid {
                grid-template-columns: 1fr; /* 强制单列布局 */
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <a href="#home">首页</a>
        <a href="#products">产品</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系方式</a>
    </nav>
    <div class="container">
        <h1>我们的精选产品</h1>
        <div class="products-grid">
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="产品1">
                <h3>智能手表</h3>
                <p>集健康监测、消息通知于一体的智能穿戴设备。</p>
            </div>
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="产品2">
                <h3>无线耳机</h3>
                <p>高品质音效，长续航，舒适佩戴体验。</p>
            </div>
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="产品3">
                <h3>便携充电宝</h3>
                <p>大容量，快充技术，是您出行的最佳伴侣。</p>
            </div>
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="产品4">
                <h3>蓝牙音箱</h3>
                <p>360度环绕立体声，防水设计，适合户外使用。</p>
            </div>
        </div>
    </div>
</body>
</html>

如何使用这些代码？

  1. 创建文件：在您的电脑上创建一个新的文件夹，my-website。
  2. 保存代码：在文件夹中创建两个文件，一个命名为 index.html，另一个命名为 style.css。
  3. 复制粘贴：将上面示例中的HTML代码完整地复制并粘贴到 index.html 文件中，将CSS代码复制并粘贴到 style.css 文件中。
  4. 链接CSS：在 index.html 文件的 <head> 标签内，添加下面这行代码，以将HTML页面和CSS样式表连接起来：
    <link rel="stylesheet" href="style.css">
  5. 打开网页：保存所有文件后，用浏览器（如Chrome, Firefox, Edge）打开 index.html 文件,您就能看到设计好的网页了。

希望这些截图和解释对您有帮助！从简单的例子开始，逐步增加复杂度,是学习网页设计的最佳路径。