HTML/CSS如何制作出好看的个人网页代码？-网页设计-锦华智联科技

现代设计：采用流行的卡片式布局和柔和的配色方案。
响应式布局：在电脑、平板和手机上都能完美显示。
平滑滚动：点击导航栏链接，页面会平滑滚动到对应部分，而不是生硬地跳转。
动画效果：滚动时，各个部分会有淡入和上移的动画，让页面更生动。
功能完整：包含了个人介绍、技能、项目、联系方式等所有核心模块。
易于修改：代码结构清晰，并附有详细的注释，方便你替换成自己的信息。

最终效果预览

如何使用

创建文件：在你的电脑上创建一个文件夹，然后在文件夹里创建三个文件：index.html、style.css 和 script.js。
复制代码：将下面提供的代码分别粘贴到对应的文件中。
个性化修改：打开 index.html 和 style.css，找到所有标记为 [你的名字]、[你的简介] 等占位符的地方，替换成你自己的信息。
添加图片：在 assets/images 文件夹中放入你的 profile.jpg（头像）和各个项目的图片（project1.jpg, project2.jpg 等）。
打开网页：用浏览器打开 index.html 文件，即可看到你的个人网页。

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>
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="header">
        <a href="#" class="logo">[你的名字]</a>
        <nav class="navbar">
            <a href="#home" class="active">首页</a>
            <a href="#about">lt;/a>
            <a href="#skills">技能</a>
            <a href="#projects">项目</a>
            <a href="#contact">联系</a>
            <span class="active-nav"></span> <!-- 用于指示当前激活的导航项 -->
        </nav>
    </header>
    <main>
        <!-- 首页部分 -->
        <section id="home" class="home">
            <div class="home-content">
                <h1>你好，我是 <span class="name">[你的名字]</span></h1>
                <h3 class="text-animation">我是一名 <span>[你的职业，如：前端开发工程师]</span></h3>
                <p class="detail">[一句话描述你的热情和目标，我热爱创造美观且用户友好的网页应用，]</p>
                <div class="btn-box">
                    <a href="#contact" class="btn">联系我</a>
                    <a href="#projects" class="btn btn-white">查看项目</a>
                </div>
            </div>
            <div class="home-img">
                <img src="assets/images/profile.jpg" alt="[你的名字]的头像">
            </div>
        </section>
        <!-- 关于我部分 -->
        <section id="about" class="about">
            <h2 class="heading"><span>我</span></h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>全栈开发工程师 & UI/UX 设计爱好者</h3>
                    <p>[在这里写一段详细的自我介绍，比如你的工作经验、教育背景、你对技术的热情以及你的职业目标，]</p>
                    <p>我拥有 [X] 年的 Web 开发经验，精通 HTML, CSS, JavaScript 以及主流的前端框架，我注重代码质量和用户体验，致力于构建高性能、可访问性强的网络应用。</p>
                    <a href="#" class="btn">了解更多</a>
                </div>
                <div class="about-img">
                    <img src="assets/images/profile.jpg" alt="[你的名字]的照片">
                </div>
            </div>
        </section>
        <!-- 技能部分 -->
        <section id="skills" class="skills">
            <h2 class="heading">我的 <span>技能</span></h2>
            <div class="skills-content">
                <div class="skills-box">
                    <i class="fas fa-code"></i>
                    <h3>前端开发</h3>
                    <p>HTML5, CSS3, JavaScript, React, Vue.js, TypeScript</p>
                </div>
                <div class="skills-box">
                    <i class="fas fa-server"></i>
                    <h3>后端开发</h3>
                    <p>Node.js, Express, Python, Django, RESTful API</p>
                </div>
                <div class="skills-box">
                    <i class="fas fa-database"></i>
                    <h3>数据库</h3>
                    <p>MySQL, MongoDB, PostgreSQL</p>
                </div>
                <div class="skills-box">
                    <i class="fas fa-paint-brush"></i>
                    <h3>UI/UX 设计</h3>
                    <p>Figma, Adobe XD, Sketch, 响应式设计</p>
                </div>
            </div>
        </section>
        <!-- 项目部分 -->
        <section id="projects" class="projects">
            <h2 class="heading">我的 <span>项目</span></h2>
            <div class="projects-content">
                <div class="projects-box">
                    <div class="img-box">
                        <img src="assets/images/project1.jpg" alt="项目1截图">
                    </div>
                    <div class="text-box">
                        <h3>项目名称 1</h3>
                        <p>[简要描述这个项目是做什么的，使用了什么技术，解决了什么问题，]</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="projects-box">
                    <div class="img-box">
                        <img src="assets/images/project2.jpg" alt="项目2截图">
                    </div>
                    <div class="text-box">
                        <h3>项目名称 2</h3>
                        <p>[简要描述这个项目是做什么的，使用了什么技术，解决了什么问题，]</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="projects-box">
                    <div class="img-box">
                        <img src="assets/images/project3.jpg" alt="项目3截图">
                    </div>
                    <div class="text-box">
                        <h3>项目名称 3</h3>
                        <p>[简要描述这个项目是做什么的，使用了什么技术，解决了什么问题，]</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系我部分 -->
        <section id="contact" class="contact">
            <h2 class="heading">联系 <span>我</span></h2>
            <div class="contact-content">
                <div class="contact-text">
                    <h3>让我们一起聊聊吧！</h3>
                    <p>如果你对我的工作感兴趣，或者有任何问题，欢迎随时通过以下方式联系我。</p>
                    <div class="contact-info">
                        <a href="mailto:your.email@example.com" class="info-card">
                            <i class="fas fa-envelope"></i>
                            <h4>邮箱</h4>
                            <p>your.email@example.com</p>
                        </a>
                        <a href="tel:+1234567890" class="info-card">
                            <i class="fas fa-phone"></i>
                            <h4>电话</h4>
                            <p>+123 456 7890</p>
                        </a>
                        <a href="https://github.com/yourusername" target="_blank" class="info-card">
                            <i class="fab fa-github"></i>
                            <h4>GitHub</h4>
                            <p>github.com/yourusername</p>
                        </a>
                        <a href="https://linkedin.com/in/yourusername" target="_blank" class="info-card">
                            <i class="fab fa-linkedin"></i>
                            <h4>LinkedIn</h4>
                            <p>linkedin.com/in/yourusername</p>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2025 [你的名字]. All Rights Reserved.</p>
    </footer>
    <!-- 引入脚本文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (`style.css`)

这是网页的样式,定义了颜色、布局、字体和动画。

/* --- 全局样式和变量 --- */
:root {
    --bg-color: #0f0f1e;
    --second-bg-color: #1a1a2e;
    --text-color: #ffffff;
    --main-color: #3498db;
    --hover-color: #2980b9;
    --font-family: 'Arial', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}
/* --- 导航栏 --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    background: rgba(15, 15, 30, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: all 0.3s ease;
}
.header.sticky {
    padding: 15px 10%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.logo {
    font-size: 25px;
    font-weight: bold;
    color: var(--text-color);
}
.navbar a {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    margin-left: 35px;
    transition: 0.3s;
    position: relative;
}
.navbar a:hover,
.navbar a.active {
    color: var(--main-color);
}
.active-nav {
    position: absolute;
    bottom: -5px;
    height: 3px;
    width: 0;
    background: var(--main-color);
    transition: 0.3s ease;
    border-radius: 2px;
}
/* --- 主内容区 --- */
main {
    padding: 0 10%;
    margin-top: 80px;
}
/* --- 首页部分 --- */
.home {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.home-content {
    flex: 1;
}
.home-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.name {
    color: var(--main-color);
}
.text-animation {
    font-size: 2rem;
    margin: 1rem 0;
}
.text-animation span {
    color: var(--main-color);
}
.home-content .detail {
    font-size: 1.1rem;
    color: #b8b8d1;
    margin-bottom: 2rem;
}
.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--main-color);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: 2px solid var(--main-color);
    transition: 0.3s ease;
}
.btn:hover {
    background: transparent;
    color: var(--main-color);
}
.btn-white {
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--text-color);
}
.btn-white:hover {
    background: var(--text-color);
    color: var(--bg-color);
}
.home-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-img img {
    width: 100%;
    max-width: 450px;
    border-radius: 50%;
    border: 8px solid var(--main-color);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
}
/* --- 关于我部分 --- */
.about {
    padding: 100px 0;
}
.heading {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
.heading span {
    color: var(--main-color);
}
.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}
.about-text h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.about-text p {
    color: #b8b8d1;
    margin-bottom: 1rem;
}
.about-img {
    flex: 1;
    display: flex;
    justify-content: center;
}
.about-img img {
    width: 100%;
    max-width: 350px;
    border-radius: 15px;
    border: 5px solid var(--main-color);
}
/* --- 技能部分 --- */
.skills {
    padding: 100px 0;
    background: var(--second-bg-color);
}
.skills-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}
.skills-box {
    background: var(--bg-color);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s ease;
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}
.skills-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.skills-box i {
    font-size: 3rem;
    color: var(--main-color);
    margin-bottom: 1rem;
}
.skills-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.skills-box p {
    color: #b8b8d1;
}
/* --- 项目部分 --- */
.projects {
    padding: 100px 0;
}
.projects-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}
.projects-box {
    background: var(--second-bg-color);
    border-radius: 15px;
    overflow: hidden;
    max-width: 350px;
    transition: 0.3s ease;
}
.projects-box:hover {
    transform: scale(1.02);
}
.img-box {
    overflow: hidden;
}
.img-box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.3s ease;
}
.projects-box:hover .img-box img {
    transform: scale(1.1);
}
.text-box {
    padding: 1.5rem;
}
.text-box h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.text-box p {
    color: #b8b8d1;
    margin-bottom: 1rem;
}
/* --- 联系我部分 --- */
.contact {
    padding: 100px 0;
}
.contact-text h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.contact-text p {
    color: #b8b8d1;
    margin-bottom: 2rem;
}
.contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.info-card {
    background: var(--second-bg-color);
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    flex: 1;
    min-width: 200px;
    transition: 0.3s ease;
    text-decoration: none;
    color: var(--text-color);
}
.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.info-card i {
    font-size: 2.5rem;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}
.info-card h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.info-card p {
    color: #b8b8d1;
    font-size: 0.9rem;
}
/* --- 页脚 --- */
.footer {
    text-align: center;
    padding: 2rem 0;
    background: var(--second-bg-color);
    font-size: 1rem;
    color: #b8b8d1;
}
/* --- 响应式设计 --- */
@media (max-width: 992px) {
    .home {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .header {
        padding: 15px 5%;
    }
    main {
        padding: 0 5%;
    }
    .home-content h1 {
        font-size: 3rem;
    }
    .text-animation {
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    .navbar a {
        font-size: 16px;
        margin-left: 20px;
    }
    .heading {
        font-size: 2.5rem;
    }
    .home-content h1 {
        font-size: 2.5rem;
    }
}

JavaScript 代码 (`script.js`)

这是网页的交互逻辑,实现导航栏高亮和滚动效果。

// 获取导航栏和所有导航链接
const header = document.querySelector('.header');
const navbarLinks = document.querySelectorAll('.navbar a');
const sections = document.querySelectorAll('section');
// 滚动事件监听
window.addEventListener('scroll', () => {
    // 导航栏滚动效果
    if (window.scrollY > 50) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
    // 活动导航链接高亮
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (scrollY >= (sectionTop - 200)) {
            current = section.getAttribute('id');
        }
    });
    navbarLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href').slice(1) === current) {
            link.classList.add('active');
        }
    });
    // 动态移动激活指示器
    const activeLink = document.querySelector('.navbar a.active');
    if (activeLink) {
        const activeNav = document.querySelector('.active-nav');
        activeNav.style.width = `${activeLink.offsetWidth}px`;
        activeNav.style.left = `${activeLink.offsetLeft}px`;
    }
});
// 页面加载时初始化激活指示器
window.addEventListener('load', () => {
    const activeLink = document.querySelector('.navbar a.active');
    if (activeLink) {
        const activeNav = document.querySelector('.active-nav');
        activeNav.style.width = `${activeLink.offsetWidth}px`;
        activeNav.style.left = `${activeLink.offsetLeft}px`;
    }
});

进一步的优化建议

图片优化：将你的图片压缩，以提高页面加载速度。
添加更多动画：可以使用 AOS (Animate On Scroll) 库来为元素添加更丰富的滚动动画。
添加简历下载：在“关于我”或“联系我”部分添加一个下载简历的按钮，链接到你的 PDF 文件。
添加表单：在“联系我”部分添加一个联系表单，方便访客直接给你发消息（这需要后端支持）。
个人博客：如果你有写博客的习惯，可以添加一个“博客”部分，链接到你的博客网站。

希望这个详细的示例能帮助你制作出属于你自己的、漂亮的个人网页！

（图片来源网络，侵删）

HTML/CSS如何制作出好看的个人网页代码？

最终效果预览

如何使用

HTML 代码 (index.html)

CSS 代码 (style.css)

JavaScript 代码 (script.js)

进一步的优化建议

HTML 代码 (`index.html`)

CSS 代码 (`style.css`)

JavaScript 代码 (`script.js`)