H5学习之制作个人简历

黄良钵

分类: 程序开发 205 0

个人简历

这个页面今天还没做完,明天做完再接着加代码,(已上传完)

代码如画:

<html>

<head>

    <meta charset="UTF-8">

    <title>个人简历</title>

    <style>

        body{

           height: 100%;

           background-image: url(images/wood.png); 

           font-size: 12px;

           font-family: Arial, 时尚中黑简体;

        }

        section{

            width: 392px;

            height: 101px;

            margin: 0 auto;

            border-radius: 17px;

            position: relative;

            box-shadow: 0 3px 4px black;

        }

        section:nth-child(odd){

            left: -60px;

        }

        section:nth-child(even){

            left: 60px;

        }

        section:nth-child(1){

            background-color: #1e1a17;

            transform: rotate(-3deg);

            margin-top: 50px;

            z-index: 1000;

            background-image: url(images/diwen.png);

            background-size: 70%;

            background-repeat: no-repeat;

            background-position: 70% 30%;

        }

        section:nth-child(2){

            background-color: #dededc;

            z-index: 900;

            top: -13px;

        }

        section:nth-child(3){

            background-color: #c4be66;

            z-index: 800;

            top: -26px;

        }

        section:nth-child(4){

            background-color: #bc8ebc;

            z-index: 700;

            top: -39px;

        }

        section:nth-child(5){

            background-color: #dc214c;

            z-index: 600;

            top: -52px;

        }

        section:nth-child(6){

            background-color: #e3efc1;

            z-index: 500;

            top: -65px;

        }

        section:nth-child(7){

            background-color: #d5c2d8;

            z-index: 400;

            top: -78px;

        }

        section:nth-child(8){

            background-color: #c0c2c1;

            z-index: 300;

            top: -91px;

            /*超出父元素的部分剪切掉*/

            overflow: hidden;

        }

        .hole{

            display: block;

            width: 24px;

            height: 24px;

            background-image: url(images/wood.png);

            border-radius: 50%;

            position: absolute;

            bottom: 10px;

            left: 10px;

        }

        #jl h2{

            color: #6777a8;

            font-weight: normal;

            font-size: 37px;

            position: relative;

            top: 30px;

            left: 34px;

            display: inline-block

        }

        #jl h2 small{

            display:block;

            font-size: 19px;

        }

        #jl h1{

            color: white;

            font-size: 67px;

            display: inline-block;

            font-family: 迷你简双线体;

            position: relative;

            left: 137px;

            top: -9px;

        }

        h1,h2,p{

            margin: 0;

            text-align: right;

        }

        .sh2{

            padding: 7px 25px;

        }

        p{

            line-height: 130%;

            position: absolute;

            right: 26px;

            bottom: 10px;

        }

        #grxx p:nth-of-type(1){

            right: 195px;

        }

        .sh2d{

            padding: 19px 25px 0 0;

        }

        .white_text{

            color: white;

        }

        #zwpj p:nth-of-type(1){

            top: 21px;

            left: 40px;

            text-align: left;

            font-size: 10px;

            width: 240px;

        }

        #zwpj p:nth-of-type(2){

            top: 75px;

            left: 40px;

            text-align: left;

            font-size: 10px;

        }

        #qzyx h2{

            text-align: center;

            position: absolute;

            top: 20px;

            left: 30%;

            color:#fee9fe; 

            z-index: 320;

        }

        #qzyx h3{

            text-align: center;

            position: absolute;

            top: 27px;

            left: 40%;

            font-size: 27px;

            color: #fee9fe;

            z-index: 320;

        }

        /*选中第一个字符*/

        #qzyx h2::first-letter{

            color: blue;

        }

        #qzyx div:nth-last-of-type(1){

            width:134px;

            height: 134px;

            background-color: yellow;

            border-radius: 50%;

            opacity: 0.7;

            position: absolute;

            top: -4px;

            left: 36px;

        }

        #qzyx div:nth-last-of-type(2){

            width:200px;

            height: 200px;

            background-color: blue;

            border-radius: 50%;

            opacity: 0.5;

            position: absolute;

            top: -60px;

            left: 135px;

        }

    </style>

</head>

<body>

    <main>

        <section id="jl">

            <span class="hole"></span>

            <h2>赵子龙<small>ZhaoZiLong</small></h2>

            <h1>简历</h1>

        </section>

        <section id="grxx">

            <span class="hole"></span>

            <h2 class="sh2">个人信息</h2>

            <p>

                籍贯:海口<br>

                政治面貌:团员<br>

                毕业学校:海大<br>

                专业:HTML5 <br>

            </p>

            <p>

                民族:汉族<br>

                出生日期:1988年3月8日<br>

                身高:170CM

            </p>

        </section>

        <section>

            <span class="hole"></span>

            <h2 class="sh2d">联系方式</h2>

            <p>

                电话:18888888888 <br>

                E-mail:i@blog.huangliangbo.com <br>

                QQ:909921048

            </p>

        </section>

        <section>

            <span class="hole"></span>

            <h2 class="sh2 white_text">教育经历</h2>

            <p>

                2002年9月至2006年6月 <br>

                海南大学 <br>

                计算机科学与技术

            </p>

        </section>

        <section>

            <span class="hole"></span>

            <h2 class="sh2d white_text">实践经历</h2>

            <p>

                2012年至今 <br>

                在河南智游教育 <br>

                HTML5讲师

            </p>

        </section>

        <section>

            <span class="hole"></span>

            <h2 class="sh2">技能水平</h2>

            <p>

                可熟练操作 <br>

                Visual Studio Code、Fireox <br>

                等开发工具

            </p>

        </section>

        <section id="zwpj">

            <span class="hole"></span>

            <h2 class="sh2d">自我评价</h2>

            <p>

                1、大胆创新,具有敏锐的时尚触角,设计方面极感兴趣;<br>

                2、有良好的独立工作能力,工作认真积极,责任心强,有较好的沟通能力和接受能力;

            </p>

            <p>

                3、既有团队精神和协调能力,适应能力强,能吃苦耐劳,待人真诚热情

            </p>

        </section>

        <section id="qzyx">

            <span class="hole"></span>

            <h2>求职意向</h2>

            <h3>高级前端开发</h3>

            <div></div>

            <div></div>

        </section>

    </main>

</body>

</html>

素材下载:2017-03-16 jl

 

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
first-letter、H5学习、inline-block、overflow、white_text

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “H5学习之制作个人简历”

Loading...