Java作业 HTML制作个人简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.header{
				width: 100%;
				height: 30%;
				background-color: bisque;
				margin: 0 auto;
			}
			.header p{
				margin-left: 42%;
				font-size: 60px;
				line-height: 200px;
			}
			.body{
				width: 100%;
				height: 48.3%;
				position: relative;
			}
			.left_div{
				width: 35%;
				height: 100%;
				left: 0;
				position: absolute;
				background-color: lawngreen;
			}
			.mid_div{
				width: 30%;
				height: 100%;
				left: 35%;
				position: absolute;
				background-color: aqua;
			}
			.right_div{
				width: 35%;
				height: 100%;
				left: 65%;
				position: absolute;
				background-color: lawngreen;
			}
			.panel{
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 25px;
			}
			.footer{
				height: 21.7%;
				width: 100%;
				background-color: bisque;
			}
			.footer a{
				font-size: 35px;
				line-height: 186px;
				margin-left: 45%;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<p>个人简介</p>
		</div>
		<div class="body">
			<div class="left_div">
				
			</div>
			<div class="mid_div">
				<div class="panel panel-primary">姓名：李凯</div>
				<div class="panel panel-primary">年龄：22</div>
				<div class="panel panel-primary">性别：男</div>
				<div class="panel panel-primary">家庭住址：四川省眉山市仁寿县</div>
				<div class="panel panel-primary">就读院校：西南石油大学</div>
				<div class="panel panel-primary">所修专业：软件工程</div>
				<div class="panel panel-primary">兴趣爱好：足球，乒乓球，旅游，创业</div>
			</div>
			<div class="right_div">
				
			</div>
		</div>
		<div class="footer">
			<a href="http://www.500d.me/cvresume/5201314/">我的简历</a>
		</div>
	</body>
</html>
Java作业 HTML制作个人简介

猜你喜欢
