如何制作名片
初学HTML，制作了简单的名片。程序里的图片内容需自己添加。
下面是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#p1{
width:450px;
height:350px;
margin:100px auto;
background:#808080;
border-radius:10px;
}//对#p1进行布局处理
#p2{
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>
<p id="p1">
<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>
<p id="p2">
<img id="photo1" src="touxiang.png" >
</p>
</p>
</body>
</html>
运行图片：
相关阅读
<!document> <html> <head> <meta charset="UTF-8" /> <title>标题 - title</title> </head> <body> 内容 - content
<html><!--描述网页--> <body><!--可见的页面--> <h1>HelloWorld</h1><!--标题--> <p>HelloWorld</p><!--段落--> </body> </h
<img> element ‘s attribute: usemap MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img The partial U
本篇教程将展示如何制作悬浮按钮特效，enjoy~ ^_^一、最终效果二、功能点介绍单击旋转移动条件三、制作过程1. 首先我们来看一下，本
在页面里加上版权符号，HTML代码里对应输入©©就是版权符号在HTML里的代码，但是很多页面在设计的时候，用的字体是宋体，就算没