如何使用HTML和CSS创建包含指定板块的简洁作品集网站布局

Hey there! Let's break down how to build a clean, structured portfolio website with HTML and CSS—exactly the sections you mentioned (header, about, portfolio, contact). I'll walk you through the core structure and share a complete, tweakable example you can adapt to your projects and style.

核心思路 #

First, we'll use semantic HTML tags (like <header>, <section>, <footer>) to make the structure clear for both browsers and future you. For layout, Flexbox and CSS Grid will be our go-to tools—they're simple to use and handle responsiveness smoothly without extra frameworks.

完整示例代码 #

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header with Navigation -->
    <header class="header">
        <div class="container">
            <h1 class="logo">My Portfolio</h1>
            <nav class="nav">
                <a href="#about">About</a>
                <a href="#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2>About Me</h2>
            <div class="about-content">
                <p>I'm a passionate developer focused on building clean, user-friendly projects. Here's a bit about my skills and background...</p>
                <!-- Add a profile image if you want -->
                <!-- <img src="profile.jpg" alt="Profile Photo" class="profile-img"> -->
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio">
        <div class="container">
            <h2>My Projects</h2>
            <div class="portfolio-grid">
                <!-- Project Card 1 -->
                <div class="project-card">
                    <img src="project1.jpg" alt="Project 1">
                    <h3>Project Title 1</h3>
                    <p>A short description of what this project does and the tech used.</p>
                </div>
                <!-- Project Card 2 -->
                <div class="project-card">
                    <img src="project2.jpg" alt="Project 2">
                    <h3>Project Title 2</h3>
                    <p>A short description of what this project does and the tech used.</p>
                </div>
                <!-- Add more project cards as needed -->
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>Get In Touch</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit">Send Message</button>
            </form>
            <!-- Or add contact info if you don't want a form -->
            <!-- <div class="contact-info">
                <p>Email: your@email.com</p>
                <p>LinkedIn: @yourprofile</p>
            </div> -->
        </div>
    </section>

    <!-- Footer (optional) -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 My Portfolio. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

CSS 样式 (styles.css)

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav a {
    color: white;
    text-decoration: none;
    margin-left: 2rem;
}

.nav a:hover {
    color: #3498db;
}

/* Section Styles */
section {
    padding: 4rem 0;
}

section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #2c3e50;
}

/* About Section */
.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card h3, .project-card p {
    padding: 1rem;
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.contact-form button {
    display: block;
    width: 100%;
    padding: 1rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
}

.contact-form button:hover {
    background: #2980b9;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

关键说明 #

• 语义化HTML: <header>、<section>这类标签让你的网站更易访问，也更便于后续维护。
• 粘性导航栏: position: sticky属性能让导航在用户滚动时始终保持可见，提升浏览体验。
• 响应式网格: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))会根据屏幕尺寸自动调整项目卡片的数量，适配手机、平板等不同设备。
• ** hover交互**: 项目卡片的轻微上浮效果，不用花里胡哨就能让网站显得更精致。

你可以根据自己的喜好调整配色、字体，添加更多项目或细节。这个结构灵活通用，非常适合搭建简洁专业的作品集网站！

备注：内容来源于stack exchange，提问作者clipping-path-studio