初学HTML，制作了简单的名片。程序里的图片内容需自己添加。
工具；eclipse
下面是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1{
width:450px;
height:350px;
margin:100px auto;
background:#808080;
border-radius:10px;
}//对#div1进行布局处理
#div2{
width:120px;
height:120px;
background:blue;
position:absolute;
margin:-270px 70px 135px 300px;
border-radius:60px;
}
body{
background-image:url("4.jpg");//背景处理
background-clip:content-box;
}
#photo{
position:relative;
top:10px;
left:10px;
}
#photo1{
width:120px;
height:120px;
border-radius:120px;
}
h3{
position:relative;
left:20px;
}
h1{
position:relative;
left:20px;
}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.zhiyou100.com/">
<img id="photo" src="biaozhi.png" width="220px" height="60px">
</a>
<h1>打扰</h1>
<h3>大数据工程师</h3><br/>
<h3>手机：13623800355</h3>
<h3>QQ ：1352895716</h3>
<h3>邮箱：[email protected]</h3>
<div id="div2">
<img id="photo1" src="touxiang.png" >
</div>
</div>
</body>
</html>
运行图片：
