Web学习第五~六天作业三种简历

最新推荐文章于 2021-08-03 19:14:00 发布

ACM小学生

最新推荐文章于 2021-08-03 19:14:00 发布

阅读量216

点赞数

分类专栏： Freshman丶前端学习

本文链接：https://blog.csdn.net/qq_38576126/article/details/90488910

版权

Freshman丶前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

源文件网址

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历模型</title>
    <link rel="stylesheet" href="style_3.css">

</head>
<body>
    <div class="resume">
        <div class="header">
            <h1>简历</h1>
        </div>
        <div class="content">
            <div class="basic">
                <div class="tit"><h2>基本信息</h2></div>
                <div class="basicInf">
                    <h5>姓名 张三</h5>
                    <h5>性别 男</h5>
                    <h5>应聘职位 Web前端工程师</h5>
                </div>
            </div>
            <div class="contact">
                <div class="tit"><h2>联系方式</h2></div>
                <div class="contactInf">
                    <h5>手机 12312341234</h5>
                    <h5>Email 
                        <a href="#">joinefe@baidu.com</a>
                    </h5>
                    <h5>个人主页 
                        <a href="https://github.com/Freshman-996">Github</a>
                    </h5>
                </div>
            </div>
            <div class="ability">
                <div class="tit"><h2>能力描述</h2></div>
                <div class="abilityInf">
                    <div class="mid">
                        <h5 class="subtit">技术能力</h5>
                        <h5>熟练掌握HTML,CSS,JavaScript</h5>
                    </div>
                    <div class="mid">
                        <h5 class="subtit">综合能力</h5>
                        <h5>良好的沟通，主动积极，努力勤奋</h5>
                    </div>
                </div>
            </div>
            <div class="education">
                <div class="tit"><h2>教育经历</h2></div>
                <div class="educationInf">
                    <div class="mid">
                        <h5 class="subtit">本科</h5>
                        <h5>百度前端技术学院小薇学院</h5>
                    </div>
                    <div class="mid">
                        <h5 class="subtit">研究生</h5>
                        <h5>百度前端技术学院大斌学院</h5>
                    </div>
                </div>
            </div>
            <div class="experience">
                <div class="tit"><h2>项目经历</h2></div>
                <div class="experienceInf">
                    <div class="mid">
                        <h5 class="subtit">小度小度</h5>
                        <h5>作为前端工程师角色参与了ABC组件的开发</h5>
                    </div>
                    <div class="mid">
                        <h5 class="subtit">SAN Doc</h5>
                        <h5>作为文档工程师参与了SAN Doc编写</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

↓↓↓第一种：

* {
    margin: 0;
    padding: 0;
}
.tit {
    margin-top: 30px;
}
h5 {
    font-size: 16px;
    font-weight: normal;
}
.basicInf h5, .contactInf h5 {
    display: inline-block;
    margin: 10px 50px 0 0;
}
.subtit {
    margin-top: 20px;
    font-weight: bold;
}

第一种
↓↓↓第二种：

* {
    margin: 0;
    padding: 0;
}
.resume {
    height: 800px;
    width: 800px;
}
.tit {
    margin-top: 30px;
}
h5 {
    font-size: 16px;
    font-weight: normal;
}
.basicInf h5, .contactInf h5 {
    display: inline-block;
    margin: 10px 50px 0 0;
}
.subtit {
    margin-top: 20px;
    font-weight: bold;
}
.header {
    width: 200px;
    height: 800px;
    float: left;
    /*display: inline-block;*/
    background-color: skyblue;
}
.header h1 {
    height: 50px;
    width: 80px;
    text-align: center;
    margin: 40px auto;
    color: #fff;
}
.content {
    width: 500px;
    /*display: inline-block;*/

    float: left;
    margin-left: 20px;
}

第二种
↓↓↓第三种：

* {
    margin: 0;
    padding: 0;
}
.header h1 {
    height: 50px;
    width: 80px;
    text-align: center;
    margin-left: 40px;
    padding-top: 20px; 
    color: #fff;
}
.content > div {
    height: 100px;
    width: 1200px;
}
.content > div > div {
    height: 100px;
    width: 998px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    float: left;
}
.content .tit {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #ccc;
    border-bottom: 1px solid #fff;
}
.tit h2 {
    margin-top: 35px; 
}
.content div h5 {
    font-size: 16px;
    font-weight: normal;
    float: left;
    margin: 0 20px 0;
}
.content .subtit {
    font-weight: bold;
}
.content .mid {
    margin-left: 20px;
    height: 24px;
    width: 1000px;
}
.content .mid h5 {
    margin: 0;
}
.header {
    height: 100px;
    width: 1100px;
    background: #999;
}

第三种

ACM小学生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web学习第五~六天作业三种简历

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>简历模型</title> <link rel="stylesheet" href="style_3.css"></head><b...
复制链接

扫一扫