页面设计任务 个人网站页面
目录
成品:
任务描述
源码：
详细讲解：
1.导航栏部分
2.主页样式部分
3.关于我部分
4.作品集部分
5.联系我部分
6.页脚部分
成品:
任务描述
创建一个个人网站，包含以下部分：
- 顶部导航栏：包含多个链接（如：主页、关于我、技能、作品集、联系我）。导航栏在滚动页面时应该固定在顶部。
- 主页部分：显示个人简介，包括背景图片、姓名和简短的介绍文本。
- 关于我部分：详细展示个人信息，如教育背景、工作经历等。
- 技能部分：用进度条展示不同技能的掌握程度。进度条应该使用动画效果逐渐填充。
- 作品集部分：展示多个项目，每个项目都有一个图片、标题和简短的描述。使用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>(1).重点掌握：footer的使用；text-decoration: underline;的使用；
完