用HTML写一个个人展示页面
时间: 2024-06-12 13:06:01 浏览: 111
boutme:一个小页面来表达自己关于喜欢和一般事物的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人展示页面</title>
<style>
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin-top: 0;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
section article {
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
margin: 10px;
padding: 20px;
width: 300px;
}
section article h2 {
margin-top: 0;
}
section article p {
margin-bottom: 0;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>个人展示页面</h1>
</header>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
<section>
<article>
<h2 id="about">关于我</h2>
<p>我是一名年轻的前端开发工程师,热爱学习新技术,喜欢挑战自己。我拥有扎实的HTML、CSS和JavaScript基础,并且熟练使用Vue.js和React.js等主流前端框架。</p>
</article>
<article>
<h2 id="skills">技能</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript/jQuery</li>
<li>Vue.js/React.js</li>
<li>Bootstrap/Materialize</li>
<li>Git/GitHub</li>
<li>Photoshop/Illustrator</li>
</ul>
</article>
<article>
<h2 id="projects">项目</h2>
<ul>
<li><a href="#">在线购物商城</a></li>
<li><a href="#">个人博客</a></li>
<li><a href="#">在线问答社区</a></li>
<li><a href="#">个人简历模板</a></li>
</ul>
</article>
<article>
<h2 id="contact">联系我</h2>
<p>邮箱:example@gmail.com</p>
<p>电话:+86 123456789</p>
<p>微信:example</p>
</article>
</section>
<footer>
<p>© 2021 个人展示页面</p>
</footer>
</body>
</html>
阅读全文