ife 2018 task5 三种简历

最新推荐文章于 2020-06-03 09:09:53 发布

小k铁柱

最新推荐文章于 2020-06-03 09:09:53 发布

阅读量368

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40890601/article/details/106172301

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

任务地址：http://ife.baidu.com/course/detail/id/40

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>resumn</title>
		<link rel="stylesheet" href="./css/task4_1/style_3.css">
		
	</head>
	<body>
		<div class="container">
			<div class="caption">
					<h1>简历</h1>
			</div>
			<div class=" main">
				<div class="item self-info">
					<h2>基本信息</h2>
					<ul>
						<li><span  class="info-caption">姓名</span><span>张三</span></li>
						<li><span  class="info-caption">性别</span><span>男</span></li>
						<li><span  class="info-caption">应聘职位</span><span>Web前端工程师</span></li>
					</ul>
				</div>
				<div class="item contact">
					<h2>联系方式</h2>
					<ul>
						<li><span class="info-caption">手机</span><span>16283974738</span></li>
						<li><span class="info-caption">Email</span><span>638284689@qq.com</span></li>
						<li><span class="info-caption">个人主页</span><span>Github</span></li>
					</ul>
				</div>
				<div class="item abli-decri">
					<h2>能力描述</h2>
					<div>
						<dl>
							<dt>技术能力</dt>
							<dd>熟练掌握HTML, CSS, JavaScript</dd>
						</dl>
						<dl>
							<dt>综合能力</dt>
							<dd>良好的沟通，主动积极，努力勤奋</dd>
						</dl>
					</div>
					
				</div>
				<div class="item education">
					<h2>教育经历</h2>
					<div>
						<dl>
							<dt>本科</dt>
							<dd>百度前端技术学院小薇学院</dd>
						</dl>
						<dl>
							<dt>研究生</dt>
							<dd>百度前端技术学院大斌学院</dd>
						</dl>
					</div>
					
				</div>
				<div class="item proj-expe">
					<h2>项目经历</h2>
					<div>
						<dl>
							<dt>小度小度</dt>
							<dd>作为前端工程师角色参与了ABC组件的开发</dd>
						</dl>
						<dl>
							<dt>SAN Doc</dt>
							<dd>作为文档工程师参与了SAN Doc编写</dd>
						</dl>
					</div>
					
				</div>
			</div>
		
		</div>
		
	</body>
</html>

第一个css代码

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.container {
	padding: 10px;/*在最外层设置间距 距离边缘10px 为了对齐：内层盒子不设置左右间距 只设置上下间距 */
}
h1 {
	margin-bottom: 30px;
}
h2 {
	margin: 20px 0;
}
ul li {
	list-style: none;
	display: inline-block;
}
.info-caption {
	font-weight: 700;
	margin-right: 10px;
}
dt {
	font-weight: 700;/* 遵循规范,字重用数字表示 */
}

运行结果

在这里插入图片描述

第二个css代码

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	/* padding: 10px; */
	/*在最外层设置间距 距离边缘10px 为了对齐：内层盒子不设置左右间距 只设置上下间距 */
	overflow: hidden;
}

h1 {
	text-align: center;
	margin-top: 15%;
}

h2 {
	margin: 20px 0;
}

ul li {
	list-style: none;
	display: inline-block;
}

.info-caption {
	font-weight: 700;
	margin-right: 10px;
}

dt {
	font-weight: 700;
	/* 遵循规范,字重用数字表示 */
}

/*设置为等高布局*/
.caption,
.main {
	float: left;
	margin-bottom: -600px;
	padding-bottom: 600px;
}

.caption {
	width: 30%;
	background-color: #4a9ed6;
	color: #fff;
}

.main {
	margin-left: 10px;
}

运行结果

在这里插入图片描述

第三个css代码

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	/* padding: 10px; */
	/*在最外层设置间距 距离边缘10px 为了对齐：内层盒子不设置左右间距 只设置上下间距 */
	/* overflow: hidden; */
}


h2 {
	/* margin: 20px 0;/*设置上下边距 左右边距为0*/ */
	
}

ul li {
	list-style: none;
	display: inline-block;
}

.info-caption {
	font-weight: 700;
	margin-right: 10px;
}

dt {
	font-weight: 700;
	/* 遵循规范,字重用数字表示 */
}

.caption {
	width: 100%;
	height: 6rem;
	line-height: 6rem;
	background: #16222A;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #568eaa, #16222A);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #568eaa, #16222A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
	padding-left: 3rem;
}

.main {
	/* margin-left: 10px; */
}
h2, ul, dt, dd {
	display: inline-block;
}
.abli-decri div, .education div, .proj-expe div{
	display: inline-block;/* 将三个dl设置h2同一行 */
}
.item {
	height: 8rem;
	border-bottom: 1px solid #263d4f;

}
.item h2 {
	line-height: 8rem;
	width: 30%;
	height: 8rem;
	background: #68aece;
	border-bottom: 1px solid #41dada;
	text-align: center;
}

运行结果

在这里插入图片描述
还有一些冗余的代码没有删除，这是不足点，会在下一次的task中改进。

小k铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ife 2018 task5 三种简历

任务地址：http://ife.baidu.com/course/detail/id/40html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>resumn</title> <lin
复制链接

扫一扫

专栏目录