html+css案例演示，实现一个网页二维码名片效果
案例实现，二维码名片
一、效果分析：
根据效果图分析是一个图文混排的案例，外部可以使用dl标签，在dl标签里面嵌套一个dt标签将二维码图片嵌套进去，在使用dd标签定义对应的文本文档
二、开始实现
1- 首先打开Dreamweaver新建html5文档,然后搭建起结构。
2- 搭建完结构后将对应的图文内容引入进去
3-最后使用css设置样式
三、效果预览
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码名片</title>
<style> *{
margin: 0; padding: 0; border: 0; } body{
font-size: 14px;/*设置公共样式*/ } dl{
width: 200px; border: 10px solid #eee; padding: 15px; } dt{
width: 200px; height: 162px; background: url("img.png") no-repeat;'' /*引入图片设置不平铺*/ } dd{
width: 180px; height: 26px; margin-top: 15px; padding-left: 20px; color: #999; border-bottom: solid 1px; } .one{
font-weight: bold; font-size: 18px; } .two{
font-size: 12px; } </style>
</head>
<body>
<dl>
<dt></dt>
<dd><span class="one">李刚</span><span class="two">广告公司</span></dd>
<dd>职位：网页设计师</dd>
<dd>案例：41个</dd>
<dd>经验：4年</dd>
</dl>
</body>
</html>
//欢迎加我VX进群交流
vx账号：-Sep07
THE END
