• 当前标签:个人名片

程序开发 H5学习之制作个人名片

今天又是一周的开始了,工作的工作了,学习的学习了,我也开始新的一周的学习了,今天做个个人名片。 按惯例,效果图敬上: 代码如下: <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 个人名片

2017-03-13 20:18:47 34 1 0
阅读详情
  • 1
前往