IMWEB小白DAY3-制作个人名片

最新推荐文章于 2022-12-14 00:46:56 发布

lee8400

最新推荐文章于 2022-12-14 00:46:56 发布

阅读量1k

点赞数 1

文章标签：程序员图片字体 DIV学习 HTML

本文链接：https://blog.csdn.net/lee8400/article/details/70342405

版权

通过名片制作，了解盒子DIV模型，float属性；图片背景搭配，LOGO配置、DIV框架、字体排版等知识。效果图如下：

<html>
	<head>
		<title>小白DAY03名片卡</title>
	</head>
	<body align="center">
		<!--名片卡制作-->
			
		<div id="mingpian">
			<div id="logo">
				<div id="logo_img"><span>LOGO</span></div>
				<p>成松科技有限公司</p>
			</div>
				<div class="clearDiv"></div>
			<div id="image_div">
				<img src="证件照.jpg" height="100%" width="100%"/>
			</div>
			<div id="jieshao">
				<h1>李成松</h1>
				<h3>职务:技术总监</h3>	
				<hr />
			</div>
			<div class="clearDiv"></div>
			<div id="zhuyingfanwei">
				<p>主营范围：JAVA项目、ASP项目、微信开发、IOS开发、大数据分析、安卓APP开发、前端设计、PPT</p>
			</div>
		</div>
		<style>
			#mingpian{
				width:350px;
				height:200px;
				border:2px ridge #3366cc;
				margin-left:400px;
				margin-top:200px;
				background-image:url("背景.jpg");
			}
			#image_div{
				width:80px;
				height:100px;
				border:1px dotted  #8e8e8e;
				margin-left:20px;
				margin-top:20px;
				float:left;
			}
			#jieshao{
				float:right;
				padding-right:50px;
				padding-top:20px;
			}
			#jieshao h1,h3{
				font-family:"微软雅黑";
				color:#3366cc;
				margin:0;
				padding:0;
			}
			#jieshao h3{
				color:#313131;
			}
			#jieshao hr{
				color:#3366cc;
				width:111px;
			}
			#zhuyingfanwei{
				height:30px;
				margin-left:20px;
				margin-top:5px;
				font-family:"楷体";
				font-size:14px;
				color:#616161;
			}
			#logo_img{
				width:20px;
				height:20px;
				background-color:3366cc;
				margin-left:20px;
				margin-top:2px;
				float:left;
				font-size:10px;
				line-height:20px;
				color:white;
			}
			#logo p{
				float:right;
				margin-right:170px;
				line-height:20px;
			}
			.clearDiv{clear:both;}
		</style>
	</body>
</html>