前端-个人resume练习

最新推荐文章于 2023-06-21 16:45:39 发布
最新推荐文章于 2023-06-21 16:45:39 发布
阅读量858 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42718701/article/details/107618705
版权

个人resume练习

最终界面效果

参考网页

https://rscard.px-lab.com/startuper/

个人制作

代码呈现

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Me的个人简历</title>
    <link rel="stylesheet" href="./a.css">
</head>

<body>
    <div class="topNavBar">
        <div class="topNavBar-inner clearfix">
            <a href="#" class="logo" alt="logo">
                <span class="rs">RS</span><span class="card">card</span>
            </a>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="#">关于</a>
                    </li>
                    <li>
                        <a href="#jineng">技能</a>
                    </li>
                    <li>
                        <a href="#zuopin">作品</a>
                    </li>
                    <li>
                        <a href="#">博客</a>
                    </li>
                    <li>
                        <a href="#">日历</a>
                    </li>
                    <li>
                        <a href="#">联系方式</a>
                    </li>
                    <li>
                        <a href="#">其他</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <main>
        <div class="userCard">
            <div class="pictureAndText clearfix">
                <div class="picture">
                    <img src="./img/avatar.jpg" width="299" height="347" alt="头像">
                </div>
                <div class="text">
                    <span class="welcome">Hello
                        <span class="triangle"></span>
                    </span>
                    <h1>靳文杰</h1>
                    <p>前端开发工程师</p>
                    <hr>
                    <dl>
                        <dt>年龄</dt>
                        <dd>21</dd>
                        <dt>所在城市</dt>
                        <dd>西安</dd>
                        <dt>邮箱</dt>
                        <dd>j_861142@163.com</dd>
                        <dt>手机</dt>
                        <dd>15502979297</dd>
                    </dl>
                </div>
            </div>
            <footer class="media">
                <a href="#">
                    <img src="./png/github.png" class="icon" alt="#">
                </a>
                <a href="#">
                    <img src="./png/ins.png" class="icon" alt="#">
                </a>
                <a href="#">
                    <img src="./png/qq.png" class="icon" alt="#">
                </a>
                <a href="#">
                    <img src="./png/weibo.png" class="icon" alt="#">
                </a>
                <a href="#">
                    <img src="./png/weixin.png" class="icon" alt="#">
                </a>
            </footer>
        </div>
        <p class="downloadResume-wrapper">
            <a href="./resume.pdf" class="downloadResume" target="_blank" download>下载 PDF 简历</a>
        </p>
        <p class="selfIntroduction">
            靳文杰，计算机科学与技术1701班，1998年9月，共青团员。<br> 大一学年成绩在专业排名第8名，大二学年成绩在专业排名第1名。
            <br> 荣获2017-2018学年国家励志奖学金、2018-2019学年国家奖学金等。
        </p>
    </main>
    <section class="skills">
        <a name="jineng"></a>
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                <h3>
                    HTML 5 &amp; CSS 3
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 10%;"></div>
                </div>
            </li>
            <li>
                <h3>
                    JavaScript
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 40%;"></div>
                </div>
            </li>
            <li>
                <h3>
                    jQuery
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 60%;"></div>
                </div>
            </li>
            <li>
                <h3>
                    Vue
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 90%;"></div>
                </div>
            </li>
            <li>
                <h3>
                    React
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 20%;"></div>
                </div>
            </li>
            <li>
                <h3>
                    HTTP
                </h3>
                <div class="progressBar">
                    <div class="progress" style="width: 40%;"></div>
                </div>
            </li>
        </ol>
    </section>
    <section class="portfolio">
        <a name="zuopin"></a>
        <h2>作品集</h2>
        <nav>
            <ol class="clearfix">
                <li id="portfolio1">所有</li>
                <li id="portfolio2">框架</li>
                <li id="portfolio3">原生 JS &amp; CSS</li>
            </ol>
            <div id="portfolioBar" class="bar state-1">
                <div class="bar-inner"></div>
            </div>
        </nav>
        <script>
            portfolio1.onclick = function () {
                portfolioBar.className = 'bar state-1'
            }
            portfolio2.onclick = function () {
                portfolioBar.className = 'bar state-2'
            }
            portfolio3.onclick = function () {
                portfolioBar.className = 'bar state-3'
            }
        </script>
        <div class="works" style="height: 576px;">
            <div class="big" style="top: 0px; left: 0px;">
                <img src="./jpg/111.JPG" alt="作品1">
            </div>
            <div class="small" style="top: 0px; left: 644px;">
                <img src="./jpg/222.JPG" alt="作品2">
            </div>
            <div class="small" style="top: 298px; left: 644px;">
                <img src="./jpg/333.JPG" alt="作品3">
            </div>
        </div>
    </section>
</body>

</html>

a.css

body {
    background: #EFEFEF;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

hr {
    height: 0;
    border: none;
    border-top: 1px solid #DEDEDE;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.topNavBar nav>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topNavBar {
    /*
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
    padding:上 右 下 左
    */
    padding: 20px 0 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.topNavBar-inner {
    padding: 0 16px;
}

.topNavBar nav {
    padding-top: 7px;
    padding-bottom: 2.19px;
}

.topNavBar nav>ul>li {
    float: left;
    margin-left: 17px;
    margin-right: 17px;
}

.topNavBar nav>ul>li>a {
    font-size: 12px;
    color: #B7B7B7;
    font-weight: bold;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
}

.topNavBar nav>ul>li>a:hover {
    border-bottom: 3px solid #e06567;
}

.topNavBar a {
    float: left;
}

.topNavBar nav {
    float: right;
}

.topNavBar .logo {
    font-size: 24px;
    font-family: "Arial Black";
    padding-top: 3px;
    padding-bottom: 4px;
}

.topNavBar .logo .rs {
    margin-right: 4px;
    color: #E6696A;
}

.topNavBar .logo .card {
    color: #9A9DA2;
}

.banner {
    height: 515px;
    background-image: url(./img/rs-cover.jpg);
    background-position: center center;
    background-size: cover;
}

.banner .mask {
    height: 515px;
    background-color: rgba(0, 0, 0, 0.8);
}

.userCard {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
}

.userCard .welcome {
    background: #E6686A;
    color: white;
    display: inline-block;
    /*
    width: 70px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    */
    padding: 3.5px 16.5px;
    line-height: 22px;
    position: relative;
    margin-bottom: 10px;
}

.userCard .welcome .triangle {
    display: block;
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #E6686A;
    border-top-width: 0px;
    position: absolute;
    left: 4px;
    top: 100%;
}

.userCard .picture {
    float: left;
}

.userCard .text {
    float: left;
    margin-left: 65px;
    width: 470px;
}

.userCard .text h1 {
    margin-top: 18px;
}

.userCard .text hr {
    margin: 20px 0;
}

.userCard .pictureAndText {
    padding: 50px;
}

.userCard dl dt,
.userCard dl dd {
    float: left;
    padding: 5px 0;
}

.userCard dl dt {
    width: 30%;
    font-weight: bold;
}

.userCard dl dd {
    width: 70%;
    color: #9da0a7;
}

.userCard>footer.media {
    background: #E6686A;
    text-align: center;
}

.userCard>footer.media>a {
    display: inline-block;
    width: 60px;
    line-height: 30px;
    padding: 15px 0;
    border-radius: 50%;
    margin: 8px;
}

.userCard>footer.media>a:hover {
    background: #CF5D5F;
}

.icon {
    width: 30px;
    height: 30px;
    overflow: hidden;
    vertical-align: top;
}

body>main {
    margin-top: -340px;
}

body>main .downloadResume-wrapper {
    text-align: center;
}

body>main .downloadResume {
    font-size: 14px;
    line-height: 16px;
    padding: 21px 55px;
    border: 1px solid #CDCFD1;
    background: #EFEFEF;
    display: inline-block;
    border-radius: 5px;
    color: #3d4451;
    font-weight: bold;
    margin: 32px 0;
    transition: box-shadow 0.2s;
}

body>main .downloadResume:hover {
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.2);
}

.selfIntroduction {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: cursive;
    line-height: 1.8;
    font-size: 18px;
    font-weight: 900;
}

section.skills,
section.portfolio {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

section.skills>h2,
section.portfolio>h2 {
    text-align: center;
    color: #3d4451;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
}

section.skills h3 {
    font-size: 14px;
    line-height: 1.1;
    padding-right: 40px;
}

section.skills>ol {
    background: white;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
    padding: 42px 50px 0;
    margin-top: 30px;
}

section.skills>ol>li {
    float: left;
    width: 48%;
    box-sizing: border-box;
}

section.skills>ol>li:nth-child(even) {
    float: right;
}

section.skills .progressBar {
    height: 5px;
    background: #fae1e1;
    border-radius: 9px;
    margin: 4px 0 40px;
}

section.skills .progressBar>.progress {
    height: 100%;
    background: #e6686a;
    width: 70%;
    border-radius: 9px;
}

section.portfolio {
    text-align: center;
    margin-bottom: 100px;
}

section.portfolio>nav {
    text-align: center;
}

section.portfolio>nav>ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

section.portfolio>nav>ol>li {
    float: left;
    margin-left: 40px;
    cursor: pointer;
}

section.portfolio>nav>ol>li:nth-child(1) {
    margin-left: 0;
}

section.portfolio>nav {
    display: inline-block;
    vertical-align: top;
    margin-top: 32px;
}

section.portfolio>nav .bar {
    height: 5px;
    background: white;
    margin-top: 5px;
    margin-bottom: 28px;
    border-radius: 9px;
}

section.portfolio>nav .bar-inner {
    height: 100%;
    background: #E6686A;
    width: 10%;
    border-radius: 9px;
    transition: all 0.3s;
}

section.portfolio>nav .bar.state-1 .bar-inner {
    margin-left: 0px;
    width: 33px;
}

section.portfolio>nav .bar.state-2 .bar-inner {
    margin-left: 73px;
    width: 33px;
}

section.portfolio>nav .bar.state-3 .bar-inner {
    margin-left: 143px;
    width: 107px;
}

section.portfolio .works {
    position: relative;
}

section.portfolio .works>.big,
section.portfolio .works>.small {
    position: absolute;
}

完整代码素材下载

完整代码已经上传至我个人的csdn资源中
可以进入我的个人csdn进行下载2020.01.14resume.rar文件
下载链接：2020.01.14resume.rar

return str=xi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
resume
03-27
NULL 博文链接：https://littlekeke.iteye.com/blog/1176275
神经网络训练中resume的使用
weixin_56607254的博客
07-14 1419
神经网络训练中resume的使用
caffe训练resume
weixin_33980459的博客
09-16 153
MODEL=${EXP}/model/${NET_ID}/pspnet101_VOC2012.caffemodel SNAPSHOT=${EXP}/model/${NET_ID}/train_iter_7000.solverstate CMD="${CAFFE_BIN} train \ --solver=${CONFIG_DIR}/solver.p...
if args.resume:从断点处开始继续训练模型——How to resume training?（Faster RCNN）
Yale-曼陀罗
03-02 6326
if args.resume: load_name = os.path.join(output_dir, 'faster_rcnn_{}_{}_{}.pth'.format(args.checksession, args.checkepoch, args.checkpoint)) print("loading checkpoint %s" % (load_name)) checkpoint = torch.load(load_name) args.session
应届生求职简历HTML模板
热门推荐
皮小孩的博客
02-17 1万+
优秀的简历需要具备哪些要素？1、逻辑清晰、有条有理。HR面临的动辄几百上千份简历，简历需要在5秒内让HR能够get到所有重要信息。2、重点突出，简历有亮点用成绩说话！奖学金，荣誉奖项等内容必不可少。3、目标明确，直戳需求有匹配的技能证书，但是不能贪多，把握住重点。4、研究公司，做到知己知彼明确你应聘的岗位是什么？你的公司需要什么样的人？5、排版简洁，有一定个人特色排版色彩简单，低饱和度，简历色彩不能超过3种。 本文教你使用html+css做一个简洁的简历模板，里面的内容自己更改。 网页效果（适配手机和电脑端
frontend-nanodegree-resume:这是Udacity“前端-纳米度-简历”的练习形式
05-18
前端纳米度恢复 这是来自Udacity的“ frontend-nanodegree-resume”练习 为了建立这个网站，我使用了HTML5，CSS3，boostrap，Google Maps API，JASON，jQuery 查看现场演示站点，为： :
udacity-frontend-resume:Udacity前端简历项目2
07-07
在“udacity-frontend-resume:Udacity前端简历项目2”中，我们将探讨如何使用JavaScript和JSON技术来创建一个动态、交互式的个人简历。这是一个常见的前端开发练习，旨在提升开发者利用这两种关键技术构建Web应用...
online-responsive-resume:对Udacity的前端纳米学位恢复项目的个人看法
05-04
这个名为"online-responsive-resume"的项目是基于Udacity的前端Web开发纳米学位课程的一个练习，旨在帮助学生掌握创建动态、适应不同设备的网页简历的能力。以下是对这个项目及其涉及的技术知识点的详细解析。 首先...
interactive-resume
06-21
总的来说，"interactive-resume"项目是一个利用JavaScript技术构建的个性化展示工具，它将传统简历转变为一个交互式的、体现个人技术和成就的平台。通过深入学习和理解这个项目，不仅可以提升Web开发技能，也能为...
P2-Interactive-Resume:UDACITY P2-交互式简历
06-18
【标题】"P2-Interactive-Resume:UDACITY P2-交互式简历"是一个项目，源自UDACITY的课程，旨在创建一个动态、交互式的个人简历。这个项目利用了JavaScript技术来提升用户体验，使得用户能够更好地展示自己的技能和...
html-resume:单页简历模板，使用HTML和CSS完全排版
05-08
html-简历 仅用HTML和CSS完成的单页简历模板，可以通过网络浏览器的“打印到PDF”功能将其呈现为PDF，从而制作出美观，时尚，专业且易于打印的简历。 请参阅我的生活示例： ： 由于简历仅使用HTML和CSS排版，因此可以高度自定义（例如，如果要“目标”部分，只需复制粘贴一些HTML元素），并且不需要专有软件。 您只需要一个文本编辑器和一个Web浏览器（请参阅下面的兼容性部分）。 哦，也许有一些CSS方面的中级知识。 而且，由于它是Apache许可协议的开源软件，因此您可以（并鼓励您）创建自己的微调模板并与他人共享。 在找到该项目的背景故事。 兼容性和已知问题/局限性 我仅在macOS 10.13（High Sierra）的最新版本的Firefox（撰写本文时为56）和Google Chrome（61）上测试了该项目。 我打算支持其他浏览器/平台（例如Windows上的I
resume.html
08-03
html的相关知识，总结了html的基础语言，基础用法，分了几个小模块简单描述了html中的相关知识，重点是块元素和行内元素的基本特性，掌握他们的用法和使用搞得条件，正确的书写html语言，搭建页面框架，为css的学习做好充分的准备。 表格的充分应用
HTML简历模板(resume).rar
06-26
这是一个简单的HTML简历模板，可以通过修改index.html里的内容和更换素材，形成自己的简历，给自己的求职加分。
resume_create:创建简历的应用程序，在 JS 中
06-17
resume_create 在 JS 中创建简历的应用程序。 正在施工:construction:。 应用程序 - 源。 该项目由 grunt'om 构建。 编译版本在这里 -
timer.jquery：jQuery计时器：StartStopResume在任何HTML元素内删除漂亮的计时器
02-04
jQuery Timer插件 轻巧，经过测试 jQuery漂亮计时器插件 在任何HTML元素内启动，暂停，恢复和删除计时器。 在特定时间后或定期获取通知。 在计时器运行时单击并编辑时间！ 在同一页面上启用多个计时器。 | 入门 使用此URL直接从CDNjs将插件加载到脚本标签中（加载jQuery之后）。 https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js 如果您使用凉亭， bower install timer.jquery 另外，您可以jQuery计时器插件并将其相对于HTML文件
html创建简历
怪咖`Blog
06-21 3411
html创建简历
html使用table标签制作个人简历
October_27的博客
07-30 4261
个人简历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>resume</title> <style> *{ margin: 0; padding: 0; } .table1{ marg...
我的第一份HTML简历
IT_lifestyle的博客
06-27 978
HTML算是比较好入门的语言，学习了那么多，是不是会感觉到手痒，现在我们利用HTML打造自己的一份网页版简历。 我们看到网页中有很多酷炫的动画特效，这些都需要用到很多深入地知识，但是对于像简历这种静态的网页，常规的标签和属性已经足够了。 现在我将简历中用到的html标签摘录出来并解释，以方便学习。 是所有头部元素的容器，在head中可以用的标签有、、、、、 是网页的标题，也就是在浏览器窗口
JS44 页面生命周期
多啦的博客
07-03 655
新的API W3C指定了Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。 生命周期 网页的生命周期被分为了六个阶段，每个时刻只可能处于其中一个阶段。 （1）Active 阶段 网页处于可见状态，且拥有输入焦点。 （2）Passive阶段 此阶段网页可见，但是没有输入焦点，无法接受输入。UI更新（比如动画）仍然在执行。 ...
出现error:--resume checkpoint does not exist
最新发布
09-17
"error:--resume checkpoint does not exist"表示在程序运行过程中出现了错误，提示指定的checkpoint（检查点）不存在。 checkpoint是一种保存程序运行状态的机制，在许多应用中可用于保存模型参数、中间结果等。当...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

return str=xi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值