HTML版简历2.0
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<title>我的简历</title>
<style type="text/css">
/*去掉超链接下划线*/
a{text-decoration:none}
a:hover{text-decoration:none}
a{color: #000;}
.webheader {
position: fixed;
width: 100%;
text-align: left;
background-color: #f1f1f1;
height: 80px;
}
.title1 {
width: 16.25%;
}
.title2 {
width: 16.25%;
padding-top: 20px;
padding-bottom: 20px;
}
#text_topmenu {
font-size: 1.2em;
color: black;
}
.topmenu {
text-align: center;
overflow: hidden;
width: 67.5%;
background-color:#000080;
}
.topmenu a {
float: left;
display:table-cell;
padding: 30px;
text-align: center;
text-decoration: none;
color: #f2f2f2;
}
.topmenu a:hover {
background-color: #ddd;
color: black;
}
.leftmenu {
position: fixed;
height: 414px;
list-style-type: none;
margin-top: 165px;
padding: 0;
width: 150px;
background-color: #32CD32;
}
.leftmenu a {
display: block;
color: #000;
padding: 30px 30px 32px 40px;
text-decoration: none;
}
.leftmenu a:hover:not(.active) {
background-color: #555;
color: white;
}
.leftmenu a.active{
background-color: #333;
color: white;
}
.pagefooter{
justify-content: center;
bottom: 0px;/*定位到底部*/
background-color: #333;
padding: 0px;
text-align: center;
box-sizing: border-box;/*防止滚轮*/
width: 100%;
height: 35px;
}
.pagefooter p{
color: white;
font-size: 0.7em;
}
</style>
<style type="text/css">
body{
margin: 0;
background-image: url(image/1.jpg);
}
</style>
<style type="text/css">
.picture {
float: left;
margin-top: 125px;
margin-left: 200px;
}
.pic-picture {
width: 200px;
height: 300px;
}
.content {
float: left;
margin-top: 125px;
margin-left: 125px;
}
.smalltitle{
background-color:#f1f1f1;
font-size: 1em;
color:black;
height:25px;
width:75px;
text-align: left;
padding-top: 3px;
border-radius: 5px;
}
.content-content {
width: 700px;
}
</style>
</head>
<header>
<div class="webheader">
<div style="float: left;padding-bottom: 20px;" class="title1">
<a href="http://www.csu.edu.cn/">
<img src="image\csu1.jpg" >
</a>
</div>
<div style="float: left;" class="title2">
<strong style="font-size: 30px;margin-left: 30px;">学生个人简历</strong>
</div>
<div style="float: left;" class="topmenu">
<a href="information.html">基本信息</a>
<a href="education.html">学历背景</a>
<a href="experience.html">项目经验</a>
<a href="award.html">获奖记录</a>
</div>
</div>
</header>
<leftpart>
<div class="left">
<div class="leftmenu">
<a class="active" href="#">信息菜单</a>
<a href="information.html">基本信息</a>
<a href="education.html">学历背景</a>
<a href="experience.html">项目经验</a>
<a href="award.html">获奖记录</a>
</div>
</div>
</leftpart>
<body>
<div class="picture">
<div class="pic-title">
</div>
<div>
<img src="image\lwx.jpg" class="pic-picture">
</div>
</div>
<div class="content">
<div class="smalltitle"><strong>基本信息</strong></div>
<div class="content-content">
<br>
</div>
<div class="smalltitle"><strong>个人简介</strong></div>
<div class="content-content">
<span>
<br>
</span>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<footer>
<div class="pagefooter">
<div class="footertext">
<p>Copyright © 1202 信息与网络中心 保留所有权利 技术支持:
<br>
最佳使用环境:操作系统 Win 7 以上、MAC OS X。浏览器:IE 10以上、Edge、Chrome 55以上、Firefox 50.0以上、Safari 9.0以上。
</p>
</div>
</div>
</footer>
</body>
</html>