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