色彩丰富的html自我介绍网页代码
时间: 2023-05-24 22:05:27 浏览: 222
<!DOCTYPE html>
<html>
<head>
<title>自我介绍</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333333;
margin: 0;
padding: 0;
}
header {
background-color: #333333;
color: #ffffff;
padding: 40px;
text-align: center;
}
h1 {
font-size: 36px;
margin: 0;
}
h2 {
font-size: 24px;
margin: 20px 0 10px;
}
p {
font-size: 18px;
line-height: 1.5;
margin: 10px 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
.skills {
background-color: #e6e6e6;
padding: 30px;
}
.skills h2 {
color: #333333;
margin-top: 0;
}
.skills ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.skill {
background-color: #333333;
color: #ffffff;
font-size: 14px;
padding: 10px 20px;
border-radius: 5px;
margin-top: 10px;
width: 30%;
text-align: center;
}
.skill:hover {
background-color: #ffffff;
color: #333333;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>自我介绍</h1>
<p>我是一个充满热情和创造力的人。</p>
</header>
<main>
<section>
<h2>个人资料</h2>
<ul>
<li><strong>姓名:</strong>小明</li>
<li><strong>年龄:</strong>28岁</li>
<li><strong>性别:</strong>男</li>
<li><strong>职业:</strong>前端开发工程师</li>
<li><strong>教育程度:</strong>本科</li>
<li><strong>联系方式:</strong>12345678901</li>
<li><strong>电子邮件:</strong><a href="mailto:xiaoming@example.com">xiaoming@example.com</a></li>
</ul>
</section>
<section>
<h2>个人介绍</h2>
<p>我是一名有着5年工作经验的前端开发工程师。我擅长使用HTML、CSS和JavaScript构建现代化的、响应式的网站和Web应用程序。我对新技术有着极高的兴趣,并始终保持着学习新知识的状态。</p>
<p>在过去的几年中,我曾帮助建立了大量使用React框架的Web应用程序。我也熟悉其他前端库和框架,例如Angular和Vue。我还具有良好的设计技能,能够创造出富有视觉吸引力的用户界面。</p>
</section>
<section class="skills">
<h2>技能</h2>
<ul>
<li class="skill">HTML</li>
<li class="skill">CSS</li>
<li class="skill">JavaScript</li>
<li class="skill">React</li>
<li class="skill">Angular</li>
<li class="skill">Vue</li>
<li class="skill">UI设计</li>
<li class="skill">响应式设计</li>
<li class="skill">跨浏览器兼容性</li>
</ul>
</section>
</main>
</body>
</html>