Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

我是一颗好李子

于 2022-11-07 14:19:05 发布

阅读量1w

点赞数 22

分类专栏： Bootstrap 文章标签： bootstrap 前端 html

本文链接：https://blog.youkuaiyun.com/m0_69034993/article/details/127729439

版权

制作个人简历网页

代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
	<style>
		.lbox {
			margin: 30px;
			padding: 10px;
		}

		.lbox.row {
			padding: 8px 0px;
		}

		.progress {
			margin-top: 5px;
		}

		.rbox {
			margin: 30px;
		}

		.rbox h4 {
			padding-bottom: 5px;
			color: #17a2b8;
			border-bottom: 1px solid #17a2b8
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-4 bg-info text-white left">
				<div class="lbok">
					<img src="images/1.jpg" class="img-fluid d-block m-auto" />
				</div>
				<div class="lbox">
					<p><i class="fa fa-user-o"></i>&nbsp;&nbsp;年龄:19</p>
					<p><i class="fa fa-id-card"></i>&nbsp;&nbsp;当前学历：专科</p>
					<p><i class="fa fa-user-circle-o"></i>&nbsp;&nbsp;政治面貌:团员</p>
					<p><i class="fa fa-wrench"></i>&nbsp;&nbsp;专业:计算机应用技术</p>
					<p><i class="fa fa-university"></i>&nbsp;&nbsp;学校:xxxxxx学院</p>
					<p><i class="fa fa-phone"></i>&nbsp;&nbsp;联系电话:12345678901</p>
					<p><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;电子邮箱:1234567890@qq.com</p>
				</div>
				<div class="lbox">
					<h4>技能特长</h4>
					<div class="row">
						<div class="col-sm-4">
							<span>HTML</span>
						</div>
						<div class="col-sm-8">
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-success progress-bar-animated"
									style="width: 95%;">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>CSS3</span>
						</div>
						<div class="col-sm-8">
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-info progress-bar-animated"
									style="width: 90%;">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>JS</span>
						</div>
						<div class="col-sm-8">
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated"
									style="width: 88%;">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-4">
							<span>Bootstrap</span>
						</div>
						<div class="col-sm-8">
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-primary progress-bar-animated"
									style="width: 90%;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-8 border right">
				<div class="rbox">
					<h3>李肆</h3>
					<p>代码虐我千万遍,我待代码如初恋。</p>
				</div>
				<div class="rbox">
					<h4>求职意向</h4>
					<p>web前端开发工程师</p>
				</div>
				<div class="rbox">
					<h4>教育背景</h4>
					<p>2021.9-2023.6&nbsp;&nbsp;xxxxxxxxxxx计算机应用技术(专科)</p>
				</div>
				<div class="rbox">
					<h4>工作经验</h4>
					<p>2023.9-2024.6&nbsp;&nbsp;互联网科技公司&nbsp;&nbsp;web前段实习生</p>
					<p></p>
					<p>工作描述</p>
					<ul>
						<li>负责编写详细需求分析和客户管理模块；</li>
						<li>实现了客户添加、客户修改、客户删除、批量删除客户、分页等几大功能；</li>
						<li>分别用到JavaScript、jQuery等开发技术,现几大功能运行稳定,运算速度明显变快;</li>
					</ul>
				</div>
				<div class="rbox">
					<h4>自我评价</h4>
					<ol>
						<li>关注前端前沿技术,基本功扎实,熟悉应用jQuery,熟悉HTML5、CSS3等;</li>
						<li>熟悉应用常见的前端框架并掌握其原理，有组件化的思想，担当且创新；</li>
						<li>较强的学习能力和适应能力，良好的独立分析解决问题能力和逻辑分析思维；</li>
						<li>良好的团队沟通协作和服务意识，较强的工作执行力和抗压能力，愿与公司一同发展</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

结果图：

工具类