H5学习之制作个人名片
分类: 程序开发 696 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 个人名片
共 1 条评论关于 “H5学习之制作个人名片”