div css页面网页设计实例-网页设计-锦华智联科技

创建一个简洁的个人作品集页面

我们将创建一个包含以下部分的页面：

（图片来源网络，侵删）

导航栏：固定在顶部，包含网站 Logo 和导航链接。
英雄区域：页面顶部的欢迎横幅，包含大标题和简介。
关于我：一段关于自己的文字介绍。
我的作品：一个作品集展示区，使用卡片布局。
页脚：包含版权信息和社交媒体链接。

第一步：HTML 结构 (`index.html`)

我们用 HTML 搭建页面的骨架，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">
    <!-- 引入一个流行的图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 1. 导航栏 -->
    <header class="main-header">
        <div class="container">
            <a href="#" class="logo">MyPortfolio</a>
            <nav class="main-nav">
                <a href="#home">首页</a>
                <a href="#about">关于我</a>
                <a href="#works">我的作品</a>
                <a href="#contact">联系我</a>
            </nav>
        </div>
    </header>
    <main>
        <!-- 2. 英雄区域 -->
        <section id="home" class="hero">
            <div class="container">
                <h1>你好，我是 <span class="highlight">张三</span></h1>
                <p>一名充满热情的前端开发 & UI/UX 设计师</p>
                <a href="#works" class="cta-button">查看我的作品</a>
            </div>
        </section>
        <!-- 3. 关于我 -->
        <section id="about" class="about">
            <div class="container">
                <h2>关于我</h2>
                <p>
                    我是一名专注于创建优雅、高效且用户友好的数字产品的开发者，我热爱将复杂的问题转化为简单、直观的设计。
                    拥有 5 年的行业经验，我精通 HTML, CSS, JavaScript 和现代前端框架，我相信好的设计不仅要美观，更要能解决实际问题。
                </p>
            </div>
        </section>
        <!-- 4. 我的作品 -->
        <section id="works" class="works">
            <div class="container">
                <h2>我的作品</h2>
                <div class="works-grid">
                    <!-- 作品卡片 1 -->
                    <div class="work-card">
                        <img src="https://via.placeholder.com/400x300.png?text=项目+1" alt="项目1截图">
                        <div class="work-info">
                            <h3>电商平台重设计</h3>
                            <p>一个全新的购物体验，提升了 30% 的用户转化率。</p>
                            <a href="#" class="link-button">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <!-- 作品卡片 2 -->
                    <div class="work-card">
                        <img src="https://picsum.photos/seed/project2/400/300.jpg" alt="项目2截图">
                        <div class="work-info">
                            <h3>移动端健身 App</h3>
                            <p>为健身爱好者打造的个性化训练和饮食追踪应用。</p>
                            <a href="#" class="link-button">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <!-- 作品卡片 3 -->
                    <div class="work-card">
                        <img src="https://picsum.photos/seed/project3/400/300.jpg" alt="项目3截图">
                        <div class="work-info">
                            <h3>企业官网后台</h3>
                            <p>一个功能强大、易于管理的内容管理系统。</p>
                            <a href="#" class="link-button">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 5. 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 张三的个人作品集. All Rights Reserved.</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </div>
        </div>
    </footer>
</body>
</html>

HTML 结构解析：

<!DOCTYPE html>：声明文档类型。
<head>：包含页面的元数据，如标题、字符编码、引入的 CSS 文件等。
<body>：页面的可见内容。
<header>：语义化标签，代表页面或区域的头部。
<nav>：语义化标签，代表导航链接区域。
<main>：语义化标签，代表页面的主要内容。
<section>：语义化标签，代表页面中的一个独立区域。
<footer>：语义化标签，代表页面或区域的底部。
<div class="container">：一个常用的布局容器，用于居中内容和限制最大宽度。
class="..."：CSS 类选择器，用于将样式应用到特定的元素上。

第二步：CSS 样式 (`style.css`)

我们用 CSS 来美化这个 HTML 结构，让它看起来像一个真正的网页。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-color: #f8f9fa;
    --gray-color: #6c757d;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
}
h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--secondary-color);
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
/* --- 导航栏 --- */
.main-header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed; /* 固定定位 */
    width: 100%;
    top: 0;
    z-index: 1000; /* 确保在最上层 */
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}
.main-nav a {
    color: var(--secondary-color);
    margin-left: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}
.main-nav a:hover {
    color: var(--primary-color);
}
/* --- 英雄区域 --- */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
    color: #fff;
    height: 100vh; /* 视口高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero .highlight {
    color: var(--primary-color);
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
/* --- 按钮样式 --- */
.cta-button, .link-button {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
}
.cta-button:hover, .link-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
}
.link-button {
    margin-top: 1rem;
}
/* --- 关于我 --- */
.about {
    padding: 80px 0;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.about p {
    font-size: 1.1rem;
    color: var(--gray-color);
}
/* --- 我的作品 --- */
.works {
    padding: 80px 0;
    background: var(--light-color);
}
/* 使用 Flexbox 布局作品卡片 */
.works-grid {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 水平居中 */
    gap: 30px; /* 卡片之间的间距 */
}
.work-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden; /* 让图片圆角生效 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.work-card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 保持图片比例并填充区域 */
}
.work-info {
    padding: 20px;
}
.work-info h3 {
    margin-bottom: 0.5rem;
}
/* --- 页脚 --- */
.main-footer {
    background: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}
.social-links a {
    color: #fff;
    margin: 0 10px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--primary-color);
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        padding: 1rem;
    }
    .main-nav a {
        margin: 0 10px;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .works-grid {
        flex-direction: column; /* 在小屏幕上垂直排列 */
        align-items: center;
    }
    .work-card {
        width: 100%;
        max-width: 400px;
    }
}

CSS 样式解析：

（图片来源网络，侵删）

CSS 变量 (root)：定义了颜色、宽度等变量，方便全局统一修改和维护。
盒模型 (box-sizing: border-box)：确保 padding 和 border 不会增加元素的总宽度，这是现代布局的标准。
Flexbox 布局：
- .main-header .container：使用 display: flex 和 justify-content: space-between 实现导航栏左右两端对齐。
- .hero：使用 display: flex、justify-content: center 和 align-items: center 实现内容的完美居中。
- .works-grid：使用 display: flex、flex-wrap: wrap 和 gap 创建一个灵活的、可换行的卡片网格。
固定定位 (position: fixed)：让导航栏始终停留在页面顶部。
伪类 (hover)：为链接和按钮添加了悬停效果，提升交互体验。
响应式设计 (@media 查询)：
- 当屏幕宽度小于 768px 时（如平板或手机），应用新的样式规则。
- 导航栏会变为垂直布局。
- 作品卡片网格会从水平排列变为垂直排列,以适应更窄的屏幕。

最终效果

将上述 index.html 和 style.css 两个文件保存在同一个文件夹中，用浏览器打开 index.html，你就能看到一个结构清晰、样式美观、并且在手机上也能良好显示的个人作品集页面了。

这个实例涵盖了网页设计的核心要素：

HTML 语义化结构
CSS 布局技术
响应式设计原则
交互效果
可维护性

你可以基于这个实例进行扩展,比如添加 JavaScript 实现更复杂的交互，或者使用 CSS 动画让页面更生动。

（图片来源网络，侵删）

div css页面网页设计实例

创建一个简洁的个人作品集页面

第一步：HTML 结构 (index.html)

第二步：CSS 样式 (style.css)

最终效果

第一步：HTML 结构 (`index.html`)

第二步：CSS 样式 (`style.css`)