html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简介</title>
<link href="个人简介.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="left">
<h1 class="left-in" style="text-align: center"><a><span style="color: green">个人简介：</span></a></h1>
<div class="section">
<h2>个人信息</h2>
<ul>
<li>姓名：张三</li>
<li>性别：男</li>
<li>年龄：28岁</li>
<li>联系电话：123-4567-8901</li>
<li>电子邮箱：zhangsan@example.com</li>
</ul>
</div>
<div class="section">
<h2>教育背景</h2>
<ul>
<li>2015-2019年：XX大学，计算机科学与技术专业，本科</li>
</ul>
</div>
<div class="section">
<h2>工作经历</h2>
<ul>
<li>2019-至今：XX公司，软件工程师</li>
<li>负责后端开发，参与多个项目的开发与维护</li>
<li>熟练掌握Java、Python等编程语言</li>
</ul>
</div>
<div class="section">
<h2>技能与证书</h2>
<ul>
<li>熟练掌握Java、Python、C++等编程语言</li>
<li>熟悉Web开发技术，如HTML、CSS、JavaScript,JQuery,AJax</li>
<li>热爱后端</li>
</ul>
</div>
<div class="section">
<h2>兴趣爱好</h2>
<ul>
<li>喜欢阅读，尤其喜欢科技、历史类书籍</li>
<li>热爱运动，经常参加跑步、游泳等体育活动</li>
</ul>
</div>
</div>
<div class="right">
<div class="right-nav">
<h3 class="left-in" style="text-align: center"><a><span style="color: green">导航栏</span></a></h3>
<!--写几个超链接-->
<a href="myLog" target="_blank">日志</a>
<a href="#" target="_blank">照片</a>
<a href="#" target="_blank">博客</a>
<a href="#" target="_blank">贴吧</a>
<a href="#" target="_blank">项目</a>
</div>
<div class="myPhoto">
<img src="../img/哪吒.jpg">
</div>
<div class="myInterview">
<h4 class="left-in" style="text-align: center"><a><span style="color: green">项目简介</span></a></h4>
<div class="right-top">
<h4 class="left-in" style="text-align: left"><a><span style="color: green">项目一:云面试</span></a></h4>
<p>
</p>
</div>
<hr>
<div class="right-bottom">
<h4 class="left-in" style="text-align: left"><a><span style="color: green">项目二:考试作弊系统</span></a></h4>
</div>
</div>
</div>
</div>
<
</body>
</html>
css代码
.body{
text-align: center;
}
.box{
background-image: url("../img/background.jpg");
/*border: 1px solid red;*/
}
.left{
/*padding:10px;*/
float: left;
width: 600px;
height: 900px;
}
.right{
margin-left: 600px;
/*border: 1px solid orangered;*/
height: 900px;
}
.nav{
height:40px;
/*border: 1px solid red;*/
}
.myPhoto{
position: relative;
left: 25%;
/*border: 1px solid red;*/
margin-top: 10px;
height: 290px;
width: 290px;
}
.myInterview{
text-align: center;
/*border: 10px solid orange;*/
}
.section {
margin-bottom: 30px;
}
.section {
margin-bottom: 30px;
}
.section h2 {
font-size: 18px;
color: #555;
}
.section ul {
list-style-type: none;
padding: 0;
}
.section li {
margin-bottom: 10px;
}
.section a {
color: #007bff;
text-decoration: none;
}
.section a:hover {
text-decoration: underline;
}
a{
text-decoration: none;
color: rgb(100,98,98);
margin-right: 15%;
}
a:hover{
color: orangered;
}
.right-nav a{
}
.right-top{
padding: 10px;
margin-top: 10px;
height: 200px;
}
背景图片
