参考样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>友情链接和二维码模块</title>
<style>
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 友情链接和二维码容器 */
.link-modular {
display: flex;
width: 100%;
}
/* 左侧友情链接区域 */
.link-left {
flex: 1;
padding: 20px;
}
/* 友情链接标题 */
.title {
margin-bottom: 15px;
font-size: 16px;
font-weight: bold;
color: #333333;
}
/* 友情链接容器 */
.links-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
/* 友情链接项 */
.item {
display: inline-block;
font-size: 14px;
color: #666666;
text-decoration: none;
line-height: 1.4;
}
.item:hover {
color: #4945ff;
}
.item:active {
color: #3a36e0;
}
/* 右侧二维码区域 */
.qr-wraper {
padding: 20px;
display: flex;
align-items: flex-start;
}
/* 二维码图片区域 */
.qr-section {
margin-right: 20px;
}
.qr-img {
width: 80px;
height: 80px;
object-fit: cover;
}
/* 联系信息区域 */
.contact-section {
display: flex;
flex-direction: column;
}
.qr-desc {
font-size: 14px;
color: #333333;
margin-bottom: 8px;
}
.qr-line-time {
font-size: 12px;
color: #999999;
margin-bottom: 15px;
}
/* 联系我们按钮 */
.contact-section button {
background-color: #4945ff;
color: white;
border: none;
padding: 10px 24px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
width: fit-content;
}
.contact-section button:hover {
background-color: #5a56ff;
}
.contact-section button:active {
background-color: #3a36e0;
}
</style>
</head>
<body>
<div class="link-modular" data-v-737bdb52="">
<div class="link-left" data-v-737bdb52="">
<div class="title" data-v-737bdb52="">友情链接</div>
<div class="links-container" data-v-737bdb52="">
<a href="https://www.font.cn" target="_blank" class="item" data-v-737bdb52="">字体超市</a>
<a href="https://jianli.chinaz.com/" target="_blank" class="item" data-v-737bdb52="">在线简历</a>
<a href="https://www.aibase.cn/" target="_blank" class="item" data-v-737bdb52="">AI导航网站</a>
<a href="https://www.zywapp.com/" target="_blank" class="item" data-v-737bdb52="">私域电商</a>
<a href="https://www.yygzs.cn/" target="_blank" class="item" data-v-737bdb52="">遥遥科技</a>
<a href="https://www.likeshop.cn/" target="_blank" class="item" data-v-737bdb52="">likeshop开源商城</a>
<a href="https://www.mayicms.com/" target="_blank" class="item" data-v-737bdb52="">蚂蚁分类信息系统</a>
<a href="https://www.72e.net/" target="_blank" class="item" data-v-737bdb52="">云指建站</a>
<a href="https://www.crmeb.com/" target="_blank" class="item" data-v-737bdb52="">CRMEB开源商城</a>
<a href="https://www.cmseasy.cn/" target="_blank" class="item" data-v-737bdb52="">cmseasy企业建站系统</a>
<a href="https://www.xinlingshou.com/" target="_blank" class="item" data-v-737bdb52="">有赞新零售</a>
<a href="https://www.niushop.com/" target="_blank" class="item" data-v-737bdb52="">NIUSHOP开源商城</a>
<a href="http://www.xiaojiangy.com/" target="_blank" class="item" data-v-737bdb52="">晓江云计算</a>
</div>
</div>
<div class="qr-wraper" data-v-737bdb52="">
<div class="qr-section" data-v-737bdb52="">
<img src="/pc/img/wx-qrcode.c58324c.png" width="80" alt="公众号二维码" class="qr-img" data-v-737bdb52="">
</div>
<div class="contact-section" data-v-737bdb52="">
<div class="qr-desc" data-v-737bdb52="">扫码关注微信公众号</div>
<div class="qr-line-time" data-v-737bdb52="">在线时间：周一至周五 08:30 ~ 18:00</div>
<button data-v-737bdb52="">联系我们</button>
</div>
</div>
</div>
</body>
</html>