页面设计任务个人网站页面

Mike!

于 2024-08-23 12:09:09 发布

阅读量371

点赞数 13

分类专栏： html初阶文章标签： css css3 html5 html 前端框架

本文链接：https://blog.csdn.net/2301_80122797/article/details/141461869

版权

html初阶专栏收录该内容

3 篇文章 0 订阅

订阅专栏

成品:

任务描述

创建一个个人网站，包含以下部分：

顶部导航栏：包含多个链接（如：主页、关于我、技能、作品集、联系我）。导航栏在滚动页面时应该固定在顶部。
主页部分：显示个人简介，包括背景图片、姓名和简短的介绍文本。
关于我部分：详细展示个人信息，如教育背景、工作经历等。
技能部分：用进度条展示不同技能的掌握程度。进度条应该使用动画效果逐渐填充。
作品集部分：展示多个项目，每个项目都有一个图片、标题和简短的描述。使用CSS Grid布局来排列项目。
联系我部分：包含一个联系表单，表单字段包括姓名、电子邮件、消息文本框。表单需要进行简单的客户端验证（例如，检查电子邮件格式）。
页脚：包含社交媒体链接。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <style>
        /* 通用样式 */
        body {
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        /* 导航栏样式 */
        header {
            background-color: #1a1a1a;
            color: #fff;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        header ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        header ul li {
            margin: 0 15px;
        }

        header ul li a {
            color: #fff;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
        }

        header ul li a:hover {
            background-color: #555;
        }

        /* 主页样式 */
        .hero-section {
            background-image: url('./pic.jpg');
            background-size: cover;
            background-position: center;
            /* 100vh 意味着元素的高度将等于当前视口的 100%，即它会占据整个视口的高度。 */
            height: 100vh;
            display: flex;
            /* 使子元素（水平方向上的对齐）居中 */
            justify-content: center;
            /* 使子元素（垂直方向上的对齐）居中*/
            align-items: center;
            color: #fff;
             /* 备用背景色 */
            background-color: #333;
        }

        .hero-section .introduce {
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            padding: 20px;
        }

        /* 关于我 */
        .about-section {
            padding: 50px;
            background-color: #fff;
            text-align: center;
        }

        .skills {
            width: 30%;
            margin: 0 auto;
            padding-top: 1%;
            padding-bottom: 1%;
        }

        .skill-bar {
            background-color: #e7e7e7;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .skill-level {
            background-color: rgb(46, 184, 46);
            border-radius: 5px;
            text-align: center;
            color: #fff;
        }

        /* 作品集 */
        .portfolio {
            padding: 50px;
            background-color: #fff;
            text-align: center;
        }

        .portfolio-grid {
            display: flex;
            /* 间距 */
            gap: 10px;
            /* 它表示将子元素在主轴方向居中对齐。 */
            justify-content: center;
        }

        .portfolio-item {
            width: 45%;
            background-color: #f4f4f4;
            box-shadow: 3px 4px 4px #b3b3b3;
            transition: transform 0.5s, background-color 0.5s;
        }

        .portfolio-item:hover {
            transform: scale(1.05);
            background-color: #f9f9f9;
        }

        .portfolio-item h3 {
            text-align: center;
            font-weight: bold;
        }

        /* 联系我 */
        .contact {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px;
        }

        .contact input, .contact textarea {
            width: 300px;
            margin: 5px 0;
            padding: 10px;
        }

        .contact button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            border: none;
            /* 将鼠标变为点击 */
            cursor: pointer;
        }

        .contact button:hover {
            background-color: #555;
        }

        /* 页脚 */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            margin-top: 10px;
        }

        footer .social-media a {
            color: #fff;
            margin: 0 10px;
            text-decoration: none;
        }

        footer .social-media a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<header>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#portfolio">作品集</a></li>
        <li><a href="#contact">联系我</a></li>
    </ul>
</header>

<section id="home" class="hero-section">
    <div class="introduce">
        <h1>欢迎来到我的个人网站</h1>
        <p>我是Mike，一位在科技界与公益领域的爱好者。</p>
    </div>
</section>

<section id="about" class="about-section">
    <h2>关于我</h2>
    <p>这是我的教育背景和个人信息。</p>
</section>

<section id="skills" class="about-section">
    <h2>技能</h2>
    <div class="skills">
        <p>Java</p>
        <div class="skill-bar"><div style="width: 80%" class="skill-level">80%</div></div>
        <p>C++</p>
        <div class="skill-bar"><div style="width: 90%" class="skill-level">90%</div></div>
        <p>HTML</p>
        <div class="skill-bar"><div style="width: 70%" class="skill-level">70%</div></div>
    </div>
</section>

<section id="portfolio" class="portfolio">
    <h2>作品集</h2>
    <div class="portfolio-grid">
        <div class="portfolio-item">
            <h3>项目1</h3>
            <p>计算器：这是一款能够加减乘除的计算器。</p>
        </div>
        <div class="portfolio-item">
            <h3>项目2</h3>
            <p>个人社保计算器：这是一款计算个人社保的工具。</p>
        </div>
    </div>
</section>

<section id="contact" class="contact">
    <h2>联系我</h2>
    <label for="name">姓名</label>
    <input type="text" id="name">
    <label for="email">电子邮件</label>
    <input type="email" id="email">
    <label for="message">消息</label>
    <textarea id="message"></textarea>
    <button type="submit">发送</button>
</section>

<footer>
    <p>© 2024 个人网站. 保留所有权利.</p>
    <div class="social-media">
        <a href="#">微博</a>
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
    </div>
</footer>

</body>
</html>

详细讲解：

1.导航栏部分

/* 导航栏样式 */
header {
    background-color: #1a1a1a;
    color: #fff;
    /* 固定导航栏一直显示 */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

header ul {
    /* 除去无需表的装饰 */
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* 居中显示 */
    justify-content: center;
}

header ul li {
    margin: 0 15px;
}

header ul li a {
    color: #fff;
    /*去除下划线 */
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

header ul li a:hover {
    background-color: #555;
}

<header>
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#portfolio">作品集</a></li>
        <li><a href="#contact">联系我</a></li>
    </ul>
</header>

(1).重点要掌握position: fixed;的使用

2.主页样式部分

/* css主页样式 */
.hero-section {
    background-image: url('./pic.jpg');
    background-size: cover;
    background-position: center;
    /* 100vh 意味着元素的高度将等于当前视口的 100%，即它会占据整个视口的高度。 */
    height: 100vh;
    display: flex;
    /* 使子元素（水平方向上的对齐）居中 */
    justify-content: center;
    /* 使子元素（垂直方向上的对齐）居中*/
    align-items: center;
    color: #fff;
        /* 备用背景色 */
    background-color: #333;
}

.hero-section .introduce {
    text-align: center;
    /* 半透明效果 */
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}

<section id="home" class="hero-section">
    <div class="introduce">
        <h1>欢迎来到我的个人网站</h1>
        <p>我是Mike，一位在科技界与公益领域的爱好者。</p>
    </div>
</section>

(1).重点掌握 height: 100vh; background: rgba(0, 0, 0, 0.5);的用法。

3.关于我部分

/* css关于我 */
.about-section {
    padding: 50px;
    background-color: #fff;
    text-align: center;
}

.skills {
    width: 30%;
    /* 居中 */
    margin: 0 auto;
    padding-top: 1%;
    padding-bottom: 1%;
}

.skill-bar {
    background-color: #e7e7e7;
    border-radius: 5px;
    margin-bottom: 10px;
}

.skill-level {
    /* 设置进度调颜色 */
    background-color: rgb(46, 184, 46);
    border-radius: 5px;
    /* 文本居中 */
    text-align: center;
    color: #fff;
}

<section id="about" class="about-section">
    <h2>关于我</h2>
    <p>这是我的教育背景和个人信息。</p>
</section>

<section id="skills" class="about-section">
    <h2>技能</h2>
    <div class="skills">
        <p>Java</p>
        <div class="skill-bar"><div style="width: 80%" class="skill-level">80%</div></div>
        <p>C++</p>
        <div class="skill-bar"><div style="width: 90%" class="skill-level">90%</div></div>
        <p>HTML</p>
        <div class="skill-bar"><div style="width: 70%" class="skill-level">70%</div></div>
    </div>
</section>

(1).重点要掌握进度条的构建。

4.作品集部分

/* 作品集 */
.portfolio {
    padding: 50px;
    background-color: #fff;
    text-align: center;
}

.portfolio-grid {
    display: flex;
    /* 左右两部分的间距 */
    gap: 10px;
    /* 表示将子元素在主轴方向居中对齐。 */
    justify-content: center;
}

.portfolio-item {
    width: 45%;
    background-color: #f4f4f4;
    /* 阴影效果 */
    box-shadow: 3px 4px 4px #b3b3b3;
    /* 渐变 */
    transition: transform 0.5s, background-color 0.5s;
}

.portfolio-item:hover {
    /* 放大程度 */
    transform: scale(1.05);
    background-color: #f9f9f9;
}

.portfolio-item h3 {
    text-align: center;
    font-weight: bold;
}

<section id="portfolio" class="portfolio">
    <h2>作品集</h2>
    <div class="portfolio-grid">
        <div class="portfolio-item">
            <h3>项目1</h3>
            <p>计算器：这是一款能够加减乘除的计算器。</p>
        </div>
        <div class="portfolio-item">
            <h3>项目2</h3>
            <p>个人社保计算器：这是一款计算个人社保的工具。</p>
        </div>
    </div>
</section>

(1).重点要掌握 display: flex;的使用，并列显示；transition和transform的使用。

5.联系我部分

/* 联系我 */
.contact {
    /* 特定格式显示 */
    display: flex;
    /* 以竖着显示 */
    flex-direction: column;
    /* 使子元素（垂直方向上的对齐）居中*/
    align-items: center;
    padding: 50px;
}

.contact input, .contact textarea {
    width: 300px;
    margin: 5px 0;
    padding: 10px;
}

.contact button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    /* 将鼠标变为点击 */
    cursor: pointer;
}

.contact button:hover {
    background-color: #555;
}

<section id="contact" class="contact">
    <h2>联系我</h2>
    <label for="name">姓名</label>
    <input type="text" id="name">
    <label for="email">电子邮件</label>
    <input type="email" id="email">
    <label for="message">消息</label>
    <textarea id="message"></textarea>
    <button type="submit">发送</button>
</section>

(1)重点要掌握：输入框的生成，文本区域的生成；display: flex;和flex-direction: column;的搭配使用；cursor: pointer;将鼠标变为点击的使用；

6.页脚部分

/* css页脚 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 10px;
}

footer .social-media a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
}

footer .social-media a:hover {
    /* 当鼠标悬浮到时，显示下划线 */
    text-decoration: underline;
}

<footer>
    <p>© 2024 个人网站. 保留所有权利.</p>
    <div class="social-media">
        <a href="#">微博</a>
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
    </div>
</footer>