工具

IntelliJ IDEA，Photoshop CS3

材料

简历（PDF）

步骤

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

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

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

3.1使用IntelliJ IDEA建立项目

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>xxxxxxxx@qq.com</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布局实现简历界面相关推荐

【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...
第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. "上中下"布局4. "左中右"布局;12.1.1盒子结构网页中元素都占据一定的空间,除了元素内容 ...
CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
CSS+div布局总结（快速入门，附代码）
文章目录定位相对定位绝对定位固定定位堆叠顺序 display 预备知识: 块状&行内元素的互换: 隐藏元素: 设置透明度: 盒子模型预备知识: margin 快速设置: 居中显示: ...
信息导航与网站设计采用HTML+CSS+DIV布局页面
期末作业:根据本课程所学内容布局如下页面要求:导航条的内容要链接到自己的作品页面(从7次作业中选6个),页面中间的DIV要按照图示要求并根据自己的情况填写上相应的内容,可以使用列表也可以使用段落, ...
一个不错的CSS DIV布局，DIV高度自适应
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W ...
css+div布局----典型布局基本框架
基本俩层布局 heml代码 Css文件脚本代码下载
收藏网站制作常用经典css.div.布局.设计实例打包下载
点击下载:8好玩的导航菜单.动态感比较强lavalamp_0[1].1.0.rar 点击下载:box盒子-.rar 点击下载:cctv-鼠标滑过图片渐变效果.rar 点击下载:css-menu导航.r ...

css+div布局实现简历界面

工具

材料

步骤

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

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

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

3.1使用IntelliJ IDEA建立项目

3.2根据页面划分布局页面

3.4css布局+html源码

css+div布局实现简历界面相关推荐

最新文章

热门文章