使用HTML+CSS设计个人简历

最新推荐文章于 2024-03-21 00:02:50 发布
最新推荐文章于 2024-03-21 00:02:50 发布
阅读量1.5w 收藏 306
点赞数 23
分类专栏： 前端三剑客 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bennettgxd/article/details/119117232
版权

使用HTML+CSS设计个人简历

效果展示

![

代码实现

resume.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历</title>
    <link href="../css/resume-css.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box">
        <div class="left-box">
            <div class="me-img">
                <img src="../imgs/head.png">
                <h4>bennett</h4>
                <h6>工作意向：Java全栈</h6>
            </div>
            <hr>
            <div class="basic-information">
                <h6>名族：汉族</h6>
                <h6>现居：陕西西安</h6>
                <h6>籍贯：甘肃兰州</h6>
                <h6>电话：15594497111</h6>
                <h6>邮箱：bennett@qq.com</h6>
                <h6>政治面貌：党员</h6>
            </div>
            <hr>
            <div class="honor-award">
                <table border="1px">
                    <tr>
                        <th>荣誉奖励</th>
                    </tr>
                </table>

                <h6>获得校二等奖奖学金；</h6>
                <h6>全国计算机等级三级证书；</h6>
                <h6>全国英语六级；</h6>

            </div>
        </div>
        <div class="right-box">
            <!--自我评价-->
            <div class="self-assessment">
                <h4>自我评价</h4>
               <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我为人友善、真诚，做事细致、专注，有很强的责任心，学习能力与适应能力强，
                    喜欢与他人交谈，热爱生活。最显著的性格标签是认真，有着沉静内敛、善于思
                    考和研究的特质，作为本硕皆为新闻学专业的文科生，与文字为伴多年，文字功
                    底扎实，文字编辑、把关、策划能力强，想要以文字工作为基础，加入向往已久
                    的互联网行业。
                </p>
            </div>
            <!--专业技能-->
            <div class="professional-skills">
                <h4>专业技能</h4>
                <ol>
                    <li>熟悉Java语言，有web项目开发经验；</li>
                    <li>熟练使用JSP和Servlet；</li>
                    <li>熟悉常用Java web项目开发框架：MyBatis、Spring、SpringMVC；</li>
                    <li>熟悉MySQL数据库；</li>
                    <li>有良好的文档编写习惯和沟通能力；</li>
                </ol>

            </div>
            <!--项目实践-->
            <div class="project-practice">
                <h4>项目实践</h4>
                <h6>&nbsp;&nbsp;&nbsp;&nbsp;大一</h6>
                <ol>
                    <li>xxxxx</li>
                    <li>xxxxx</li>
                </ol>
                <h6>&nbsp;&nbsp;&nbsp;&nbsp;大二</h6>
                <ol>
                    <li>xxxxx</li>
                    <li>xxxxx</li>
                </ol>
                <h6>&nbsp;&nbsp;&nbsp;&nbsp;大三</h6>
                <ol>
                    <li>xxxxx</li>
                    <li>xxxxx</li>
                </ol>
            </div>
        </div>
    </div>
</body>
</html>

resume-css.css

html,body {
    margin: 0px;
    padding: 10px;
    }
.box{
    margin:0px auto; /*将div盒子居中*/
    width:595px;
    height:842px;
    background-color: blue;
    }
/*左侧内容*/
.left-box{
    background-color: #D9DADE;
    width: 33%;
    height: 100%;
    float:left;"
    }
.me-img{
    /*background-color: blue;*/
    text-align:center;
    margin-left:20%;
    width:60%;
    height:40%;
    }
.me-img img{
    margin-top:120px;
    width:110px;
    height:100px;
    }
.basic-information{
   /*background-color: blue;*/
    margin-left:30px;
    }
.honor-award{  /*荣誉奖励*/
    /*background-color: blue;*/
    margin:0px auto;
    margin-left:30px;
    width:80%;
    }
.honor-award table{
    margin-left:30px;
    }
 /*右侧内容*/
.right-box{
    background-color: #F0F0F0;
    width: 67%;
    height: 100%;
    float:right;
    }
.self-assessment{
    /*background-color: blue;*/
    padding-top:120px;
    margin-left:10px;
    margin-right:20px;
    }
.self-assessment p{
    font-size:10px;
    margin-left:30px;
    }
.professional-skills{
    /*background-color: blue;*/
    margin-left:10px;
    }
.professional-skills ol{
    /*background-color: blue;*/
   /* margin-left:10px;*/
    font-size:12px;
    }
.project-practice{
    background-color: blue;
    margin-left:10px;
    }
Bennett_gxd
关注
  • 23
    点赞
  • 踩
  • 306
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
学生个人简介html网页
11-24
简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局 简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局 简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局
个人简历模板——HTML样式配以css和自己的照片
06-01
找工作在即，看到同学都是从网上荡的word简历，比较单一，所以想自己做一个个性点的简历。做得laji，希望大家包涵.就是个HTML的简单简历。配上CSS样式。里面在加上音乐。自己的照片等等。
23.html+css+js网页设计实例/“个人”简历主题介绍/web前端期末大作业/
最新发布
A240307的博客
03-21 1153
本实例以“个人”简历为主题设计，是个非常实用的Web版求职简历，应用html+css+js，全屏页面，鼠标轮换，简洁明了，适合计算机专业求职的同学实用。供大家参考。 【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！有兴趣的联系我交流分享！
【博主推荐】HTML制作一个美观的个人简介网页（附源码）
热门推荐
xcLeigh
05-13 6万+
文章目录HTML制作一个美观的个人简介网页模块1（个人信息）示例图模块2（基本资料）示例图模块3（项目经验）示例图模块4（专业技能）示例图模块5（工作经历）示例图模块6（自我评价）示例图模块7（联系方式）示例图整体示意图源码地址 HTML制作一个美观的个人简介网页 利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web 模块1（个人信息）示例图 用于展示个人简介主题信息，采用背景图+文字的效果 <div class=
个人简历html+css网页
11-06
主要是个人简历的网站网页前端，自己亲手写的，页面炫酷
用纯html写个个人简历！模版分享啦！！！
qqhxmdq的博客
09-19 2252
3. 初学程序员的码农小朋友们，可以学学网页制作，在这个框架横行的世代，学好基础是一件多么可贵的事情。比如我们的时间轴，统计图，都可以学它一学！2. 程序员可以自己加些后台，做个个人简历制作网站，圆自己一个站长梦，是不是还能增加点睡后收入？1. 改一改后台显示内容，换成自己的信息。那，它就是一个美呆了的个人简历。仅仅一个html页面，完全没有乱七八糟，保证学的明明白白。个人照片，简介，经历时间轴，个人技能统计，个人情况说明。那么，这么优雅的模板在哪儿下载呢？那么，这样的模板到底有什么用呢？
html制作个人简历
m0_64242574的博客
05-18 2万+
前几天我为大家介绍了些html的标签，利用这些标签咱们可以简单制作个简历，来巩固知识。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body background="[email protected]">
html制作好看的个人简历(附源码)
xcLeigh
03-29 2万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
利用html+css制作个人简历
WeiComp
04-02 1万+
使用html和css，制作一份个人简历（内容比较基础，上手容易）
用html制作一个简历
QwwwQxx的博客
03-20 7213
【代码】用html制作一个简历。
html使用table标签制作个人简历
October_27的博客
07-30 4111
个人简历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>resume</title> <style> *{ margin: 0; padding: 0; } .table1{ marg...
毕业设计，个人求职简历博客模板源码，HTML+CSS+JS
03-16
这是一款个人求职简历博客模板源码，下载后修改index.html内相关信息，上传至服务器后台即可使用，技术是HTML+CSS+JS，可以作为毕业设计
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！
12-27
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！响应式布局，支持移动端正常显示。
个人简历(html+css+js)
07-10
大学生耗时一个月制作的个人HTML网页设计作品，采用了DIV CSS布局。整个网页使用CSS设置了精美的背景图片，给页面增添了独特的视觉效果。网页设计精美，包含多个排版布局，展示了学生出色的网页制作水平。通过巧妙地...
静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip
02-09
静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip 95分以上必过项目，代码完整下载即用，确保可以运行。 静态网页设计期末大作业HTML+CSS的Web前端静态个人简历网页设计.zip 95分以上必过项目，...
课程作业基于HTML+CSS制作个人简历的源码+文档说明+页面截图
01-20
web前端个人简历 介绍 web前端个人简历：一个追梦在前端路上的小白 相关技术 particles.js粒子插件 Handlebars.js模板引擎 在线预览 web前端个人简历：一个追梦在前端路上的小白 使用说明 修改src/config.js内容...
web前端开发html+css+js免费下载（设计作品成品）
12-31
里面运用了html还有JavaScript，css，js等功能。可以实现上传照片功能，注册登录功能，播放视频功能等等。作为期末答辩可以拿到90分以上。
静态网页设计期末大作业HTML+CSS的精美个人简历网页（95分以上必过项目）.zip
02-09
静态网页设计期末大作业HTML+CSS的精美个人简历网页（95分以上必过项目）.zip 代码完整确保可以运行，下载即用无需修改，亲测高分必过项目。 静态网页设计期末大作业HTML+CSS的精美个人简历网页（95分以上必过项目...
Web大学生网页作业成品 基于HTML+CSS+JavaScript个人简历介绍 学生个人网站作业设计代做 学生个人网页设计作品
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
个人简历html+css网页代码
03-03
很高兴回答您的问题！以下是一个简单的HTML和CSS网页示例： HTML文件： ```html <!DOCTYPE html> <html> <head> <title>我的个人简历</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>我的个人简历</h1> </header> <section> <h2>个人信息</h2> <p>姓名：张三</p> <p>年龄：25岁</p> <p>学历：本科</p> </section> <section> <h2>工作经历</h2> <ul> <li>2019-2021：某公司前端工程师</li> <li>2017-2019：某公司实习生</li> </ul> </section> <section> <h2>技能</h2> <ol> <li>HTML/CSS</li> <li>JavaScript</li> <li>React</li> </ol> </section> <footer> <p>联系方式：xxx-xxxx-xxxx</p> </footer> </body> </html> ``` CSS文件： ```css header { background-color: #0077CC; color: white; padding: 20px; text-align: center; } section { margin-top: 30px; } h1, h2 { text-align: center; } ul, ol { padding-left: 30px; } footer { margin-top: 50px; text-align: center; } ``` 这是一个简单的个人简历网页，使用HTML和CSS进行设计和布局。在HTML中，我们使用标记语言来定义页面的结构和内容，包括标题、段落、列表等。在CSS中，我们使用样式来定义页面的外观和布局，包括颜色、字体、间距等。 希望这个例子能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值