<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简介</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #282c34;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header h1 {
margin: 0;
text-align: center;
padding: 0;
}
main {
padding: 20px;
background: white;
margin-top: 20px;
}
footer {
text-align: center;
padding: 10px;
background: #282c34;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>我的个人简介</h1>
</div>
</header>
<main>
<div class="container">
<section>
<h2>个人信息</h2>
<p>姓名：张三</p>
<p>年龄：28岁</p>
<p>职业：软件工程师</p>
<p>联系方式：zhangsan@example.com</p>
</section>
<section>
<h2>个人简介</h2>
<p>我是一名热爱编程的软件工程师，专注于Web开发和数据结构算法。在业余时间我喜欢阅读技术书籍、写博客以及参加开源项目。</p>
</section>
<section>
<h2>技能</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>数据库管理 (MySQL, PostgreSQL)</li>
</ul>
</section>
</div>
</main>
<footer>
<p>© 2023 张三的个人网站</p>
</footer>
</body>
</html>HTML结构：
<!DOCTYPE html> 声明文档类型为HTML5。<html lang="zh-CN"> 设置网页语言为简体中文。<head> 包含元数据（如字符集、视口设置）、页面标题和样式定义。<body> 包含页面的主要内容，分为头部 (<header>)、主体 (<main>) 和页脚 (<footer>)。CSS样式：
.container）来控制特定部分的样式。内容区域：
header 区域包含页面标题 "我的个人简介"。main 区域分为多个 section，每个 section 包含不同类别的信息（如个人信息、个人简介、技能）。footer 区域包含版权信息。响应式设计：
meta viewport 标签确保页面在移动设备上能够正确显示。希望这段代码对你有帮助！
上一篇：html新窗口打开超链接
下一篇：垂直居中html
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站