HTML+CSS做网页的完整代码有哪些？-网页设计-锦华智联科技

我们将创建一个名为“我的个人作品集”的单页网站,它将包含以下部分：

（图片来源网络，侵删）

导航栏: 固定在顶部,方便用户跳转到不同部分。
主页横幅: 包含欢迎语、个人简介和一张占位图片。
关于我: 详细介绍自己的文字内容。
我的技能: 使用进度条展示各项技能的掌握程度。
我的项目: 展示3个项目卡片，每个卡片有图片、标题和描述。
联系方式: 一个包含联系信息和一个简单表单的页脚。

文件结构

为了保持代码的整洁,我们将使用两个文件：

index.html: 网页的结构和内容。
style.css: 网页的样式和布局。

您需要创建一个文件夹,然后在其中创建这两个文件。

第1步: HTML 代码 (`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">
    <!-- 引入Google Fonts字体 (可选，让字体更好看) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <a href="#" class="logo">我的作品集</a>
        <nav>
            <a href="#home">首页</a>
            <a href="#about">关于我</a>
            <a href="#skills">技能</a>
            <a href="#projects">项目</a>
            <a href="#contact">联系</a>
        </nav>
    </header>
    <main>
        <!-- 主页横幅 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>你好，我是 <span class="highlight">张三</span></h1>
                <p>一名充满热情的前端开发工程师</p>
                <a href="#about" class="cta-button">了解更多</a>
            </div>
            <div class="hero-image">
                <img src="https://via.placeholder.com/600x400.png?text=我的照片" alt="个人照片">
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="about">
            <h2>关于我</h2>
            <p>
                我是一名专注于创造美观、高效、用户友好网站的开发者，我热爱学习新技术，并致力于将复杂的问题转化为简单、优雅的解决方案，拥有5年的行业经验，我精通HTML、CSS和JavaScript，并对现代框架如React和Vue有深入的了解，我相信，好的设计不仅仅是关于外观，更是关于功能和用户体验的完美结合。
            </p>
        </section>
        <!-- 我的技能 -->
        <section id="skills" class="skills">
            <h2>我的技能</h2>
            <div class="skill-item">
                <span>HTML & CSS</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 95%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span>JavaScript</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 85%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span>React</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 80%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span>UI/UX 设计</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 75%;"></div>
                </div>
            </div>
        </section>
        <!-- 我的项目 -->
        <section id="projects" class="projects">
            <h2>我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="https://via.placeholder.com/400x250.png?text=项目1" alt="项目1截图">
                    <h3>电商平台</h3>
                    <p>一个功能齐全的响应式电商平台，包含商品展示、购物车和支付流程。</p>
                </div>
                <div class="project-card">
                    <img src="https://via.placeholder.com/400x250.png?text=项目2" alt="项目2截图">
                    <h3>任务管理应用</h3>
                    <p>一个基于React的现代化任务管理工具，支持拖拽排序和实时同步。</p>
                </div>
                <div class="project-card">
                    <img src="https://via.placeholder.com/400x250.png?text=项目3" alt="项目3截图">
                    <h3>个人博客</h3>
                    <p>使用静态生成器构建的个人博客，加载速度快，SEO友好。</p>
                </div>
            </div>
        </section>
    </main>
    <!-- 联系方式 -->
    <footer id="contact" class="contact">
        <h2>联系我</h2>
        <p>如果你想了解更多或有合作意向，欢迎通过以下方式联系我。</p>
        <div class="contact-info">
            <p>📧 邮箱: your.email@example.com</p>
            <p>📱 电话: +86 123 4567 8900</p>
        </div>
        <p class="copyright">&copy; 2025 我的作品集. 保留所有权利.</p>
    </footer>
</body>
</html>

第2步: CSS 代码 (`style.css`)

这是网页的“外衣”，它负责美化HTML元素，设置颜色、字体、间距、布局等。

（图片来源网络，侵删）

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007BFF;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-color: #f4f4f4;
    --white-color: #ffffff;
    --font-family: 'Poppins', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; /* 平滑滚动 */
}
body {
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--light-color);
    color: var(--text-color);
}
h1, h2, h3 {
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; text-align: center; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; }
a {
    text-decoration: none;
    color: var(--primary-color);
}
p {
    margin-bottom: 1rem;
}
section {
    padding: 4rem 2rem;
    max-width: 1100px;
    margin: auto;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* --- 导航栏 --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    z-index: 1000;
}
.navbar .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}
.navbar nav a {
    color: var(--text-color);
    margin-left: 1.5rem;
    font-weight: 600;
    transition: color 0.3s ease;
}
.navbar nav a:hover {
    color: var(--primary-color);
}
/* --- 主页横幅 --- */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rem 5% 4rem;
    min-height: 90vh;
}
.hero-content {
    flex: 1;
    padding-right: 2rem;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-content .highlight {
    color: var(--primary-color);
}
.cta-button {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    margin-top: 1.5rem;
    transition: background 0.3s ease;
}
.cta-button:hover {
    background: #0056b3;
}
.hero-image {
    flex: 1;
    text-align: center;
}
.hero-image img {
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* --- 关于我 --- */
.about {
    text-align: center;
    background: var(--white-color);
}
.about p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}
/* --- 我的技能 --- */
.skills {
    background: var(--white-color);
}
.skill-item {
    margin-bottom: 1.5rem;
}
.skill-item span {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.skill-bar {
    background: #e0e0e0;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.skill-level {
    height: 100%;
    background: var(--primary-color);
    border-radius: 5px;
    width: 0; /* 初始宽度为0，用于动画 */
    animation: fillBar 2s ease-out forwards; /* 添加动画 */
}
@keyframes fillBar {
    from { width: 0; }
    to { width: var(--width); } /* 注意：这里我们通过内联样式设置--width */
}
/* --- 我的项目 --- */
.projects {
    text-align: center;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.project-card {
    background: var(--white-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.project-card-content {
    padding: 1.5rem;
}
.project-card h3 {
    margin-bottom: 0.5rem;
}
/* --- 联系方式 --- */
.contact {
    background: var(--secondary-color);
    color: var(--white-color);
    text-align: center;
}
.contact h2, .contact p {
    color: var(--white-color);
}
.contact-info p {
    margin: 0.5rem 0;
}
.copyright {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #ccc;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }
    .navbar nav {
        margin-top: 1rem;
    }
    .navbar nav a {
        margin: 0 1rem;
    }
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 6rem; /* 为固定导航栏留出空间 */
    }
    .hero-content {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

第3步: 如何运行这个网页

非常简单,只需要两个步骤：

创建文件:
- 在您的电脑上创建一个新的文件夹，my-portfolio。
- 在该文件夹中，创建一个名为 index.html 的文件，并将上面的 HTML 代码完整地复制粘贴进去。
- 在同一个 my-portfolio 文件夹中，再创建一个名为 style.css 的文件，并将上面的 CSS 代码完整地复制粘贴进去。
在浏览器中打开:
- 打开您喜欢的网页浏览器（如 Chrome, Firefox, Edge 等）。
- 直接将 index.html 文件从您的文件夹中拖拽到浏览器窗口里，或者右键点击 index.html 文件，选择“用 Chrome 打开”（或其他浏览器）。

您应该就能看到一个完整、美观的个人作品集网页了！

（图片来源网络，侵删）

代码解释和可以改进的地方

HTML 结构: 我们使用了语义化的标签，如 <header>, <main>, <section>, <footer>，这不仅让代码更易读,也有利于搜索引擎优化。
CSS 变量: 在 root 选择器中定义了颜色变量，这样如果以后想更换主题色,只需要修改一个地方即可。
Flexbox 和 Grid: hero 部分使用 Flexbox 进行布局，projects 部分使用 Grid 来创建灵活的响应式卡片网格。
响应式设计: 通过 @media 查询，我们为小屏幕设备（如手机）提供了不同的布局,确保在所有设备上都有良好的显示效果。
动画和交互: 添加了平滑滚动、悬停效果和技能条加载动画,让网页更生动。

可以进一步改进的方向:

添加JavaScript: 可以用JavaScript来实现更复杂的交互，比如一个移动端的汉堡菜单,或者一个真正的联系表单提交功能。
使用图片占位符: 我使用了 via.placeholder.com,您可以换成自己的真实图片。
部署: 将这个文件夹上传到 GitHub Pages、Netlify 或 Vercel 等免费托管服务上,就可以让其他人通过网址访问您的网站了。

HTML+CSS做网页的完整代码有哪些？

文件结构

第1步: HTML 代码 (index.html)

第2步: CSS 代码 (style.css)

第3步: 如何运行这个网页

代码解释和可以改进的地方

第1步: HTML 代码 (`index.html`)

第2步: CSS 代码 (`style.css`)