首页 > 代码库 > 个人名片的网页
个人名片的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>个人简介</title>
<link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">
<style>
.content{
width: 90%;
height: 800px;
/**/
}
.information{
float: left;
}
.personal{
float: right;
}
.information div:nth-child(1){
width: 60px;
height: 40px;
color: blue;
font-size: xx-large;
}
.btnleft{
/*float: left;*/
margin-top: 60px;
width: 400px;
height: 320px;
background-color: #dd4916;
}
.btnleft:hover{
border:1px solid grey;
}
.text1{
/*border-style: none;*/
margin-top: 20px;
border: 1px solid grey;
text-align: center;
width: 90%;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="container content">
<div>
<div class="top">
<div class="information">
<div>Terry Jee</div>
<div><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>前端工程师&&UI设计师</div>
</div>
<div class="personal">
<div><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>7652389718@qq.com</div>
<div><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>15463748346</div>
<div><span class="glyphicon glyphicon-search" aria-hidden="true"></span>成都市两河场抚顺街</div>
<img src="http://www.mamicode.com/img/logo.png" alt="加载失败"/>
</div>
</div>
<div class="btnleft">
<div class="">
<br/><br/><br/>
<div>个人技能</div>
<div>HTML/CSS/Javascript</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div>Java/J2EE</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div>MYSQL</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>
<div>Photoshop/UI</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70%
</div>
</div>
</div>
</div>
<div class="btnright"></div>
<div class="text1 container">焦点距离
.基本上是从镜头到胶片上所形成的清晰影像距离。
.焦点越大，所形成的影像越大焦点距离
.基本上是从镜头到胶片上所形成的清晰影像距离。
.焦点越大，所形成的影像越大焦点距离
.基本上是从镜头到胶片上所形成的清晰影像距离。
.焦点越大，所形成的影像越大焦点距离
.基本上是从镜头到胶片上所形成的清晰影像距离。
.焦点越大，所形成的影像越大</div>
</div>
</div>
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
</body>
</html>
个人名片的网页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。