今天把博客园底部的签名效果改了一下
1、修改前：
2、修改后：
3、源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<style type="text/css">
#div_gxy .b {
float: left;
padding: 6px;
}
#div_gxy .b2 {
padding-top: 0px;
}
#div_gxy .b1 img {
100px;
height: 100px;
}
#div_gxy .b2 img {
110px;
height: 114px;
}
#div_gxy .b3 .s1 {
font-size: 18px;
font-weight: 900;
display: block;
margin-bottom: 10px;
}
#div_gxy .b3 .s2 {
display: block;
}
</style>
<div style="margin-top:100px;"></div>
<h1>老婆开的淘宝店，有需要的可以光顾一下，谢谢</h1>
<p style="color:red;">说明：点击产品图片，或者用淘宝扫一下二维码，即可查看商品信息</p>
<div id="div_gxy"></div>
<p style="font-weight:900;">如有其它问题，请联系：17726605564（手机微信同号）</p>
</div>
<script id="arraystmpl" type="text/x-dot-template">
{{~it:item:index}}
<div class="gxy_container">
<div class="b b1">
<a target="_blank" href="{{= item.productUrl }}">
<img src="{{= item.productImg }}" />
</a>
</div>
<div class="b b2">
<a target="_blank" href="{{= item.qrcodeImg }}">
<img src="{{= item.qrcodeImg }}" />
</a>
</div>
<div class="b b3">
<span class="s1">{{= item.name }}</span>
<span class="s2">
{{= item.des1 }}
</span>
<span class="s2">
{{= item.des2 }}
</span>
<span class="s2">
{{= item.des3 }}
</span>
</div>
<div style="clear:both"></div>
</div>
{{~}}
</script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/dot/1.1.3/doT.min.js"></script>
<script type="text/javascript">
//https://www.cnblogs.com/kuikui/p/3505768.html
var arr = [];
arr.push({
productImg: 'https://gd2.alicdn.com/imgextra/i3/2200543663842/O1CN01OVm6Cw1eFgHrjiE9D_!!2200543663842.jpg_100x100.jpg',
productUrl: 'https://item.taobao.com/item.htm?ut_sk=1.XEXk79yjAY4DAHpKykKj68r%2B_21380790_1590386901706.Copy.1&id=618751281458',
qrcodeImg: 'https://img.alicdn.com/imgextra/O1CN01x8j66Y1lOZHcZgxX1_!!6000000004809-2-xcode.png',
name: '汇集丽 三草两木 洗发水',
des1: '1、天然无患子添加，极致滋润秀发。',
des2: '2、天然干姜颗粒添加，极致被秀发吸收。',
des3: '3、天然复活草胚芽添加，极致修复受损发质。',
});
arr.push({
productImg: 'https://img.alicdn.com/imgextra/i4/1639181234/O1CN01BGtpiT1KzDL2HzETI_!!1639181234.jpg_100x100xz_.webp',
productUrl: 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debNh0XsB&ft=t&id=538143256770',
qrcodeImg: 'https://img.alicdn.com/imgextra/O1CN01Ws0FwQ1PzHTOaQcGQ_!!6000000001911-2-xcode.png',
name: '塞巴斯汀 刚劲啫喱膏',
des1: '1、水润啫喱质地，光泽不僵质。',
des2: '2、快干定型、清爽易洗、光泽包湿。',
des3: '3、适合各种造型：大背头、复古头、飞机头等。',
});
arr.push({
productImg: 'https://img.alicdn.com/imgextra/i1/1639181234/O1CN01QrmCsO1KzDDf7k21n_!!1639181234.jpg_100x100xz_.webp',
productUrl: 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debNh0XsB&ft=t&id=571060600191',
qrcodeImg: 'https://img.alicdn.com/imgextra/O1CN01W5jL021jndixhFilo_!!6000000004593-2-xcode.png',
name: '施华蔻 黑胶 500ML',
des1: '1、随意造型。',
des2: '2、光泽质感。',
des3: '3、干爽不黏腻。',
});
arr.push({
productImg: 'https://img.alicdn.com/imgextra/i1/1639181234/TB2ONI4CDlYBeNjSszcXXbwhFXa_!!1639181234.jpg_100x100xz_.webp',
productUrl: 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debNh0XsB&ft=t&id=563498519955',
qrcodeImg: 'https://img.alicdn.com/imgextra/O1CN0138AsqI22pRzTnHpQu_!!6000000007169-2-xcode.png',
name: '施华蔻 水漾洗发水 1L',
des1: '1、植物提取，无刺激。',
des2: '2、精氨水疗、三重修护。',
des3: '3、水蜜桃味，女生都爱用的洗发水。',
});
var arrText = doT.template($("#arraystmpl").text());
$("#div_gxy").html(arrText(arr));
</script>
</body>
</html>