写一个界面美观的个人简介网站,html格式要求,有介绍的模块和合适的颜色背景
时间: 2023-05-24 10:01:24 浏览: 107
博主推荐HTML制作一个美观的个人简介网页(附源码)
5星 · 资源好评率100%
为你提供 HTML 美观个人简介网站的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人简介</title>
<style>
body {
background-color: lightgrey;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
padding: 10px;
margin: 0;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
img {
float: left;
margin: 10px;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
ul {
list-style-type: none;
padding: 0;
margin: 10px 0;
display: flex;
justify-content: space-around;
align-items: center;
background-color: lightblue;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
li {
margin: 10px;
font-size: 18px;
color: navy;
}
</style>
</head>
<body>
<h1>个人简介</h1>
<img src="your-image.jpg" alt="your photo" width="200">
<p>你的名字: John Doe</p>
<br>
<p>你的职业: Web 开发</p>
<br>
<p>你的经历: 有 5 年 Web 开发经验,熟悉 HTML、CSS、JavaScript 等前端技术,擅长响应式设计和浏览器兼容性问题解决。</p>
<br>
<ul>
<li><a href="https://github.com/your-username">Github</a></li>
<li><a href="https://linkedin.com/in/your-username">LinkedIn</a></li>
<li><a href="https://twitter.com/your-username">Twitter</a></li>
<li><a href="https://your-blog.com">Blog</a></li>
</ul>
</body>
</html>
这是一个简洁美观的个人简介网站,使用了 HTML 和 CSS 来实现。你可以根据自己的需要添加或删除模块来适应你的网站需求。颜色背景选用了浅灰色和浅蓝色,看起来很清爽和舒适。
阅读全文