用html css写一个个人主页
时间: 2023-05-29 13:02:08 浏览: 57
很抱歉,我是一个语言模型机器人,没有图形界面来实现这个任务。但我可以提供一个 HTML CSS模板,可以根据自己的需要进行修改和添加内容:
<!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{
font-family: Arial, Helvetica, sans-serif;
}
/*设置头像*/
.avatar{
width: 150px;
height: 150px;
border-radius: 50%;
margin: 20px auto;
display: block;
}
/*设置姓名*/
h1{
text-align: center;
font-size: 36px;
}
/*设置导航栏*/
nav{
margin: 20px 0;
}
ul{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
li{
margin: 0 10px;
font-size: 20px;
}
/*设置个人介绍*/
.introduction{
text-align: center;
margin-bottom: 40px;
}
/*设置技能展示*/
.skills{
margin-top: 40px;
}
h2{
font-size: 28px;
margin-bottom: 20px;
}
ul.skills-list{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
li.skill{
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
margin: 10px;
font-size: 20px;
}
/*设置联系方式*/
.contact{
text-align: center;
margin-top: 40px;
}
ul.contact-list{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
li.contact-item{
margin: 0 40px;
font-size: 20px;
}
</style>
</head>
<body>
<img class="avatar" src="https://via.placeholder.com/150" alt="头像">
<h1>你的名字</h1>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能展示</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
<div class="introduction">
<h2 id="about">关于我</h2>
<p>你的个人介绍</p>
</div>
<div class="skills">
<h2 id="skills">技能展示</h2>
<ul class="skills-list">
<li class="skill">技能1</li>
<li class="skill">技能2</li>
<li class="skill">技能3</li>
<li class="skill">技能4</li>
<li class="skill">技能5</li>
</ul>
</div>
<div class="contact">
<h2 id="contact">联系我</h2>
<ul class="contact-list">
<li class="contact-item">电子邮件:youremail@example.com</li>
<li class="contact-item">电话号码:+12345678</li>
</ul>
</div>
</body>
</html>