1. 导航栏
  2. 英雄区域
  3. 关于我
  4. 我的技能
  5. 项目展示
  6. 页脚

您只需复制下面的所有代码，将其保存为一个 .html 文件（index.html）,然后用浏览器打开即可看到效果。

制作html和css网页设计代码
（图片来源网络，侵删）

最终效果预览

这是一个静态图片,展示了我们将要创建的网页布局。

完整代码 (HTML + CSS)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人作品集</title>
    <style>
        /* --- 全局样式和变量 --- */
        :root {
            --primary-color: #007BFF;
            --secondary-color: #343a40;
            --text-color: #333;
            --light-bg: #f8f9fa;
            --white: #ffffff;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-family);
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--white);
        }
        h1, h2, h3 {
            font-weight: 600;
            margin-bottom: 1rem;
        }
        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; text-align: center; margin-bottom: 2rem; }
        h3 { font-size: 1.3rem; }
        a {
            text-decoration: none;
            color: var(--primary-color);
        }
        ul {
            list-style: none;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .section {
            padding: 4rem 0;
        }
        .section:nth-child(even) {
            background-color: var(--light-bg);
        }
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--white);
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        /* --- 导航栏 --- */
        .navbar {
            background: var(--secondary-color);
            color: var(--white);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        .navbar ul {
            display: flex;
        }
        .navbar ul li {
            margin-left: 1.5rem;
        }
        .navbar a {
            color: var(--white);
        }
        /* --- 英雄区域 --- */
        #hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1557682257-2f9c37a3a5f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
            color: var(--white);
            height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
        }
        #hero .hero-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        #hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        #hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        /* --- 关于我 --- */
        #about .about-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 2rem;
            align-items: center;
        }
        .about-img {
            border-radius: 10px;
            overflow: hidden;
        }
        .about-img img {
            width: 100%;
            height: auto;
            display: block;
        }
        /* --- 技能 --- */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            text-align: center;
        }
        .skill-card {
            background: var(--white);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .skill-card:hover {
            transform: translateY(-10px);
        }
        .skill-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        /* --- 项目 --- */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        .project-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .project-card:hover {
            transform: translateY(-10px);
        }
        .project-img {
            height: 200px;
            overflow: hidden;
        }
        .project-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .project-card:hover .project-img img {
            transform: scale(1.1);
        }
        .project-info {
            padding: 1.5rem;
        }
        .project-info h3 {
            margin-bottom: 0.5rem;
        }
        /* --- 页脚 --- */
        footer {
            background: var(--secondary-color);
            color: var(--white);
            text-align: center;
            padding: 2rem 0;
        }
        footer .social-links a {
            color: var(--white);
            margin: 0 0.5rem;
            font-size: 1.5rem;
        }
        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            .navbar .container {
                flex-direction: column;
                text-align: center;
            }
            .navbar ul {
                margin-top: 1rem;
            }
            .navbar ul li {
                margin: 0 0.5rem;
            }
            #hero h1 {
                font-size: 2.5rem;
            }
            .about-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">我的Logo</a>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>
    <!-- 英雄区域 -->
    <section id="hero">
        <div class="hero-content">
            <h1>你好，我是张三</h1>
            <p>一名充满激情的前端开发工程师，专注于创造美观且功能强大的网页应用。</p>
            <a href="#projects" class="btn">查看我的作品</a>
        </div>
    </section>
    <!-- 关于我 -->
    <section id="about" class="section">
        <div class="container">
            <h2>关于我</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="张三的照片">
                </div>
                <div class="about-text">
                    <p>我是一名拥有5年经验的前端开发工程师，毕业于XX大学计算机科学专业，我热爱编程，享受将复杂问题转化为简洁、优雅的解决方案的过程。</p>
                    <p>我的技术栈主要包括 HTML5, CSS3, JavaScript (ES6+), 以及 React, Vue.js 等现代前端框架，我注重代码质量和用户体验，始终致力于编写可维护、高性能的代码。</p>
                    <p>在工作之余，我喜欢阅读技术博客、参加开源项目，并探索新的前端技术。</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 我的技能 -->
    <section id="skills" class="section">
        <div class="container">
            <h2>我的技能</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <i>🎨</i>
                    <h3>UI/UX 设计</h3>
                    <p>精通 Figma, Adobe XD，能够将设计稿完美还原为网页。</p>
                </div>
                <div class="skill-card">
                    <i>💻</i>
                    <h3>前端开发</h3>
                    <p>熟练掌握 HTML5, CSS3, JavaScript, 以及响应式布局和移动端适配。</p>
                </div>
                <div class="skill-card">
                    <i>⚛️</i>
                    <h3>框架与库</h3>
                    <p>精通 React, Vue.js, Redux, Vuex 等主流前端框架和状态管理工具。</p>
                </div>
                <div class="skill-card">
                    <i>🔧</i>
                    <h3>工具与协作</h3>
                    <p>熟练使用 Git, Webpack, Vite, 以及 CI/CD 流程，熟悉敏捷开发。</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 项目展示 -->
    <section id="projects" class="section">
        <div class="container">
            <h2>我的项目</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="项目一">
                    </div>
                    <div class="project-info">
                        <h3>电商购物网站</h3>
                        <p>一个功能完整的电商网站，包含商品展示、购物车、用户登录注册、订单管理等功能。</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1557682257-2f9c37a3a5f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="项目二">
                    </div>
                    <div class="project-info">
                        <h3>任务管理应用</h3>
                        <p>一个基于 React 的任务管理应用，支持拖拽排序、任务分类、标签管理等功能。</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-img">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="项目三">
                    </div>
                    <div class="project-info">
                        <h3>企业官网</h3>
                        <p>为一家科技公司设计的响应式企业官网，展示公司产品、服务和团队介绍。</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer id="contact">
        <div class="container">
            <p>&copy; 2025 张三的个人作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="#">GitHub</a>
                <a href="#">LinkedIn</a>
                <a href="#">Twitter</a>
            </div>
        </div>
    </footer>
</body>
</html>

代码结构解析

HTML 结构

HTML (HyperText Markup Language) 定义了网页的骨架和内容。

  • <!DOCTYPE html>: 声明这是一个HTML5文档。
  • <html lang="zh-CN">: 整个HTML的根元素，lang属性帮助搜索引擎和浏览器理解页面语言。
  • <head>: 包含页面的元数据，不会直接显示在页面上。
    • <meta charset="UTF-8">: 设置字符编码为UTF-8,确保中文等特殊字符能正确显示。
    • <meta name="viewport" ...>: 至关重要！ 它告诉浏览器如何控制页面的尺寸和缩放，是实现响应式设计的关键。
    • <title>: 浏览器标签页上显示的标题。
    • <style>: 在这里我们编写CSS代码，在实际项目中，更推荐将CSS代码放在一个单独的 .css 文件中，然后用 <link> 标签引入,这样代码结构更清晰。
  • <body>: 包含所有可见的页面内容。
    • 语义化标签: 使用了 <nav>, <section>, <footer> 等语义化标签，这不仅让HTML结构更清晰，也有利于SEO（搜索引擎优化）和屏幕阅读器等辅助工具的识别。
    • id 属性: 如 id="hero", id="about"，这些ID用于CSS定位和创建页面内的锚点链接（点击导航栏可以跳转到对应部分）。
    • class 属性: 如 class="navbar", class="container"，类名用于CSS选择器,为多个元素应用相同的样式。

CSS 样式

CSS (Cascading Style Sheets) 负责网页的视觉表现，如颜色、布局、字体等。

  • 选择器:
    • 元素选择器: 如 body, h1,直接作用于HTML标签。
    • 类选择器: 如 .navbar, .container，通过 class 属性来选择元素。
    • ID选择器: 如 #hero, #about，通过 id 属性来选择元素,优先级最高。
  • 盒模型: box-sizing: border-box; 是一个非常重要的属性，它告诉浏览器元素的 width 和 height 属性应该包含 padding（内边距）和 border（边框）,这使得布局计算变得非常直观。
  • Flexbox (弹性布局):
    • 在 .navbar .container 中，display: flex; 和 justify-content: space-between; 使得Logo和导航列表能够分别靠左和靠右对齐,并且自动填充空间。
    • 在 #hero 中，align-items: center; 和 text-align: center; 使英雄区域的内容垂直和水平居中。
  • Grid (网格布局):
    • 在 .skills-grid 和 .projects-grid 中，display: grid; 创建了一个二维的布局系统。grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 是一个强大的响应式布局技巧，它会根据容器宽度自动创建列，每列宽度至少为250px，如果空间允许,则会自动增加列数。
  • 响应式设计:
    • 使用了媒体查询 @media (max-width: 768px)，当浏览器窗口宽度小于或等于768像素时,媒体查询内的CSS规则才会生效。
    • 在移动端，我们将导航栏改为垂直布局，关于我的部分也调整为单列显示,以确保在小屏幕设备上依然有良好的浏览体验。
  • 伪类: hover 用于当用户鼠标悬停在某个元素上时改变其样式，例如按钮的背景色、卡片的阴影效果等,增加了交互感。

如何使用和修改

  1. 保存文件: 将上面的所有代码复制并粘贴到一个新的文本文件中。
  2. 重命名: 将文件名从 新建文本文档.txt 改为 index.html。
  3. 打开: 用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个 index.html 文件,你就能看到网页效果。
  4. 修改:
    • 修改文字内容: 直接在HTML标签之间修改文字，<h1>你好，我是张三</h1>。
    • 修改颜色: 在CSS的 root 选择器中修改 --primary-color 等变量,可以轻松改变整个网站的配色方案。
    • 修改图片: 将 src="..." 中的图片链接替换为你自己的图片URL或本地图片路径。
    • 添加/删除部分: 你可以复制一个 <section> 标签块来创建新的页面部分，并在导航栏的 <ul> 中添加对应的链接。

这个例子为你提供了一个坚实的基础，你可以在此基础上进行扩展和美化,创建出属于你自己的独特网页。

制作html和css网页设计代码
（图片来源网络，侵删）
制作html和css网页设计代码
（图片来源网络，侵删）