H5学习之制作个人名片
分类： 程序开发 0 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学习之制作个人名片”