css+div布局实现简历界面

时间：2024-04-05 13:34:06

工具

IntelliJ IDEA，Photoshop CS3

材料

简历（PDF）

步骤

1 根据div布局思想切分简历

css+div布局实现简历界面

2使用ps cs3将简历中出现图标合成到一张图中

css+div布局实现简历界面

3.css+div布局实现简历页面

3.1使用IntelliJ IDEA建立项目

css+div布局实现简历界面

3.2根据页面划分布局页面

<div id="container">
    <div id="main_left">
        <div id="main_left_one"></div>
        <div id="main_left_two"></div>
        <div id="main_left_three"></div>
        <div id="main_left_four"></div>
    </div>
    <div id="main_right">
        <div id="main_right_one"></div>
        <div id="main_right_two"></div>
        <div id="main_right_three"></div>
        <div id="main_right_four"></div>
    </div>
</div>

3.4css布局+html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_resume</title>
    <link rel="stylesheet" href="./css/resum.css">
</head>
<body>
<div id="container">
    <div id="head">

    </div>
    <div id="main_left">
        <div id="main_left_one">
            <div class="my_logo" id="main_left_one_head"></div>
            <div>
                <div id="mlo_name">
                    <font >xxxxxxxx</font>
                </div>
                <div id="mlo_content">
                    <font>工作是重复而荒谬的，而人却不是，我们应当认真的去活，在工作中重新定义自身的价值。</font>
                    <div class="hr" id="mlo_hr">
                    </div>
                </div>

            </div>
        </div>
        <div id="main_left_two">
            <div>
                <div class="my_logo" id="mlt_1">
                </div>
                <div>
                    <font>1年经验</font>
                </div>
            </div>
            <br>
            <div>
                <div class="my_logo" id="mlt_2">
                </div>
                <div>
                    <font>xxxxxxxx</font>

                </div>
            </div>
            <br>
            <div>
                <div class="my_logo" id="mlt_3">
                </div>
                <div>
                    <font>[email protected]</font>
                </div>
            </div>
            <br>
        </div>
        <div id="main_left_three">
            <div class="my_logo" id="mlth_log">
            </div>
            <div id="mlth_font">
                <font>个人标签</font>
            </div>
            <div class="hr" id="mlth_hr" >

            </div>
            <div id="mlth_border">
                <ul id="list">
                    <li>LINUX</li>
                    <li>SHELL编程</li>
                    <li>TOMCAT</li>
                    <li>JAVAEE</li>
                    <li>PSCS3</li>
                    <li>EXCEL</li>
                    <li>PPT</li>

                </ul>
            </div>
        </div>
        <div id="main_left_four" class="my_logo">

        </div>
    </div>
    <div id="main_right">
        <div id="main_right_one">
            <div id="mlo_title">
                <div class="my_logo" id="mro_log"></div>
                <div class="title"><span>求职意向</span></font></div>
                <div class="hr" id="mrlo_hr"></div>
            </div>
            <br>
            <br>
            <div id="mro_content">
                <div class="my_logo" id="mro_1"></div>
                <div><font>后端开发，运维工程师，实施工程师</font></div>
                <div class="my_logo" id="mro_2"></div>
                <div><font>重庆</font></div>
                <div class="my_logo" id="mro_3"></div>
                <div><font>薪资面议</font></div>
                <div class="my_logo" id="mro_4"></div>
                <div><font>1周内到岗</font></div>
            </div>
        </div>
        <br>
        <br>
        <div id="main_right_two">
            <div>
            <div class="my_logo" id="mrt"></div>
            <div class="title"><span>教育背景</span></font></div>
            <div class="hr" id="mrt_hr"></div>
            </div>
            <div>
                <ul id="list_2">
                    <li>2014.6-2018.7</li>
                    <li>xxxxxxxx</li>
                    <li>xxxxxxxx</li>
                </ul>
                <div id="mrt_font">
                <font>
                    主修课程：linux，shell编程Java开发工具与编程、HTML+CSS网页设计与布
                    局、Jav a核心编程技术、JavaScript网站前端开发、Java Web应用开发，及
                    其他本专业其他领域知识，对当前行业环境有一个全方位的认识，可扩展性较好。
                </font>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
        <div id="main_right_three">
            <div id="mrth_3">
                <div class="my_logo" id="mrth"></div>
                <div class="title"><span>工作经验</span></font></div>
                <div class="hr" id="mrth_hr"></div>
            </div>
            <div class="clearfix"></div>
            <div>
                <ul id="list_3">
                    <li>2018.7-2019.5</li>
                    <li>xxxxxxxx</li>
                    <li>xxxxxxxx</li>
                </ul>
                <div class="clearfix"></div>
                <div id="mrth_font">
                    <font>
                        在甲方场地维护，实施，数据稽核系统与收入保障系统。（web程序，spring
                        ，struts 2开发，应用部署：tomcat）
                    </font>
                    <br>
                    日常工作：
                    <br>
                        1根据中国电信业务书写存储过程（oracle）稽查异常数据。
                    <br>
                        2根据异常数据配置前台报表展示异常数据。
                    <br>
                    3监控oracle表空间使用情况，清理oracle表空间。
                    <br>

                    4监控服务器运行状态，对数据接口进行备份整理。
                    <br>

                    其他：
                    <br>
                        在职期间，中国电信BSS2.0 升级 BSS3.0，需要将数据结构以及数据同步到
                        我们自己 服务器上，以便后续的稽核工作。
                    <br>
                        在本次同步数据结构，同步数据的工作由我一人负责。
                    <br>
                    <font>
                        主要的工作内容:
                        1.使用shell脚本在数据接口机上采集数据接口到目标服务器，并且在目标服务
                        器上定时采集。
                        2.数据接口的校验，对于问题接口沟通第三方重新推送数据接口，或者更改调
                        度配置（sqlldr）
                        3.使用sqlldr入库数据接口，对于入库异常的接口手动处理。（入库乱码，数
                        据结构不对应等）
                    </font>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="main_right_four">
            <div id="mtf">
                <div class="my_logo" id="mrf"></div>
                <div class="title"><span>个人站点</span></font></div>
                <div class="hr" id="mrf_hr"></div>
            </div>
            <div class="clearfix"></div>
            <div id="last">
                <font>
                    CDSN：
                    https://blog.csdn.net/qq_39866521
                    <br>
                    个人开发网站：（网站主要介绍个人技术，以及实现效果）
                </font>
            </div>
        </div>
    </div>
</div>
</body>
</html>

css：

*{
    margin: 0px;
    padding: 0px;
    /*消除所有内外填充,不同浏览器留白不同，兼容不同浏览器，方便对齐*/
}

body  {
    font: 20px/1.5 幼圆     ;
    /*全局设置字体大小格式*/
    color: #696969;
    font-weight: 800;
    background-color: lightgrey;
}
#container{
    height: 1300px;
    width: 1027px;
    margin: auto;
    /*视觉效果决定像素大小，定义边框颜色，对齐方式*/
    background-color: #fffbff;
}
#head{
    height: 15px;
    background-color: cornflowerblue;
    /*页面新增div头部蓝色*/
}
#main_left{
    width: 36%;
    height: 100px;
    float: left;
}
#main_right{
    width: 64%;
    height: 100px;
    float: left;
    /*main_left,right同时脱离正常的html文本流（从上到下，从左到右）允许浮动对齐*/
}
/*浮动整理*/
.clearfix{
    width: 0px;
    height: 0px;
    margin: 0;
    padding: 0;
    clear: both;/* 此元素的右不能出现浮动元素 */
}
#main_left_two div{
    float: left;
}
#main_left_three div{
    float: left;
}
#main_left_two{
    width: 208px;
    margin: auto;
    margin-top: 55px;
}
#main_left_three{
    width: 252px;
    margin: auto;
    margin-top: 50px;
}
#mlth_font{
    margin-top: 5px;
    margin-left: 10px;
}
#mlth_border{
    margin-top: 10px;
}
#mlo_title div{
    float: left;
}
#mlo_title{
    margin-top: 50px;
}
#mlth_hr{
    width: 93px;
    margin-top: 20px;
}
#mro_content div {
    float: left;
}
#mro_content>div>font{
    margin-right: 105px;
}
#main_right_two div {
    float: left;
}
#main_right_two{
    margin-top: 65px;
}
#mrt_font{
    margin-top: 30px;
}
#mrth_3 div{
    float: left;
}
#mrth_hr,#mrf_hr{
    width: 500px;
    margin-top: 20px;
    height: 3px;
}
#mtf div{
    float: left;
}
#main_right_four{
    margin-top: 27px;
}
#last{
    margin-top: 30px;
}
/*定义图标类的统一背景，在id选择器中确定该图标大小，以及定位方式*/
.my_logo{
    background: url("../logo/resume_logo.png");
}
/*图标类定义*/
#main_left_one_head{
    width: 162px;
    height: 200px;
    margin: auto;
    margin-top: 32px;
}
#mlt_1{
    height: 30px;
    width: 30px;
    background-position: -183px -230px;
}
#mlt_2{
    height: 30px;
    width: 30px;
    background-position: -183px -272px;
}
#mlt_3{
    height: 30px;
    width: 30px;
    background-position: -183px -316px;
}
#mlth_log{
    height: 41px;
    width: 41px;
    background-position: -176px -57px;
}
#main_left_four{
    margin: auto;
    margin-top: 450px;
    width: 133px;
    height: 133px;
    background-position: -18px -237px;

}
#main_right_three{
    margin-top: 23px;
}
#mrth_font{
    margin-top: 30px;
}
#mro_log{
    height: 41px;
    width: 41px;
    background-position: -177px -3px;
}
#mrlo_hr,#mrt_hr{
    width: 505px;
    margin-top: 20px;
    height: 3px;
}
#mro_1{
    width: 24px;
    height: 24px;
    background-position: -234px -234px;
    margin-top: 5px;
}
#mro_2{
    width: 24px;
    height: 24px;
    background-position: -270px -234px;
    margin-top: 5px;
}
#mro_3{
    width: 24px;
    height: 24px;
    background-position: -234px -272px;
    margin-top: 5px;
}
#mro_4{
    width: 24px;
    height: 24px;
    background-position: -270px -270px;
    margin-top: 5px;
}
#mrt{
    height: 41px;
    width: 41px;
    background-position: -235px -3px;
}
#mrth{
    height: 41px;
    width: 41px;
    background-position: -235px -3px;
}
#mrf{
    height: 41px;
    width: 41px;
    background-position: -349px -3px;
}


/*文字类定义*/
#mlo_name{
    font-weight: 800;
    font-size: 36px;
    text-align: center;
    margin-top: 70px;
    color: black;
}
#mlo_content{
    width: 260px;
    margin: auto;
    text-indent: 40px;
}
#mlth_font>font{
    font-size: 25px;
    font-weight: 800;
}
#mlth_border>font{
    border: 10px;
    color: dimgrey;
}
#list li{
    float: left;
    list-style: none;
    width:auto;
    border: 1px solid #696969 ;
    margin-left: 8px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 10px;
}
span{
    font-weight: 900;
    font-size: 26px; ;
}
#list_2>li{
    float: left;
    list-style: none;
    width:auto;
    margin-left: 8px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 10px;
    margin-right: 80px;
}
#list_3>li{
     float: left;
     list-style: none;
     width:auto;
     margin-left: 8px;
     margin-top: 5px;
     padding: 5px;
     border-radius: 10px;
     margin-right: 75px;
 }

/*下划线样式*/

.hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: cornflowerblue;
}
#mlo_hr{
    margin-top: 37px;
}

3.5最终效果：

css+div布局实现简历界面

仅为个人练习。

相关文章