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

news2024/11/18 17:48:28

目录

成品:

任务描述

源码：

详细讲解：

1.导航栏部分

2.主页样式部分

3.关于我部分

4.作品集部分

5.联系我部分

6.页脚部分

成品:

任务描述

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

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

源码：

<!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>

(1).重点掌握：footer的使用；text-decoration: underline;的使用；

完 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2066059.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数字人直播软件开发技术有哪些？一文教你摸透行情！

数字人直播软件开发技术有哪些？一文教你摸透行情！

当前&#xff0c;开发数字人直播软件已经成为数字人赛道的重要入局方式&#xff0c;与之相关的数字人直播软件开发技术有哪些等话题的讨论的更是随着时间的推移不断攀升。毕竟&#xff0c;对于创业者而言&#xff0c;不管是打算自行开发&#xff0c;还是选择寻求数字人源码厂商…
阅读更多...
微积分-定积分4.5（换元法则）

微积分-定积分4.5（换元法则）

由于基本定理&#xff08;Fundamental Theorem of Calculus&#xff09;的缘故&#xff0c;能够找到反导函数&#xff08;即反微分&#xff09;是非常重要的。但我们现有的反导函数公式并没有告诉我们如何计算类似以下形式的积分&#xff1a; ( 1 ) ∫ 2 x 1 x 2 d x (1) \qua…
阅读更多...
神经网络算法 - 一文搞懂BERT（基于Transformer的双向编码器）

神经网络算法 - 一文搞懂BERT（基于Transformer的双向编码器）

本文将从BERT的本质、BERT的原理、BERT的应用三个方面&#xff0c;带您一文搞懂Bidirectional Encoder Representations from Transformers | BERT。 Google BERT BERT架构&#xff1a; 一种基于多层Transformer编码器的预训练语言模型&#xff0c;通过结合Tokenization、多种E…
阅读更多...
贪心算法-最大容量问题

贪心算法-最大容量问题

最大容量问题的贪心解法 目录 最大容量问题的贪心解法问题描述问题分析贪心策略代码实现&#xff08;C&#xff09;总结C学习资源 问题描述 给定一个数组ht&#xff0c;其中的每个元素代表一个垂直隔板的高度。我们可以通过任意两个隔板以及它们之间的空间来组成一个容器。容器…
阅读更多...
PostgreSQL16.1（Linux版本离线下载）

PostgreSQL16.1（Linux版本离线下载）

1、将数据库压缩包和对应的依赖包上传到对应的目录下。 2、解压数据库文件。 3、解压libicu依赖文件，有两个看对应的版本能装上去即可。 4、进入解压数据库文件的该目录后执行此命令： ./configure --prefix=/usr/local/pgsql 5、输入“make && make install”命令，…
阅读更多...
SQL-DCL-数据控制语言

SQL-DCL-数据控制语言

一、 DCL-管理用户 二、DCL-权限控制 一、 DCL-管理用户,主要是DBA数据库管理员使用&#xff0c;开发使用较少 # 1、查询用户 use mysql; show tables; desc user; select * from user; # host为主机地址, 主机地址和用户名确定唯一性# 2、创建用户 create user itcastlocalh…
阅读更多...
有哪些好用的文献翻译器推荐？中英文文献翻译软件一览

有哪些好用的文献翻译器推荐？中英文文献翻译软件一览

在平时的生活中&#xff0c;我常常需要阅读一些中英文的文献资料。面对那些生涩难懂的专业术语和复杂的句式结构&#xff0c;我时常感到头疼。 幸运的是&#xff0c;有了中英文文献翻译软件&#xff0c;我的阅读之旅变得轻松了许多。这些软件就像是我的语言助手&#xff0c;帮…
阅读更多...
＜数据集＞航拍牧场奶牛识别数据集＜目标检测＞

＜数据集＞航拍牧场奶牛识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1805张 标注数量(xml文件个数)&#xff1a;1805 标注数量(txt文件个数)&#xff1a;1805 标注类别数&#xff1a;1 标注类别名称&#xff1a;[cow] 序号类别名称图片数框数1cow1805141337 使用标注工具&#xff…
阅读更多...
黑神话悟空无法登录服务器怎么办

黑神话悟空无法登录服务器怎么办

黑神话悟空游戏在登录的时候会遇到无法登录服务器的问题&#xff0c;玩家可以采用一些有效的方法进行解决&#xff0c;其中最主要的措施就是优化网络环境和减少网络干扰。Rak小编为您整理黑神话悟空无法登录服务器如何解决的步骤及注意事项。 优化网络环境 1、当游戏无法登录服…
阅读更多...
Android Compose 下拉选择框 ExposedDropdownMenu下拉选择

Android Compose 下拉选择框 ExposedDropdownMenu下拉选择

/*** author 创建人&#xff1a;蒙石瑞* date 创建时间&#xff1a;2024/8/23 10:57* Description 创建内容&#xff1a;下拉选择框*/ OptIn(ExperimentalMaterial3Api::class) Composable fun CustomExposedDropdownMenu(options: List<out DropdownMenuDes>,l…
阅读更多...
LLM大模型GPT4o

LLM大模型GPT4o

看图&#xff01; 看图&#xff01; 预训练与微调是现代深度学习模型&#xff0c;特别是自然语言处理模型&#xff0c;常用的两个阶段。 预训练&#xff1a; 在这个阶段&#xff0c;模型在大量的广泛文本数据上进行训练&#xff0c;学习语言的基本结构、语法、词汇和上下文关…
阅读更多...
解决使用uniapp时，uni.switchTab跳转标签页面不刷新的问题

解决使用uniapp时，uni.switchTab跳转标签页面不刷新的问题

我们在使用uni.switchTab跳转到标签页面时&#xff0c;并不会触发这个标签页面的onLoad方法。这是因为在 uni-app中&#xff0c;uni.switchTab用于跳转到指定的标签&#xff08;tab&#xff09;页面。由于标签页面是单实例的&#xff0c;即无论何时切换到该标签页面&#xff0c…
阅读更多...
Java二十三种设计模式-解释器模式（23/23）

Java二十三种设计模式-解释器模式（23/23）

本文深入探讨了解释器模式&#xff0c;这是一种行为设计模式&#xff0c;用于构建和解释执行自定义语言&#xff0c;提供了实现方法、优点、缺点、与其他模式的比较、最佳实践和替代方案的全面分析&#xff0c;帮助开发者在实际应用中做出明智的设计选择。 解释器模式&#xff…
阅读更多...
uniapp（微信小程序如何使用单选框、复选框）

uniapp（微信小程序如何使用单选框、复选框）

一、先看效果 二、数据结构 说明&#xff1a;selected用来记录每次用户选择的值&#xff0c;当是单选的时候属性中的selected属性需要设置成字符串&#xff0c;当是复选框的时候&#xff0c;此时选择的是数组&#xff0c;selected属性应设置为数组。type用来区分当前是单选还是…
阅读更多...
《爬虫+大模型》到底有没有搞头？

《爬虫+大模型》到底有没有搞头？

最近在学习大模型&#xff0c;之前我是干过一段时间爬虫&#xff0c;在学习大模型的过程中&#xff0c;突发奇想能不能把大模型的能力结合爬虫&#xff0c;搞个AI爬虫玩一玩。 说干就干&#xff0c;先测试一下大模型的数据提取能力 <table width"100%" class&qu…
阅读更多...
增强管道数据流转(EPDR)技术的设计局限和替代

增强管道数据流转(EPDR)技术的设计局限和替代

在前文中&#xff0c;我们介绍了EPDR技术的起源&#xff0c;以及使用该技术驱动的业余软件无线电平台专栏。已有玩家通过踩坑证明&#xff0c;进程管道交换数据时间延迟大&#xff0c;构造时间敏感系统难。除非采用传统的紧耦合设计及更大的颗粒度&#xff0c;否则很难在期望的…
阅读更多...
云计算实训34——docker环境配置、镜像基本操作、容器基本操作、设置远程连接管理

云计算实训34——docker环境配置、镜像基本操作、容器基本操作、设置远程连接管理

一、配置docker环境 写入模块 [rootdocker ~]# cat << EOF | tee /etc/modules-load.d/k8s.conf > overlay > br_netfilter > EOF 加载模块 #内核模块 [rootdocker ~]# modprobe overlay #桥接模块 [rootdocker ~]# modprobe br_netfilter #查看所添加的模…
阅读更多...
物联网安装调试员：振兴杯全国青年职业技能大赛背后的人才培养

物联网安装调试员：振兴杯全国青年职业技能大赛背后的人才培养

一、物联网安装调试员职业概述 1.1 职业定义 物联网安装调试员是信息时代下新兴的职业之一&#xff0c;他们利用先进的检测仪器和专用工具&#xff0c;负责物联网产品的安装、配置和调试工作。这项工作的核心是确保物联网设备能够高效、稳定地运行&#xff0c;实现数据的互联…
阅读更多...
【精选】基于数据可视化的智慧社区内网平台

【精选】基于数据可视化的智慧社区内网平台

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
简单的jar包重打包Failed to get nested archive for entry 报错处理

简单的jar包重打包Failed to get nested archive for entry 报错处理

简单的jar包重打包Failed to get nested archive for entry 报错处理 1. 需求 公司有一个后端项目&#xff0c;项目已经打好了jar包&#xff0c;现在我们发现jar包依赖的子包有问题&#xff0c;其中的一个mybatis xml文件查询数据不正确&#xff0c;我们需要替换项目&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023