HTML+CSS入门之简历制作实践-职坐标

HTML+CSS入门之简历制作实践

从安 2019-06-21 来源：阅读 1679 评论 0

摘要：本篇文章主要讲述HTML+CSS入门之简历制作实践，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章主要讲述HTML+CSS入门之简历制作实践，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML+CSS入门之简历制作实践

简历的CSS文件

body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color:white;
    text-shadow: 4px 4px 4px #222222;
    text-align:center;
    width:1366px;
    height: 768px;
    background-image:url("o_xxx.jpg");
    background-size: 1366px 768px
}#header{
    background: rgb(238, 223, 16);
    margin: 0 40%;
    border-radius: 0px 10px 0px 10px;
}#info{
    text-align: left;
}.name,.age,.sex,.education_background{
    background: #b1a1a1;
    width: 150px;
    border-radius: 0 50% 50% 0 ;
}.name{
    margin: 10px 0 10px 5%
}.sex{
    margin:10px 0 10px 10%
}.age{
    margin:10px 0 10px 15%
}.education_background{
    margin:10px 0 10px 20%
}#work_experience{
    text-align: left
}.headline{
    margin:10px 0 10px 25%
} .working_time{
    margin:10px 0 10px 20%
} .working_time{
    margin:10px 0 10px 20%
} .company_name{
    margin:10px 0 10px 15%
}.profession{
    margin:10px 0 10px 10%
}.saraly{
    margin:10px 0 10px 5%
}#capacity div{
    padding: 8px 10%;
    float: left;  
    list-style: none;   
    color:#fff;
}

简历的html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <link rel="stylesheet" href="my_stype.css"></head><body>
    <section id="header">小小咸鱼的个人资料</section>
    
    <section id="info">   
        <div class="name">姓名：yang</div>
        <div class="sex">性别：男</div>
        <div class="age">年龄：25</div>
        <div class="education_background">学历：大专</div>
    </section>
    <section id="work_experience">
        <div class="headline">工作经历</div>
        <div class="working_time ">工作时间：2017.5-2019.4</div>
        <div class="company_name">公司名称：浙江xx医疗科技有限公司</div>
        <div class="profession">岗位：QC工程师</div>
        <div class="saraly">工资：8k</div>
    </section>
    <section id = 'capacity'>
        <div style="color: black"><b>拥有证书</b>
        <br>内审员
        <br>化验员
        <br>无菌实验员
        <br>压力容器操作员
        <br>危化品管理员
        </div>
        <div div style="color: black"><b>计算机软件熟练度</b>
        <br>wps:精通
        <br>PS:精通
        <br>会声会影：精通
        <br>ai:熟练
        <br>pycharm:熟练
        <br>VS:熟练
        <br>ae:了解
        </div>
    </section></body></html>

今天学习到的内容

#再导入背景为图片时候

格式为background -image:url("xx")这里链接要有双引号#样式设定时候

好几类设置相同格式化的时候

比如name和age一起设置

可以.age,.name{样式内容}#关于padding，margin等有4个值要设置的时候

只设置一个默认4个值都是这个，设置两个前面一个代表上下，后面那个代表左右，设置3个默认最后一个为0#关于样式设置可以直接在标签里设置

<div div style="color: black">如上面的

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

web页面设计教程 divcss页面布局 html与css入门经典

本文由 @从安发布于职坐标。未经许可，禁止转载。