小练习 HTML+CSS之简历设计

最新推荐文章于 2024-05-12 03:14:35 发布
最新推荐文章于 2024-05-12 03:14:35 发布
阅读量963 收藏 8
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54284382/article/details/127866668
版权

  • 简介
    设置这个简历我主要用的盒子模型，然后外部链接的Css样式，用的工具是WebStorm，个人比较喜欢这个工具，当然还有其他的工具，简历里用到的矢量图标是我在老师推荐的iconfont，当然也可以用ps自己去设计。

  • 简历图片
    在这里插入图片描述

  • 程序结构

  • img文件夹里主要放的我简历里的用到的一些小图标和背景照片这些

  • YcReume.css里面主要是对界面的美化

  • YcReume.html是对框架的设计

  • 在这里插入图片描述

  • CSS的代码展示

.main{
    height: 930px;
    width: 710px;
    background-color: #ff8500;
    margin:0 auto;
    background-image: url("img/bj.jpg");
}
.lf{
    height: 930px;
    width: 300px;

    float: left;
}
/*左边上部*/
.lf_top{
    height:350px;
    width: 300px;
    margin:0 auto;
}
/*头像*/
.lf_img{
    height: 128px;
    width:108px ;
    background-image: url("img/yc.jpg") ;
    background-size: 100% auto;
    margin:0 auto;
    border-radius: 50%;

}
.lf_top1{
    font-family: "方正粗黑宋简体";
    height: 34px;
    width: 237px;
    background-image: url("img/年龄.png");
    background-repeat: no-repeat;
    text-indent: 4em;
    margin-left: 50px;
    margin-top: 10px;
    font-weight: bold;
    line-height: 30px;
}
.lf_top2{
    font-family: "方正粗黑宋简体";
    height: 34px;
    width: 237px;
    background-image: url("img/地址.png");
    background-repeat: no-repeat;
    text-indent: 4em;
    margin-left: 50px;
    margin-top: 5px;
    font-weight: bold;
    line-height: 30px;
}
.lf_top3{
    font-family: "方正粗黑宋简体";
    height: 34px;
    width: 237px;
    background-image: url("img/抖音.png");
    background-repeat: no-repeat;
    text-indent: 4em;
    margin-left: 50px;
    margin-top: 5px;
    font-weight: bold;
    line-height: 30px;
}
.lf_top4{
    font-family: "方正粗黑宋简体";
    height: 34px;
    width: 237px;
    background-image: url("img/电话.png");
    background-repeat: no-repeat;
    text-indent: 4em;
    margin-left: 50px;
    margin-top: 5px;
    font-weight: bold;
    line-height: 30px;
}
.lf_top5{
    font-family: "方正粗黑宋简体";
    height: 34px;
    width: 237px;
    background-image: url("img/邮箱.png");
    background-repeat: no-repeat;
    text-indent: 4em;
    margin-left: 50px;
    margin-top: 5px;
    font-weight: bold;
    line-height: 30px;
}
/*左边下部*/
.lf_cen{

    height: 550px;
    width:300px;
}
.lf_cen1{
    font-family: "方正粗黑宋简体";
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/自我介绍.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    background-color: rgba(71, 10, 131, 0.3);
    border-radius: 8%;
}
.lf_cen11{
    margin-left: 30px;
    text-indent: 2em;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
}
.lf_cen2{
    font-family: "方正粗黑宋简体";
    background-color: rgba(71, 10, 131, 0.3);
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/专业技能.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    border-radius: 8%;
}
.lf_cen22{

    margin-left: 30px;
    font-family: "Cooper Black";
    margin-top: 10px;
    margin-bottom: 10px;
}
.lf_cen3{
    font-family: "方正粗黑宋简体";
    background-color: rgba(71, 10, 131, 0.3);
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/荣誉.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    border-radius: 8%;
}
.lf_cen33{
    margin-left: 30px;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
}
.lf_cen4{
    font-family: "方正粗黑宋简体";
    background-color: rgba(71, 10, 131, 0.3);
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/兴趣爱好.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    border-radius: 8%;
}
.lf_cen44{
    margin-left: 30px;
    text-indent: 2em;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
}
/*右边顶部*/
.rg_top{
    height: 200px;
    width: 400px;
    background-color: rgba(40, 152, 155, 0.3);
    float: right;
    margin-left: 10px;
    border-radius:0 8%;
}
.rg_top1{
    height: 100px;
    width: 100px;
    margin: 0 auto;
    background-image: url("img/个人求职信息.png");
    background-size: 100% auto;
}
.rg_top2{
    margin-left: 175px;
    font-family: "方正粗黑宋简体";
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30px;
}
.rg_top3{
    margin-left: 100px;
    font-family: "方正粗黑宋简体";
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 20px;
}
/*左边底部*/
.rg_bot{
    height: 720px;
    width: 400px;
    background-color: rgba(40, 152, 155, 0.3);
    float: right;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 8%;
}
.rg_bot1{
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/校园荣誉.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    background-color: rgba(71, 10, 131, 0.3);
    font-family: "方正粗黑宋简体";
    border-radius: 0 8% 0;
}
.rg_bot11{
    margin-left: 30px;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.rg_bot2{
    font-family: "方正粗黑宋简体";
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/校园风景.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    background-color: rgba(71, 10, 131, 0.3);
    border-radius: 8%;
}
.rg_bot22{
    margin-left: 30px;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.rg_bot3{
    font-family: "方正粗黑宋简体";
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/个人技能.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    background-color: rgba(71, 10, 131, 0.3);
    border-radius: 8%;
}
.rg_bot33{
    margin-left: 30px;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.rg_bot4{
    font-family: "方正粗黑宋简体";
    height: 40px;
    width:237px;
    margin-top: 5px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    background-image: url("img/能力评估.png");
    background-repeat: no-repeat;
    margin-left: 30px;
    background-color: rgba(71, 10, 131, 0.3);
    border-radius: 8%;
}
.rg_bot44{
    margin-left: 30px;
    font-family: "方正粗黑宋简体";
    margin-top: 10px;
    margin-bottom: 10px;
}
p{
    font-size: 16px;
    font-weight: bold;
}
  • HTML代码展示
  • `
个人简历
22岁
上海
嘉年华
134******8990
7324872384@qq.com
自我介绍
对事物有敏锐的洞察力，能很好得与人沟通，具有团队合作精神；对负责的工作会付出全部精力和 热情，制定缜密计划，力争在最短时间内将目标达成；喜欢挑战.
专业技能
Java   
Mysql
PS      
PHP   
web   
荣誉奖励
2019年      国家励志奖学金
2020年      三好学生
2020年      一等奖学金
兴趣爱好
个人兴趣广泛，喜欢看电影，看书，听歌，喜欢旅游，喜欢的球类有羽毛球。
`
  • 结语
    HTML中的代码因为太多没有弄完，需要的可以私信找我，我发给你，有不懂得可以私信，和大家一起学习，努力成为大神。
小杨仁
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS简历模版
HieTon的博客
09-22 1382
一个没有技术含量的简历模板
HTML+CSS的项目练习
Cherry_Zj的博客
05-16 1375
效果图： HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>polo360练习</title> <!--引用reset.css用来清除浏览器的默认样式--> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <!--引入p
个人简历模板——HTML样式配以css和自己的照片
06-01
找工作在即，看到同学都是从网上荡的word简历，比较单一，所以想自己做一个个性点的简历。做得laji，希望大家包涵.就是个HTML的简单简历。配上CSS样式。里面在加上音乐。自己的照片等等。
使用html和css实现个人简历表单的制作
最新发布
qq_49370210的博客
05-12 970
Ⅰ、表格整体的边框为1像素，单元格间距为0，表格中前六列列宽均为100像素，第七列 为200像素，表格整体在页面上居中显示；Ⅲ、第一行合并了7列；第六 行合并了六列；照片的单元格合并了四行。Ⅱ、前五行的行高为40像素，第六行的行高为80像素，排列方式均为居中显示；CSS文件{style.css}
HTML+CSS实现个人简历
flyailin的博客
10-18 9438
刚学联手的
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
HTML +CSS 制作个人简历
qq_42782011的博客
10-21 6139
原创不易，你们的支持是我最大的原创动力！
利用html+css制作个人简历
WeiComp
04-02 1万+
使用html和css，制作一份个人简历（内容比较基础，上手容易）
纯HTML和CSS编写的漂亮的个人简历
weixin_33811539的博客
03-18 4889
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body> <head><style> html,...
html-css:TEKcamp html-css回购
03-25
练习目标：演示对HTML和CSS的理解。 持续时间：1天 练习步骤/说明： 创建一个关于您自己的多页HTML网站。 包括以下这些： 一个包含3到4个简短句子，4到6个爱好列表以及您自己的形象的个人简历。 您最喜欢的收藏...
计算机专业个人简历-(1).doc
12-16
* 熟练运用Html、JavaScript、Ajax、DWR、DIV+CSS、JfreeChart图形报表 * 能熟练运用Eclipse、PL/SQL、PowerDesigner、photoshop及Dreamweave等开发工具 * 熟练操作Lunix操作系统 * 熟练操作SVN版本管理工具 * 了解...
排版布局设计技巧_对比+对齐+重复+亲密性(第3版)
06-29
实际上，设计不仅仅是专业设计师的事情，比如，我是从事前端的开发的，虽然绝大部分时间是和HTML、CSS、JavaScript等这些代码打交道，但我需要维护自己的blog，需要做自己的幻灯片，更重要的是需要能够理解且欣赏...
求职网站设计简历，对初学者的操作锻炼使用
06-22
总的来说，设计一个求职网站，对于初学者来说是一次全面的技术锻炼，涵盖了前端开发（HTML、CSS、JavaScript）、后端开发（如PHP、Python、Java）、数据库管理（MySQL、MongoDB等）、服务器配置、用户体验设计（UX/...
2018IFE:2018IFE学习
04-28
2018IFE零基础学院练习一：简历课程 day2 ~ day4, day16练习二：三种简历练习三：学习布局练习四：来做一个漂亮的网站练习五：复杂页面实现课程 作业练习六：“如果”可以“重来”课程 作业练习七：找到那个DOM课程 ...
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
热门推荐
xcLeigh
12-16 8万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
html5设计个人简介页面,HTML5创意设计师个人简历响应式模板
weixin_39710249的博客
06-03 1350
【实例简介】【实例截图】【核心代码】HTML5创意设计师个人简历响应式模板├── assets│ ├── css│ │ ├── LineIcons.min.css│ │ ├── tam.css│ │ └── vendor.css│ ├── fonts│ │ └── LineIcons.ttf│ ├── images│ │ ├── about.jp...
HTML实训大作业基于HTML+CSS+JavaScript个人简历介绍 学生个人网页设计作品
而风不止
01-07 477
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨
html+css的响应式个人简历
jiaxiaovi的博客
05-14 7191
html+css响应式个人简介
html+css+网页设计
12-14
HTML和CSS是网页设计的基础，HTML用于定义网页的结构和内容，CSS用于定义网页的样式和布局。下面是一个简单的HTML和CSS的例子： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </nav> </header> <main> <section> <h2>内容标题1</h2> <p>内容1</p> </section> <section> <h2>内容标题2</h2> <p>内容2</p> </section> </main> <footer> <p>版权信息</p> </footer> </body> </html> ``` CSS代码： ```css body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { font-size: 24px; margin-bottom: 10px; } p { line-height: 1.5; } ``` 上面的代码定义了一个简单的网页，包括网页标题、导航、内容和页脚。CSS代码定义了网页的样式和布局，包括字体、颜色、背景色、间距等等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值