二维码名片设计

weixiaosamoyed

于 2022-02-08 18:26:50 发布

阅读量809

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixiaosamoyed/article/details/122829110

版权

此次任务用到了定义标签dl，完成如下二维码名片设计：
在这里插入图片描述
具体解析请看代码图：

代码块：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二维码名片</title>
	<style>
	
		.box1{
			width: 200px;
			height: 310px;
			border: 10px  #F1E9E9 solid;
		}
		.box1 dt{
			width: 200px;
			height: 162px;
		    background:url("img/img.png") no-repeat;	
		}
		.box1 dd{
			width: 100%;
			height: auto;
			line-height: 30px;
			color: #878686;
			font-size: 15px;
		}
		.box1 span{
			font-size: 12px;
		}
	
	</style>
</head>

<body>
	<div class="box1">
	<dl>
		<dt></dt>
		<dd><strong>李刚</strong><span>广告公司</span></dd>
		<dd><strong>职位</strong>：<span>网页设计师</span></dd>
		<dd><strong>案例</strong>：<span>41个</span></dd>
		<dd><strong>经验</strong>：<span>4年</span></dd>
		</dl>
	</div>
</body>
</html>