专栏首页python-爬虫VS做简历的第三天(将文件中的样式保存并且导入)

VS做简历的第三天(将文件中的样式保存并且导入)

VS做简历的第三天(将文件中的样式保存并且导入)

1.先在文件栏新建一个CSS文件

2.将第二天如下代码,删除<stype></stype>保留中间部分,复制在CSS文件并且去掉缩进

body{
    background: rgb(129, 123, 123);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: aliceblue
}
.info{

    margin: (10px 10px 10px 40px)   
}
.header{
    background:rgb(87, 87, 87);
    font-size: 30px;
}
.work_experience{
    background: rgb(95, 81, 81);
    color: aqua;
    padding: 10%;
}
.name{
    margin: 10px 40px 10px 10px;
    background: rgb(136, 102, 102);
    color: aliceblue;
}
.sex{
    margin: 10px 30px 10px 20px;
    background: rgb(136, 102, 102);
    color: aliceblue;
}
.age{
    margin: 10px 20px 10px 30px;
    background: rgb(136, 102, 102);
    color: aliceblue;
}
.education_background{
    margin: 10px 10px 10px 40px;
    background: rgb(136, 102, 102);
    color: aliceblue;
}
.headline{
    font-size: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>个人简历</title>
</head>
<body>
    <style>
        body{
            background: rgb(129, 123, 123);
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: aliceblue
        }
        .info{
        
            margin: (10px 10px 10px 40px)   
        }
        .header{
            background:rgb(87, 87, 87);
            font-size: 30px;
        }
        .work_experience{
            background: rgb(95, 81, 81);
            color: aqua;
            padding: 10%;
        }
        .name{
            margin: 10px 40px 10px 10px;
            background: rgb(136, 102, 102);
            color: aliceblue;
                   }
        .sex{
            margin: 10px 30px 10px 20px;
            background: rgb(136, 102, 102);
            color: aliceblue;
        }
        .age{
            margin: 10px 20px 10px 30px;
            background: rgb(136, 102, 102);
            color: aliceblue;
        }
        .education_background{
            margin: 10px 10px 10px 40px;
            background: rgb(136, 102, 102);
            color: aliceblue;
        }
        .headline{
            font-size: 25px;
        }
    </style>
    <section class="header">个人资料:</section>
    <section class="info">   
        <div class="name">姓名:yang</div>
        <div class="sex">性别:男</div>
        <div class="age">年龄:25</div>
        <div class="education_background">学历:大专</div>
    </section>
    <section class="work_experience">
        <div class="headline">工作经历</div>
        <div class="working_time ">工作时间:2017.5-2019.4</div>
        <div class="company_name">公司名称:浙江加奈维医疗科技有限公司</div>
        <div class="profession">岗位:QC工程师</div>
        <div class="saraly">工资:8k</div>
    </section>
</body>
</html>

3.删除第二天代码中的stype部分代码并且在开头加入修改后的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>个人简历</title>
    <link rel="stylesheet" href="my_stype.css">                          #当中的stype.css是上面新建的CSS文件的文件名 
</head>
<body>
    <section class="header">个人资料:</section>
    <section class="info">   
        <div class="name">姓名:yang</div>
        <div class="sex">性别:男</div>
        <div class="age">年龄:25</div>
        <div class="education_background">学历:大专</div>
    </section>
    <section class="work_experience">
        <div class="headline">工作经历</div>
        <div class="working_time ">工作时间:2017.5-2019.4</div>
        <div class="company_name">公司名称:浙江加奈维医疗科技有限公司</div>
        <div class="profession">岗位:QC工程师</div>
        <div class="saraly">工资:8k</div>
    </section>
</body>
</html>

效果图

本人python的初学者,但很喜欢编程,希望大佬们多多指点

谢谢 关于display: ,我还是未能理解希望大佬路过指点一下举个例子,我查过百度看过很多也尝试过display后面所有自动生产的命令,我还是没法理解.

谢谢,各位大佬能给点建议

PS:我是条有梦想的咸鱼

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VS搭建一个WEB的简历第二天,,,最终目标写个好看的简历,再搭建一个自己脑海的网页

    第一天写的代码https://www.cnblogs.com/pythonywy/p/10816215.html,写了一堆错误T T

    小小咸鱼YwY
  • 自学前端第三天

    小小咸鱼YwY
  • VS第一天(一堆错误的错误示范)

    https://www.bilibili.com/video/av48489320/?p=1

    小小咸鱼YwY
  • VS搭建一个WEB的简历第二天,,,最终目标写个好看的简历,再搭建一个自己脑海的网页

    第一天写的代码https://www.cnblogs.com/pythonywy/p/10816215.html,写了一堆错误T T

    小小咸鱼YwY
  • 滚动视差让你不相信“眼见为实”

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果。

    前端森林
  • 前端学习笔记之CSS网页布局 CSS网页布局

      1、浮动流只有一种排版方式,就是水平排版,它只能设置某个元素左对齐或者右对齐,没有居中对齐,也就是没有center这个取值

    Jetpropelledsnake21
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • 第97天:CSS3渐变和过渡详解

    渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

    半指温柔乐
  • 切换

    天天_哥
  • 选择器与css的一些用法

    天天_哥

扫码关注云+社区

领取腾讯云代金券