IFE 三种简历

简介

IFE 2018 05-06天的编程作业

一份 HTML 文档,用三份 CSS 进行修饰

效果如图:
resume1
resume2
resume3

过程

HTML 文档(resume.html)

先按照第一份简历大体编写了 HTML 文档,然后综合思考了一下怎么样让三份简历都好实现进行了细微修改

问题:比较头痛的地方是,不知道”姓名“、”性别“等小字要使用什么标签,为了语义化一开始用的 h3;

改动1:在写 style_1.css 时,将 h3 改成了 span,最后将 span 嵌套在 p 元素中;

改动2:在写 style_3.css 时,将“基本信息”等 h2 标签放在 section 外部,然后用 div 标签将 h2 标签和各自的 section 嵌套


CSS 文档1(style_1.css)

问题1:一开始因为行内元素和块元素弄混淆了,换行问题一直没解决,写代码的时候才发现 display:inline-block 学习不够,然后又回顾了一遍

解决1:将三个 p 元素应用该语句,然后才将三者放在同一行,剩下的为了换行,将后三个的 span 改为块元素


问题2:间距不一致,前两个 section 和后三个 section 间距不一致

解决2:想起来居中用的 margin: 0 auto; 然后左右间距就自动均分了,所以就将前两个 section 的上下外边距使用了auto

CSS 文档2(style_2.css)

问题1:主体部分套用文档1的,h1标题用了 float,结果宽度和高度无法填充满,背景色只包裹在文章内容

解决1:看了别人笔记没看懂,上网搜的,然后使用了 内边距,才想起来盒模型原来是这么用的,能被着色的地方是box内部,包括内容和内边距,所以通过设置内边距填充内容


问题2:padding-bottom 设置了 100%,然后就变得很长。

解决2:也是上网搜,然后发现,在其父元素上使用 overflow:hidden,就可以将超出父元素部分的背景色隐藏,这里不展开,直接搜索 overflow,在菜鸟教程里看样例和说明就可以理解的很明白

问题3:分两栏效果

解决3:看到网上的,在要分的第二栏,使用 overflow:hidden

好像是,浮动元素后的元素不等高(父元素高度塌陷),所以父元素用 overflow:hidden 就让父元素的两个子元素等高了。

但是虽然等高了,其实两者有重叠的地方(没浮动围绕着浮动的,即没浮动的给浮动的留白了一部分,这就是重叠的地方),所以没浮动的再用 overflow:hidden,这样两者就不重叠了!!!

吐槽一句666

至于为什么这条语句可以实现等高,去重叠,这和CSS的规则有关,此处和BFC(block formatting context)块级格式化上下文有关,详情可自行了解


问题4:最上和最左被留白了

解决4:父元素 body 的外边距为0


CSS 文档3(style_3.css)

问题1:上下分五行,分不了

解决1:看了那个笔记,得到了启发;有点像百度贴吧,一层楼就是一行,用一个div包裹,内部和文档2一致,分两栏。更改了 HTML 文档,增加了5个 div(为什么不用 section,用过了,然后没想起来别的更好的语义。此处可修改)


代码

HTML 文档(resume.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style_3.css">
    <title>Resume</title>
</head>
<body>
    <h1>简历</h1>
    <main>
        <div>
            <h2>基本信息
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值