菜单 搜索
首页 前端知识 HTML CSS实现个人简历

HTML CSS实现个人简历

2024-03-26 08:03:56 前端知识 前端哥 56 917 我要收藏

刚学完CSS，写个简历，有点丑的哈哈哈，主要是为了kunkun写的。

jianli.html如下：（图片自己替换啊）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历制作my Dong</title>
    <link rel="stylesheet" href="jianli.css">
</head>
<body>
 
<!-- 先定一个大的容器 -->
<div class="container">
    <div class="topline" >
        <div class="top_left" ></div>
        <div class="top_right">
            <p>个人简历</p>
        </div>
    </div>
 
    <div class="mid">
 
        <div class="ikun" >
            <img src="images/ikun.png" >
            <div class="ikun_mid">
                <h3><span>蔡徐坤</span>
                    <br>
                    <p style="color: #4088A5">求职意向:个人练习生</p></h3>
            </div>
 
            <div class="ikun_right">
                <div class="ikun_r1">
                    <p>24岁</p>
                    <img src="images/1.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>
 
                <div class="ikun_r2">
                    <p>15812345678</p>
                    <img src="images/2.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>
 
                <div class="ikun_r3">
                    <p>1632461234@qq.com</p>
                    <img src="images/3.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>
 
                <div class="ikun_r4">
                    <p>湖南省长沙市</p>
                    <img src="images/4.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>
 
            </div>
 
        </div>
 
        <div class="edu">
            <h3 style="margin-bottom: -8px;"><span style="border-bottom: 3px solid black">教育背景</span></h3>
            <hr>
            <div class="normal">
                <p>2002.07~2006.07</p>
                <p style="margin-left: 100px">中南大学</p>
                <p style="margin-left: 100px">篮球专业（专科）</p>
            </div>
            <p style="margin-top: -10px">主修课程：唱、跳、RAP、打篮球</p>
        </div>
 
 
        <div class="work">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">实习经验</span></h3>
            <hr>
            <div class="normal">
                <p>2012.04~至今</p>
                <p style="margin-left: 100px">中南哇唧唧哇本科生院</p>
                <p style="margin-left: 100px">预备Idol</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>主修课程：唱、跳、RAP、打篮球</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
            <div class="normal">
                <p>2010.03~2012.03</p>
                <p style="margin-left: 100px">中南哇唧唧哇研究生院</p>
                <p style="margin-left: 100px">预备Idol研究生</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>主修课程：唱、跳、RAP、打篮球</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
            <br>
 
        </div>
 
        <div class="school">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">校园经历</span></h3>
            <hr>
            <div class="normal">
                <p>2009.03~2011.06</p>
                <p style="margin-left: 100px">中南大学</p>
                <p style="margin-left: 100px">校园形象大使</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>带领自己的团队完成练习计划；</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
        </div>
 
        <div class="tech">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">技能证书</span></h3>
            <hr>
                <p>中南大学校园十佳歌手；</p>
                <p>中南大学舞蹈最佳solo；</p>
                <p>中南大学篮球比赛最有价值球员MVP。</p>
        </div>
 
        <div class="self">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">自我评价</span></h3>
            <hr>
            <p>
                大家好，我是练习时长两年半的个人练习生，我深耕中南十余载，历尽千辛万苦，终学得一技之长，希望我能为我的粉丝们带来快乐，
                跟着我左手右手一个慢动作，右手左手慢动作重播。
            </p>
             </div>
 
    </div>
    <div class="topline" >
        <div class="top_left1" ></div>
        <div class="top_right">
        </div>
    </div>
 
</div>
</body>
</html>
复制

jianli.css如下： 

/* 容器为栅格布局 */
.container{
    display: grid;
    box-shadow: 0px 10px 50px 10px lightgrey;  /*简历周围阴影*/
    width: 900px;
    margin: 100px auto;
    /*background: red;*/
 
}
/* 简历上方线条 */
.topline{
    display: flex;
    flex-direction: row;
}
.top_left{
    background-color: #248CB1;
    height: 30px;
    width: 30px;
    /*transform: translate(-30px,0);  !*  向左偏移  *!*/
}
.top_left1{
    background-color: #248CB1;
    height: 30px;
    width: 200px;
    /*transform: translate(-30px,0);  !*  向左偏移  *!*/
}
 
.top_right{
    background-color: black;
    height: 30px;
    width: 100%;
    /*transform: translate(-30px,0);*/
    margin-bottom: 20px;
}
.top_right p{
    transform: translate(0,-10px);
    color: whitesmoke;
    font-weight: bold;  /*  粗体  */
}
 
/*   mid  */
.mid{
    margin-left: 30px;
}
 
 
/*照片*/
.ikun{
    display: flex;
    flex-direction: row;
    align-items: end;
}
.ikun_mid{
    margin-left: 50px;
    display: flex;
    flex-direction: column;
 
}
.ikun_mid span{
    font-size: 40px;
}
 
.ikun_right{
    display: flex;
    flex-direction: column;
    margin-left: 230px;
    align-items: flex-end;
}
.ikun_r1,.ikun_r2,.ikun_r3,.ikun_r4{
    display: flex;
    flex-direction: row;
    margin-bottom: -15px;
}
 
.normal{
    display: flex;
    flex-direction: row;
    font-weight: bold;
}
复制

效果如下： 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4138.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

HTML期末大作业-小米商城，快手前端面试经验

2024-04-17 21:04:45

如何在VSCode中将html文件打开到浏览器

2024-04-17 21:04:13

【VUE】Vue2菜单搜索并跳转指定页面

2024-04-17 21:04:11

HTML中的自适应布局

2024-04-17 21:04:02

Web前端课程——HTML，CSS

2024-04-17 21:04:39

前端学习系列之html

2024-04-17 21:04:38

css3之动画渲染，【最全总结】

2024-04-17 21:04:19

打造经典游戏：HTML5与CSS3实现俄罗斯方块

2024-04-17 21:04:17

css实现文字大小自适应

2024-01-30 10:01:36

2024 CSS 水平垂直居中方式汇总，全到没朋友（锤爆面试官系列）

2024-04-17 21:04:08

广告位招租：QQ85750956
大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！