任务地址：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中改进。

ife 2018 task5 三种简历相关推荐

计算机网络的拓扑结构三种基本型,2018年自考《计算机网络基本原理》试题库四...
2018年自考<计算机网络基本原理>试题库四二.填空题(本大题共20个空,每空1分,共20分) 请在每小题的空格中填上正确答案.错填.不填均无分. 21.第一阶段的计算机网络系统实质上就 ...
IDEA 2018 激活 IDEA 2018.3激活教程最新的（三种）—2018.11.26亲测
https://blog.csdn.net/HALEN001/article/details/81137092 IntelliJ IDEA 2018.3(Ultimate Edition)激活方法本 ...
分布式锁的三种实现方式_基于 redis 的分布式锁实现
云龙资深运维开发工程师,负责游戏系统配置管理平台的设计和开发,目前专注于新 CMDB 系统的开发,平时也关注运维自动化,devops,python 开发等技术. 背景 CMDB 系统里面的机器数据会 ...
适配器模式(三种)简单使用
前言适配器模式是将一个类的接口转换成客户希望的另外一个接口,身边很多东西都是适用于适配器模式的,笔记本的电源(也叫电源适配器),是将220V的交流电转换为笔记本电脑所需要的12V(电流先忽略),笔记 ...
安装软件包的三种方法、rpm包介绍、rpm工具用法、yum工具用法、yum搭建本地仓库...
为什么80%的码农都做不了架构师?>>> 安装软件包的三种方法 rpm工具 yum工具源码包 rpm rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linu ...
js删除字符串的最后一个字符三种方法
字符串 [javascript] view plaincopy var basic = "abc,def,ghi,"; 第一种 [javascript] view plaincop ...
三种方式实现圣杯布局
圣杯布局的三种实现圣杯布局是一种很常见的css布局.他要求: 上部和下部各自占领屏幕所有宽度. 上下部之间的部分是一个三栏布局. 三栏布局两侧宽度不变,中间部分自动填充整个区域. 中间部分的高度是三 ...
你需要掌握的三种编程语言
每个编程人员都需要至少掌握三种编程语言.当然,这只是我的一家之言.这是我经过多年养成的观点,也许是偏见,但我能够根据一个人所喜欢的编程语言来快速的了解一个程序员.当我读简历时,我会尝试使用我的这套观念 ...
老而不死的三种编程语言！
在软件世界中,铁打的二进制,流水的语言.从计算机诞生至今,不知诞生了多少门编程语言.译者查了一下 Wikipedia,好家伙,名单上足足有几百种!但并不是所有的语言都能长期占据 Top 10.今天我们 ...

ife 2018 task5 三种简历

html代码

第一个css代码

运行结果

第二个css代码

运行结果

第三个css代码

运行结果

ife 2018 task5 三种简历相关推荐

最新文章

热门文章