H5学习之制作个人名片

黄良钵

分类: 程序开发 51 1

今天又是一周的开始了,工作的工作了,学习的学习了,我也开始新的一周的学习了,今天做个个人名片。

按惯例,效果图敬上:

个人名片效果图

代码如下:

<html>

<head>

    <meta charset="UTF-8">

    <title>个人名片</title>

    <style>

        body{

            background-color: #444444;

            margin: 0;

            padding-top: 50px;

        }

        article{

            width: 500px;

            height: 300px;

            background-color: #ee9714;

            margin: 0 auto;

            transform: rotate(10deg);

            padding: 30px 30px 20px 20px;

            box-sizing: border-box;

            color: white;

            position: relative;

            box-shadow: 1px 3px 5px 5px  #222;

            /*

                1 x方向的偏移量

                2 y方向的偏移量

                3 阴影的模糊程度

                4 阴影的大小 正数是阴影变大 负数是阴影变小

                5 阴影的颜色

            */

            z-index: 100;

            /*改变堆叠顺序*/

        }

        .logo{

            width: 40%;

        }

        h1{

            font-size: 30px;

        }

        small{

            /*把行元素变为块元素*/

            display: block;

            font-size: 15px;

            font-weight: normal;

            line-height: 26px;

        }

        p{

            margin: 0;

        }

        address{

            font-size: 15px;

            line-height: 26px;

            font-style: normal;

        }

        .addr:before{

            content: '地址: '

        }

        .tel:before{

            content: '电话: '

        }

        .qq:before{

            content: 'QQ: '

        }

        .email:before{

            content: '邮箱: '

        }

        .tel{

            float: left;

        }

        .qq{

            display: inline-block;

            margin-left: 30px;

        }

        .pic{

            width: 170px;

            height: 270px;

            position: absolute;

            bottom: -20px;

            right: -10px;

            opacity: 0.7;

        }

        aside{

            width: 500px;

            height: 300px;

            background-color: #ee9714;

            margin: 10px auto;

            box-shadow: 1px 3px 5px 5px #222;

            transform: rotate(-1deg);

            padding: 80px 25px 20px 25px;

            box-sizing: border-box;

        }

        .photo{

            width: 110px;

            height: 100px;

            background-image: url(photo.jpg);

            background-size: 180px 130px;

            background-position: 55% 40%;

            border-radius: 50%;

            border: 6px solid white;

            float: left;

        }

        aside p{

            color: white;

            width: 310px;

            float: right;

            margin-top: 25px;

            /*缩进字符*/

            text-indent: 2em;

        }

    </style>

</head>

<body>

    <!--article定义文章-->

    <article>

        <!--src链接资源 alt当图片无法加载的时候 显示alt的值-->

        <img class="logo" src="logo.png" alt="图片无法加载">

        <!--h1定义标题-->

        <h1>黄良钵<small>学员</small></h1>

        <!--address定义文档或文章的作者-->

        <address>

            <p class="addr">海南省海口市美兰区白龙南路53号</p>

            <p class="tel">18888888888</p>

            <p class="qq">909921048</p>

            <p class="email">i@blog.huangliangbo.com</p>

        </address>

        <img class="pic" src="pic.png" alt="背景花">

    </article>

    <aside>

        <div class="photo"></div>

        <p>与其羡慕他人智慧,不如自己勤奋补拙;与其羡慕他人优秀,不如自己奋斗不止;与其羡慕他人坚强,不如自己百炼成钢;与其羡慕他人成功,不如自己厚积薄发。</p>

    </aside>

</body>

</html>

素材下载:2017-03-13 个人名片

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
H5学习、个人名片

作者简介:黄良钵

打赏

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

共 1 条评论关于 “H5学习之制作个人名片”

Loading...