IFE 三种简历

最新推荐文章于 2024-10-04 06:11:34 发布

Machiny

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量412

点赞数

分类专栏：前端项目文章标签： html css

本文链接：https://blog.csdn.net/Marie_M/article/details/111031274

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

项目

2 篇文章 0 订阅

订阅专栏

本文介绍了IFE编程作业中关于创建HTML简历并使用三份CSS文档进行美化的过程。作者在实践中遇到并解决了行内元素布局、元素间距、背景填充、分栏布局等问题，详细记录了每个CSS文档的解决方案，涉及HTML语义化、CSS盒模型、浮动布局和BFC等相关知识。

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

简介

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>基本信息</h2>
            <section class="basic">
                <p><span>姓名</span>张三</p>    
                <p><span>性别</span>男</p>    
                <p><span>应聘职位</span>Web前端工程师</p>    
            </section>
        </div>
        <div>
            <h2>联系方式</h2>
            <section class="contact">
                <p><span>手机</span>12312341234</p>    
                <p><span>Email</span><a href="#">joinife@baidu.com</a></p>
                <p><span>个人主页</span><a href="#">Github</a></p>   
            </section>
        </div>
        <div>
        <h2>能力描述</h2>
            <section class="ability">
                <p><span>技术能力</span>熟练掌握HTML,CSS,JavaScript</p>
                <p><span>综合能力</span>良好的沟通，主动积极，努力勤奋</p>
            </section>
        </div>
        <div>
            <h2>教育经历</h2>
            <section class="education">
                <p><span>本科</span>百度前端技术学院小微学院</p>
                <p><span>研究生</span>百度前端技术学院大斌学院</p>
            </section>
        </div>
        <div>      
            <h2>项目经历</h2>
            <section class="project">
                <p><span>小度小度</span>作为前端工程师角色参与了ABC组件的开发</p> 
                <p><span>SAN Doc</span>作为文档工程师参与了SAN Doc编写</p>
            </section> 
        </div>
    </main>
</body>
</html>

CSS 文档1（style_1.css）：

body{
    font-family: Arial, Helvetica, sans-serif;
}
span{
    font-weight: bold;
}
.basic span{
    display: inline-block;
    margin-right: 0.5em;
}
.basic p{
    display: inline-block;
    margin-right: 3em;
    margin-top: auto;
    margin-bottom: auto;
}
.contact span{
    display: inline-block;
    margin-right: 0.5em;
}
.contact p{
    display: inline-block;
    margin-right: 3em;
    margin-top: auto;
    margin-bottom: auto;
}
.ability span{
    display: block;
}
.education span{
    display: block;
}

.project span{
    display: block;
}

CSS 文档2（style_2.css）：

body{
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden;
    margin:0;
}
h1{
    float: left;
    background-color: cornflowerblue;
    color:white;
    padding-bottom:100%;
    padding: 1em 1em 100% 1em;
    margin: 0 1em 0 0;
}
main{
    overflow:hidden;
}
span{
    font-weight: bold;
}
.basic span{
    display: inline-block;
    margin-right: 0.5em;
}
.basic p{
    display: inline-block;
    margin-right: 3em;
    margin-top: auto;
    margin-bottom: auto;
}
.contact span{
    display: inline-block;
    margin-right: 0.5em;
}
.contact p{
    display: inline-block;
    margin-right: 3em;
    margin-top: auto;
    margin-bottom: auto;
}
.ability span{
    display: block;
}
.education span{
    display: block;
}

.project span{
    display: block;
}

CSS 文档3（style_3.css）：

/*颜色自选的*/
body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
}
h1{
    background-color: cornflowerblue;
    color:white;
    padding: 1em;
    margin: 0;
}
span{
    font-weight: 600;
    padding-left: 1em;
}
.basic span{ 
    margin-right: 0.5em;
}
.basic p{
    display: inline-block;
    margin-right: 3em;
    margin-bottom: auto;
}
.contact span{
    margin-right: 0.5em;
}
.contact p{
    display: inline-block;
    margin-right: 3em;
    margin-bottom: auto;
}
h2{
    float: left;
    background-color:gainsboro;
    color:white;
    padding: 2em 1em;
    margin: 0;
    border-right: 1px solid gold;
    border-left: 1px solid gold;
}

div{
    overflow: hidden;
    border-top: 1px solid gold;
    border-right: 1px solid gold;
    margin: 0;
}
section{
    padding-left: 1em;
    overflow: hidden;
}