jsp新代码第261课

最新推荐文章于 2023-02-01 13:45:00 发布

虾米大王

最新推荐文章于 2023-02-01 13:45:00 发布

阅读量154

点赞数 1

分类专栏： Java 文章标签： java

本文链接：https://blog.csdn.net/modern358/article/details/124058614

版权

Java 专栏收录该内容

1301 篇文章 5 订阅

订阅专栏

这是一份HTML格式的个人简历，展示了前端工程师兼UI设计师嬴政的基本信息、联系方式、个人介绍、技能、语言水平以及教育和工作经验。简历采用了Bootstrap框架进行布局，包括绿色、橙色和红色的板块来突出不同内容，如个人介绍、技能和语言能力。

摘要由CSDN通过智能技术生成

new261.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<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>bootstrap的使用</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<style type="text/css">
	body{
		font-family: 'microsoft yahei',Arial,sans-serif;
	}
	
	.cvheader{
		border-bottom: 1px solid #dfdfdf;
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.cvheader h1{
		margin:0;
	}
	
	.address{
		background-color: #efb73e;
		color:#fff;
		padding: 10px 0;
	}
	
	.cvbody{
		padding-top: 50px;
	}
	
	.cbox{
		margin-bottom: 30px;
		color:#fff;
		padding:50px;
	}
	
	.green{
		background-color: #2ecc71;
	}
	
	.orange{
		background-color: orange;
	}
	
	.red{
		background-color: #dd4814;
	}
	
	.bbox{
		border: 1px solid #dfdfdf;
		border-radius: 5px;
		margin-bottom: 30px;
		padding: 50px;
	}
	
	.footer{
		margin:30px 0 30px;
		padding: 50px;
		background-color: #cccccc;
		color:#fff;
	}
</style>
</head>
<body>
<h2 class="text-center text-info">个人简历</h2>
<div class="container">
	<div class="row cvheader">
		<%-- 标题文字 --%>
		<div class="col-lg-7 col-md-7 col-xs-12">
			<h1 class="text-primary">嬴政</h1>
			<p><span class="glyphicon glyphicon-paperclip">前端工程师&&UI设计师</span></p>
		</div>
		<%-- 联系方式 --%>
		<div class="col-lg-3 col-md-3 col-xs-12">
			<div class="row">
				<div class="col-lg-4 col-md-4 col-xs-4">
					<p id="contact" class="address text-center">联系</p>
				</div>
				<div class="col-lg-8 col-md-8 col-xs-8">
					<p><span class="glyphicon glyphicon-envelope">yingzheng@qq.com</span></p>
					<p><span class="glyphicon glyphicon-earphone"></span>18999880001</p>
					<p><span class="glyphicon glyphicon-road"></span>湖北省武汉市洪山区</p>
				</div>
			</div>
		</div>
		<div class="col-lg-2 col-md-2 col-xs-12">
			<p><img src="../img/pp.jpg" class="img-responsive img-rounded" alt="我是嬴政" title="我是嬴政"></p>
		</div>
	</div>
</div>
<%-- 页面主体区域 --%>
<div class="container">
	<%-- 主体左侧 --%>
	<div class="row cvbody">
		<div class="col-lg-6 col-md-6 col-xs-12">
			<div class="row">
				<div class="cbox green">
					<h4>个人介绍</h4>
					<p>更多……</p>
				</div>
				<div class="cbox red">
					<h4>个人技能</h4>
					<p>
						<ul class="list-unstyled">
							<li>HTML/CSS/javascript</li>
							<li>Java/PHP</li>
							<li>数据库</li>
							<li>Photoshop/UI</li>
						</ul>
					</p>
				</div>
				<div class="cbox orange">
					<h4>语言水平</h4>
					<p>
						<img src="../img/canvas.png" width="150" height="150" class="pull-left">
						<img src="../img/canvas.png" width="150" height="150" class="pull-right">
						<span class="clearfix"></span>
					</p>
				</div>
			</div>
		</div>
		
		<%-- 左右两栏的空白列 --%>
		<div class="col-lg-1 col-md-1 col-xs-12"></div>
		
			<%-- 主体区域右侧 --%>
	<div class="col-lg-5 col-md-5 col-xs-12">
		<div class="row">
			<div class="bbox">
				<h4>教育背景</h4>
				<p>更多……</p>
			</div>
			<div class="bbox">
				<h4>工作经验</h4>
				<p>更多……</p>
			</div>
			<div class="bbox">
				<h4>个人爱好</h4>
				<p><span class="glyphicon glyphicon-tree-deciduous"></span>骑马</p>
				<p><span class="glyphicon glyphicon-plane"></span>旅游</p>
				<p><span class="glyphicon glyphicon-cutlery"></span>美食</p>
				<p><span class="glyphicon glyphicon-music"></span>音乐</p>
			</div>
			
		</div>
	</div>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="footer text-center">关注微博</div>
	</div>
</div>
</body>
</html>