这篇博客介绍了如何使用HTML和CSS创建一个具有专业外观的二维码名片。通过定义列表和超链接，作者展示了如何布局名片，包括添加个人照片、姓名、职位和详细信息。示例代码中包含了CSS样式，用于定制名片的视觉效果，如边框、颜色和文字样式。
为网页添加列表和超链接—二维码名片
- 定义列表
<dl>
<dt>名词</dt>(图片)
<dd>名词解释1</dd>（h2，h3，p）
<dd>名词解释2</dd>
……
</dl>
- 列表嵌套
<ul>
<li>
<ol>
<li>…</li>
<li>…</li>
……
<ol>
</li>
<ul>
程序代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二维码名片</title>
<style>
*{margin: 0;padding: 0;border: 0;}
dl{
width: 200px;
height:280px;
border: 10px solid #8B8B8B;
padding-top: 10px;
}
dt{
width: 200px;
height: 162px;
background: url("img.png") no-repeat;
padding-top: 10px;
}
dd{
color: #A7A7A7;
margin-left: 20px;
line-height: 25px;
}
.a{
font-weight: bold;
font-size: 20px;
}
.b{
font-size: 13px;
}
</style>
</head>
<body>
<dl>
<dt></dt>
<dd> <span class="a">李刚</span> <span class="b">广告公司</span></dd>
<dd>职位：网页设计师</dd>
<dd>案例：41个</dd>
<dd>经验：4年</dd>
</dl>
</body>
</html>
扫一扫
3067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
