quiz
quiz copied to clipboard
Published
20 hours ago •
zhangxinxu
zhangxinxu
CSS基础测试15
本期小测关于网格状布局，然后中间的分隔线的实现是考察重点。
布局2积分，健壮的分隔线2积分，其他4要点各1积分。
请附上对应的CSS代码，注意缩进和代码高亮（没有减1分），可以使用下面语法进行高亮：
```css 你的代码在这里 ```
请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。
本期小测直播答疑为本周六11月30日上午10:00，和上周答疑一起，大约共1小时，直播地址：https://live.bilibili.com/21193211
首位答题者会获得100%倍被翻牌技能，每位答题者都可获得2积分底分。
感谢您的参与！
.list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
color: #524940;
border: 15px solid;
position: relative;
background-color: currentColor;
grid-gap: 1px;
overflow:hidden;
}
.list-item {
position: relative;
text-align: center;
color: #e9e3e1;
padding: 30px 15px;
text-decoration: none;
border-radius: 15px;
margin: -1px;
overflow:hidden;
}
.list-item::before {
content: '';
position: absolute;
inset: 1px;
pointer-events: none;
box-shadow: 0 0 0 1px currentColor;
}
.list-item-icon {
font-size: 30px;
}
.list-item-title {
font-size: 16px;
display: block;
margin-top: 15px;
}
<nav class="list">
<a class="list-item" href="#">
<css-icon class="list-item-icon icon-mail"></css-icon>
<span class="list-item-title">商品秒杀</span>
</a>
......
</nav>
demo 兼容性不太好
/* zxx: 一行4列的时候有问题哦~ */
body {
background: #524940;
}
.link-box-icon {
width: 40px;
height: 40px;
}
nav {
overflow: hidden;
}
.link-box {
display: grid;
margin-left: -1px;
margin-top: -1px;
padding-left: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
@media screen and (min-width: 300px) {
.link-box {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (min-width: 550px) {
.link-box {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 800px) {
.link-box {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1200px) {
.link-box {
grid-template-columns: repeat(4, 1fr);
}
}
.link-box-text {
margin: 5px 0 0 0;
}
.link-box-a {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-sizing: border-box;
text-decoration: none;
text-align: center;
color: #fff;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
clip-path: polygon(1em 0, calc(100% - 1em) 0, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0 calc(100% - 1em), 0 1em);
}
.link-box-li {
padding: 2em 1em;
width: 100%;
}
<ul class="link-box">
<a class="link-box-a" href="javascript:void 0">
<li class="link-box-li">
<img class="link-box-icon" src="https://i.loli.net/2019/11/27/YquIUOW8s5NmFoB.png" />
<p class="link-box-text">商品秒杀</p>
</li>
</a>
</ul>
<!-- zxx: 自适应没有，分隔线实现离题意有些远 -->
<table cellspacing="0">
<tr>
<td>
<svg></svg>
<p>商品秒杀</p>
</td>
<td>
<svg></svg>
<p>企业团购</p>
</td>
<td>
<svg></svg>
<p>私码通道</p>
</td>
</tr>
<tr>
<td>
<svg></svg>
<p>铁粉卡</p>
</td>
<td>
<svg></svg>
<p>以旧换新</p>
</td>
<td>
<svg></svg>
<p>话费充值</p>
</td>
</tr>
</table>
p {
margin: 0;
padding: 0;
}
td {
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: rgb(82, 73, 64);
color: #fff;
text-align: center;
position: relative;
}
td:not(:last-child):before {
content: '';
display: block;
width: 1px;
height: 80%;
position: absolute;
right: 0;
top: 10%;
background-color: #aaa;
}
tr:not(:last-child) td:after {
content: '';
display: block;
width: 80%;
height: 1px;
position: absolute;
left: 10%;
bottom: 0;
background-color: #aaa;
}
//zxx: 3行或者4列呢？
<div class="test test-left test-bottom">
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>商品秒杀</p>
</a>
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>企业团购</p>
</a>
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>私码通道</p>
</a>
</div>
<div class="test test-left">
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>铁粉卡</p>
</a>
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>以旧换新</p>
</a>
<a href="http://ww.baidu.com"><svg t="1574856864844" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4996" width="150" height="150">
<path
d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334zM682.666667 469.333333v64H384v-64h298.666667z"
p-id="4997" fill="#e6e6e6"></path>
</svg>
<p>话费充值</p>
</a>
</div>
* {
margin: 0;
padding: 0;
}
.test {
display: flex;
}
.test a p {
color: white;
}
.test a {
text-decoration: none;
flex: 1;
padding: 20px;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
color: white;
background: #524940;
/* padding-top: 100%; */
}
.test-left a:not(:last-child):after {
content: '';
height: 90%;
width: 0px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-right: 1px solid;
}
.test-bottom a:before {
content: '';
height: 0px;
width: 90%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-bottom: 1px solid;
}
<table class="grid-wrapper">
<tr>
<td class="grid-item">
<a class="grid-link" href="#">
<i class="grid-icon" aria-hidden="true"></i>
商品秒杀
</a>
</td>
</tr>
<tr>
<td class="grid-item">
<a class="grid-link" href="#">
<i class="grid-icon" aria-hidden="true"></i>
商品秒杀
</a>
</td>
</tr>
</table>
.grid-wrapper {
--light: #fff;
--dark: #524940;
color: var(--light);
text-align: center;
border-collapse: collapse;
font-size: 16px;
position: relative;
}
.grid-wrapper::before {
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
position: absolute;
border-top: 1px solid var(--dark);
border-left: 1px solid var(--dark);
z-index: 2;
pointer-events: none;
}
.grid-item {
padding: 0;
position: relative;
}
.grid-link::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 10px;
pointer-events: none;
box-shadow: -9px 0 0 var(--dark), -10px 0 0 var(--light), 0 -9px 0 var(--dark),
0 -10px 0 var(--light);
}
.grid-link {
background: var(--dark);
display: block;
padding: 20px;
color: var(--light);
text-decoration: none;
word-break: keep-all;
}
.grid-link:focus {
--dark: #62584d;
z-index: 1;
position: relative;
outline-color:var(--light);
outline-offset:-2px;
}
.grid-link:hover {
--dark: #6a635b;
}
<table>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
</table>
<table>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
<tr>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
<td>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zNzcuNzQgMzJINzAuMjZDMzEuNDEgMzIgMCA2My40MSAwIDEwMi4yNnYzMDcuNDhDMCA0NDguNTkgMzEuNDEgNDgwIDcwLjI2IDQ4MGgzMDcuNDhjMzguNTIgMCA2OS43Ni0zMS4wOCA3MC4yNi02OS42LTQ1Ljk2LTI1LjYyLTExMC41OS02MC4zNC0xNzEuNi04OC40NC0zMi4wNyA0My45Ny04NC4xNCA4MS0xNDguNjIgODEtNzAuNTkgMC05My43My00NS4zLTk3LjA0LTc2LjM3LTMuOTctMzkuMDEgMTQuODgtODEuNSA5OS41Mi04MS41IDM1LjM4IDAgNzkuMzUgMTAuMjUgMTI3LjEzIDI0Ljk2IDE2LjUzLTMwLjA5IDI2LjQ1LTYwLjM0IDI2LjQ1LTYwLjM0aC0xNzguMnYtMTYuN2g5Mi4wOHYtMzEuMjRIODguMjh2LTE5LjAxaDEwOS40NFY5Mi4zNGg1MC45MnY1MC40MmgxMDkuNDR2MTkuMDFIMjQ4LjYzdjMxLjI0aDg4Ljc3cy0xNS4yMSA0Ni42Mi0zOC4zNSA5MC45MmM0OC45MyAxNi43IDEwMC4wMSAzNi4wNCAxNDguNjIgNTIuNzRWMTAyLjI2QzQ0Ny44MyA2My41NyA0MTYuNDMgMzIgMzc3Ljc0IDMyek00Ny4yOCAzMjIuOTVjLjk5IDIwLjE3IDEwLjI1IDUzLjczIDY5LjkzIDUzLjczIDUyLjA3IDAgOTIuNTgtMzkuNjggMTE3Ljg3LTcyLjktNDQuNjMtMTguNjgtODQuNDgtMzEuNDEtMTA5LjQ0LTMxLjQxLTY3LjQ1IDAtNzkuMzUgMzMuMDYtNzguMzYgNTAuNTh6Ij48L3BhdGg+IDwvc3ZnPg=="
alt=""
/>
<p>支付</p>
</td>
</tr>
</table>
* {
padding: 0;
margin: 0;
}
table {
width: 50%;
text-align: center;
border-collapse: collapse;
}
td {
position: relative;
background-color: #524940;
color: #fff;
padding: 2rem;
}
td:not(:last-child):before {
position: absolute;
content: "";
width: 1px;
height: 80%;
right: 0;
top: 10%;
background-color: #fff;
}
tr:not(:last-child) > td:after {
position: absolute;
content: "";
width: 80%;
height: 1px;
left: 10%;
bottom: 0;
background-color: #fff;
}
<div class="container">
<div class="row">
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>商品秒杀</span>
</div>
<div class="vertical-line">
</div>
</div>
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>企业团购</span>
</div>
<div class="vertical-line">
</div>
</div>
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>私码通道</span>
</div>
<div class="vertical-line">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>铁粉卡</span>
</div>
<div class="vertical-line">
</div>
</div>
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>以旧换新</span>
</div>
<div class="vertical-line">
</div>
</div>
<div class="col">
<div class="col-item">
<img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="" srcset="">
<span>话费充值</span>
</div>
<div class="vertical-line">
</div>
</div>
</div>
</div>
.container {
width: 100%;
height: 400px;
background: #524940;
display: flex;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
}
.row:last-child .col-item {
border-bottom-width: 0;
}
.row>.col:last-child>.vertical-line {
width: 0;
}
.col {
flex: 1;
padding: 20px 0;
display: flex;
}
.col-item {
margin: -20px 20px;
border-bottom: 1px solid #fff;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
.col-item>img {
margin-bottom: 10px;
width: 40px;
height: 40px;
}
.col-item>span {
font-size: 20px;
}
.vertical-line {
width: 1px;
height: 100%;
background: #fff;
}
//演示地址 IE10以下没做兼容 http://49.233.165.74:802/
* {
margin: 0;
padding: 0;
}
.row-column {
width: 440px;
margin: 30px auto;
}
.box {
width: 500px;
margin: 50px auto;
background: #524940;
padding: 20px;
box-sizing: border-box;
}
.box .list {
display: flex;
justify-content: center;
align-content: center;
}
.box .list .item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 33.3%;
height: 120px;
background: #524940;
color: #ffffff;
border-bottom: 1px solid #a39e9a;
border-right: 1px solid #a39e9a;
position: relative;
}
.box .list .item:after {
display: block;
content: '';
width: 20px;
height: 20px;
border-radius: 20px;
background: #524940;
position: absolute;
right: -10px;
bottom: -10px;
z-index: 6;
}
.box .list .item:last-child {
border-right: 0;
}
.box .list .item:last-child:after {
display: none;
}
.box .list:last-child .item {
border-bottom: 0;
margin-bottom: 0;
}
.box .list:last-child .item:after {
display: none;
}
"<div class="box">
<div class="list">
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
</div>
<div class="list">
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
<div class="item">
<span class="iconfont icon-hot"> </span>
<p>选项1</p>
</div>
</div>
.grid-box {
display: grid;
width: fit-content;
margin: 20px;
background: #5f5750;
list-style: none;
/* 设置列数 */
grid-template-columns: repeat(3, minmax(120px, 1fr));
overflow: hidden;
}
.grid-box a {
color: #fff;
font-size: 16px;
padding: 20px 0;
display: block;
text-decoration: none;
}
.grid-box li {
text-align: center;
padding: 10px;
position: relative;
}
.grid-box li:before {
content: "";
position: absolute;
top: 10px;
right: -1px;
width: 1px;
height: calc(100% - 20px);
background-color: #9B9692;
}
.grid-box li:after {
content: "";
position: absolute;
bottom: -1px;
left: 10px;
width: calc(100% - 20px);
height: 1px;
background-color: #9B9692;
}
.iconfont {
width: 23px;
height: 23px;
margin: auto;
margin-bottom: 5px;
display: block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E %3Cpath fill='%23ffffff' d='M320.009338 400.005276c0 63.996546 0 94.871741-31.998785 191.990663-21.331841 65.37801-63.996546 129.375579-127.994116 191.990662h703.966103c-63.996546-63.996546-106.661252-127.994116-127.994116-191.990662-31.998785-95.995331-31.998785-127.994116-31.998785-191.990663 0-127.994116-31.998785-223.989447-191.990662-223.989447-154.75562 0-191.989639 95.995331-191.989639 223.989447z m282.523585 447.978895H421.467077c13.178137 37.284161 48.735981 63.996546 90.532923 63.996546s77.354785-26.712385 90.532923-63.996546z m3.220344-724.683961c114.993011 31.42164 162.233941 127.552048 162.233942 276.705066 0 89.716324 4.64888 99.556437 28.713972 171.752736 17.921161 53.764508 55.119365 109.561301 112.532982 166.975942 40.316218 40.316218 11.762905 109.249193-45.252646 109.249193H668.791999c-14.823614 73.028247-79.389118 127.994116-156.791999 127.994116S370.031615 921.011394 355.208001 847.984171H160.016437c-57.352219 0-85.751013-69.63087-44.756343-109.74038 57.057507-55.825446 94.02035-111.270223 111.967094-166.273955 15.731286-47.745421 25.325805-105.065917 28.78458-171.96456 0-146.069797 49.270147-243.450684 162.078399-275.986705 9.200546-43.417859 47.750537-75.996858 93.909833-75.996858 45.903469 0 84.282568 32.219819 93.753267 75.278497z'%3E%3C/path%3E %3C/svg%3E") no-repeat center;
}
<ul class="grid-box">
<li><a href=""><i class="iconfont"></i>选购手机</a></li>
<li><a href=""><i class="iconfont"></i>企业团购</a></li>
<li><a href=""><i class="iconfont"></i>一元活动</a></li>
<li><a href=""><i class="iconfont"></i>限时秒杀</a></li>
<li><a href=""><i class="iconfont"></i>以旧换新</a></li>
<li><a href=""><i class="iconfont"></i>话费充值</a></li>
</ul>
FA的图标尺寸有点问题，将就使用一下；
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
flex-flow: row wrap;
width: 100%;
padding: 0;
margin: 0;
background: #524940;
}
/* 遮住右边和底部的边框 */
.container::after {
content: '';
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 3px solid #524940;
background: transparent;
}
.item {
position: relative;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
flex-basis: 33.33%;
height: 240px;
list-style: none;
color: #fff;
}
.item::before {
content: '';
position: absolute;
top: 8%;
right: 0;
width: 1px;
height: 84%;
background: #fff;
}
.item::after {
content: '';
position: absolute;
left: 8%;
bottom: 0;
width: 84%;
height: 1px;
background: #fff;
}
.item-icon {
font-size: 56px;
}
.item-title {
margin: 12px 0 0 0;
font-size: 32px;
text-align: center;
}
.container2>.item {
flex-basis: 25%;
}
<ul class="container" role="list">
<li class="item" role="listitem">
<div class="item-icon fa fa-clock-o" aria-label="icon"></div>
<p class="item-title">商品秒杀</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-building-o" aria-label="icon"></div>
<p class="item-title">企业团购</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-copyright" aria-label="icon"></div>
<p class="item-title">私码通道</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-credit-card" aria-label="icon"></div>
<p class="item-title">铁粉卡</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-refresh" aria-label="icon"></div>
<p class="item-title">以旧换新</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-mobile" aria-label="icon"></div>
<p class="item-title">话费充值</p>
</li>
</ul>
<h2>健壮性测试1</h2>
<ul class="container" role="list">
<li class="item" role="listitem">
<div class="item-icon fa fa-clock-o" aria-label="icon"></div>
<p class="item-title">商品秒杀</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-building-o" aria-label="icon"></div>
<p class="item-title">企业团购</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-copyright" aria-label="icon"></div>
<p class="item-title">私码通道</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-credit-card" aria-label="icon"></div>
<p class="item-title">铁粉卡</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-refresh" aria-label="icon"></div>
<p class="item-title">以旧换新</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-mobile" aria-label="icon"></div>
<p class="item-title">话费充值</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-credit-card" aria-label="icon"></div>
<p class="item-title">铁粉卡</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-refresh" aria-label="icon"></div>
<p class="item-title">以旧换新</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-mobile" aria-label="icon"></div>
<p class="item-title">话费充值</p>
</li>
</ul>
<h2>健壮性测试2</h2>
<ul class="container container2" role="list">
<li class="item" role="listitem">
<div class="item-icon fa fa-clock-o" aria-label="icon"></div>
<p class="item-title">商品秒杀</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-building-o" aria-label="icon"></div>
<p class="item-title">企业团购</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-copyright" aria-label="icon"></div>
<p class="item-title">私码通道</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-credit-card" aria-label="icon"></div>
<p class="item-title">铁粉卡</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-refresh" aria-label="icon"></div>
<p class="item-title">以旧换新</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-mobile" aria-label="icon"></div>
<p class="item-title">话费充值</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-credit-card" aria-label="icon"></div>
<p class="item-title">铁粉卡</p>
</li>
<li class="item" role="listitem">
<div class="item-icon fa fa-refresh" aria-label="icon"></div>
<p class="item-title">以旧换新</p>
</li>
</ul>
dome html部分
<ul class="grid-box">
<li>
<i class="iconfont icon-miaosha"></i>
商品秒杀
</li>
<li>
<i class="iconfont icon-qiye"></i>
企业团购
</li>
<li>
<i class="iconfont icon-tongdao"></i>
私码通道
</li>
<li>
<i class="iconfont icon-shoujiqia"></i>
铁粉卡
</li>
<li>
<i class="iconfont icon-yijiuhuanxintubiao03"></i>
以旧换新
</li>
<li>
<i class="iconfont icon-huafeichongzhi"></i>
话费充值
</li>
</ul>
css部分
.grid-box{
padding:20px 10px;
margin:0;
display: grid;
list-style: none;
background: #524940;
color:#efece6;
text-align:center;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-row-gap: 20px;
}
.grid-box li{
position:relative;
padding:10px 0;
}
.grid-box li:not(:nth-child(3n)):after,
.grid-box li:not(:nth-last-child(-n+3)):before{
content:'';
position:absolute;
}
.grid-box li:not(:nth-child(3n)):after{
right:0;
top:0;
height:100%;
border-right:1px solid #ccc;
}
.grid-box li:not(:nth-last-child(-n+3)):before{
left:10px;
bottom:-10px;
width:calc(100% - 20px);
border-bottom:1px solid #ccc;
}
.grid-box .iconfont{
font-size:48px;
display: block;
margin-bottom:8px;
}
/*zxx: 赞一个*/
nav {
overflow: hidden;
}
a {
text-decoration: none;
color: currentColor;
}
.server_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -2px 0 0 -2px;
padding: 0;
list-style: none;
font-size: 24px;
background-color: #524840;
}
.server_item {
position: relative;
flex: 1 1 33%;
min-width: 140px;
text-align: center;
padding: 40px 0;
color: #ece5e4;
}
.server_item::before,
.server_item::after {
content: '';
position: absolute;
background-color: #8f8a85;
}
.server_item::before {
top: 0;
right: 12px;
left: 12px;
height: 2px;
}
.server_item::after {
top: 12px;
bottom: 12px;
left: 0;
width: 2px;
}
.server_icon {
display: block;
width: 50px;
height: 50px;
background-size: 50px 50px;
margin: 0 auto 15px;
}
.server_icon_clock {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath fill='%23ece5e4' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'%3E%3C/path%3E %3C/svg%3E");
}
.server_icon_enterprise {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E %3Cpath fill='%23ece5e4' d='M504 352H136.4c-4.4 0-8 3.6-8 8l-.1 48c0 4.4 3.6 8 8 8H504c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm0 96H136.1c-4.4 0-8 3.6-8 8l-.1 48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm0-192H136.6c-4.4 0-8 3.6-8 8l-.1 48c0 4.4 3.6 8 8 8H504c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm106.5-139L338.4 3.7a48.15 48.15 0 0 0-36.9 0L29.5 117C11.7 124.5 0 141.9 0 161.3V504c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8V256c0-17.6 14.6-32 32.6-32h382.8c18 0 32.6 14.4 32.6 32v248c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8V161.3c0-19.4-11.7-36.8-29.5-44.3z'%3E%3C/path%3E %3C/svg%3E");
}
.server_icon_aisle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E %3Cpath fill='%23ece5e4' d='M248 8.8c-137 0-248 111-248 248s111 248 248 248 248-111 248-248-111-248-248-248zm0 482.8c-129.7 0-234.8-105.1-234.8-234.8S118.3 22 248 22s234.8 105.1 234.8 234.8S377.7 491.6 248 491.6zm155.1-328.5v-46.8H209.3V198H54.2l36.7 46h117.7v196.8h48.8V245h83.3v-47h-83.3v-34.8h145.7zm-73.3 45.1v23.9h-82.9v197.4h-26.8V232.1H96.3l-20.1-23.9h143.9v-80.6h171.8V152h-145v56.2zm-161.3-69l-12.4-20.7 2.1 23.8-23.5 5.4 23.3 5.4-2.1 24 12.3-20.5 22.2 9.5-15.7-18.1 15.8-18.1zm-29.6-19.7l9.3-11.5-12.7 5.9-8-12.4 1.7 13.9-14.3 3.8 13.7 2.7-.8 14.7 6.8-12.2 13.8 5.3zm165.4 145.2l-13.1 5.6-7.3-12.2 1.3 14.2-13.9 3.2 13.9 3.2-1.2 14.2 7.3-12.2 13.1 5.5-9.4-10.7zm106.9-77.2l-20.9 9.1-12-19.6 2.2 22.7-22.3 5.4 22.2 4.9-1.8 22.9 11.5-19.6 21.2 8.8-15.1-17zM248 29.9c-125.3 0-226.9 101.6-226.9 226.9S122.7 483.7 248 483.7s226.9-101.6 226.9-226.9S373.3 29.9 248 29.9zM342.6 196v51h-83.3v195.7h-52.7V245.9H89.9l-40-49.9h157.4v-81.6h197.8v50.7H259.4V196zM248 43.2c60.3 0 114.8 25 153.6 65.2H202.5V190H45.1C73.1 104.8 153.4 43.2 248 43.2zm0 427.1c-117.9 0-213.6-95.6-213.6-213.5 0-21.2 3.1-41.8 8.9-61.1L87.1 252h114.7v196.8h64.6V253h83.3v-62.7h-83.2v-19.2h145.6v-50.8c30.8 37 49.3 84.6 49.3 136.5.1 117.9-95.5 213.5-213.4 213.5zM178.8 275l-11-21.4 1.7 24.5-23.7 3.9 23.8 5.9-3.7 23.8 13-20.9 21.5 10.8-15.8-18.8 16.9-17.1z'%3E%3C/path%3E %3C/svg%3E");
}
.server_icon_fans {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E %3Cpath fill='%23ece5e4' d='M320 0H128L0 128v320c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zM160 160h-48V64h48v96zm80 0h-48V64h48v96zm80 0h-48V64h48v96z'%3E%3C/path%3E %3C/svg%3E");
}
.server_icon_change {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E %3Cpath fill='%23ece5e4' d='M629.657 343.598L528.971 444.284c-9.373 9.372-24.568 9.372-33.941 0L394.343 343.598c-9.373-9.373-9.373-24.569 0-33.941l10.823-10.823c9.562-9.562 25.133-9.34 34.419.492L480 342.118V160H292.451a24.005 24.005 0 0 1-16.971-7.029l-16-16C244.361 121.851 255.069 96 276.451 96H520c13.255 0 24 10.745 24 24v222.118l40.416-42.792c9.285-9.831 24.856-10.054 34.419-.492l10.823 10.823c9.372 9.372 9.372 24.569-.001 33.941zm-265.138 15.431A23.999 23.999 0 0 0 347.548 352H160V169.881l40.416 42.792c9.286 9.831 24.856 10.054 34.419.491l10.822-10.822c9.373-9.373 9.373-24.569 0-33.941L144.971 67.716c-9.373-9.373-24.569-9.373-33.941 0L10.343 168.402c-9.373 9.373-9.373 24.569 0 33.941l10.822 10.822c9.562 9.562 25.133 9.34 34.419-.491L96 169.881V392c0 13.255 10.745 24 24 24h243.549c21.382 0 32.09-25.851 16.971-40.971l-16.001-16z'%3E%3C/path%3E %3C/svg%3E");
}
.server_icon_charge {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E %3Cpath fill='%23ece5e4' d='M351.2 32h-65.3c-4.6 0-8.8 2.6-10.8 6.7l-55.4 113.2c-14.5 34.7-27.1 71.9-27.1 71.9h-1.3s-12.6-37.2-27.1-71.9L108.8 38.7c-2-4.1-6.2-6.7-10.8-6.7H32.8c-9.1 0-14.8 9.7-10.6 17.6L102.3 200H44c-6.6 0-12 5.4-12 12v32c0 6.6 5.4 12 12 12h88.2l19.8 37.2V320H44c-6.6 0-12 5.4-12 12v32c0 6.6 5.4 12 12 12h108v92c0 6.6 5.4 12 12 12h56c6.6 0 12-5.4 12-12v-92h108c6.6 0 12-5.4 12-12v-32c0-6.6-5.4-12-12-12H232v-26.8l19.8-37.2H340c6.6 0 12-5.4 12-12v-32c0-6.6-5.4-12-12-12h-58.3l80.1-150.4c4.3-7.9-1.5-17.6-10.6-17.6z'%3E%3C/path%3E %3C/svg%3E");
}
@media (min-width: 560px) {
.server_item {
flex-basis: 25%;
}
}
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
color: white;
fill: white;
background: #524940;
}
.container+.container{
margin-top:20px;
}
.item {
display: flex;
flex-direction: column;
position: relative;
height: 100px;
justify-content: center;
align-items: center;
}
.item svg {
height: 2em;
width: 2em;
}
.item::before {
content: "";
position: absolute;
border-right: 1px solid;
height: calc(100% - 20px);
margin: auto;
top: 10px;
right: 0;
}
.item::after {
content: "";
position: absolute;
border-bottom: 1px solid;
width: calc(100% - 20px);
margin: auto;
left: 10px;
bottom: 0;
}
.item:nth-child(1):nth-last-child(3n),
.item:nth-child(1):nth-last-child(3n)~.item {
flex-basis: 33%;
}
.item:nth-child(1):nth-last-child(3n)~ :nth-child(3n+3):nth-last-child(3n-2)::before {
border-right: 0;
}
.item:nth-child(1):nth-last-child(3n)~ :nth-last-child(3)::after,
.item:nth-child(1):nth-last-child(3n)~ :nth-last-child(2)::after,
.item:nth-child(1):nth-last-child(3n)~ :nth-last-child(1)::after {
border-bottom: 0;
}
.item:nth-child(1):nth-last-child(4n),
.item:nth-child(1):nth-last-child(4n)~.item {
flex-basis: 25%;
}
.item:nth-child(1):nth-last-child(4n)~ :nth-child(4n+4):nth-last-child(4n-3)::before {
border-right: 0;
}
.item:nth-child(1):nth-last-child(4n)~ :nth-last-child(4)::after,
.item:nth-child(1):nth-last-child(4n)~ :nth-last-child(3)::after,
.item:nth-child(1):nth-last-child(4n)~ :nth-last-child(2)::after,
.item:nth-child(1):nth-last-child(4n)~ :nth-last-child(1)::after {
border-bottom: 0;
}
<svg style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 1024 1024" id="heart">
<path d="M682.666667 672m32 0l192 0q32 0 32 32l0 0q0 32-32 32l-192 0q-32 0-32-32l0 0q0-32 32-32Z"></path>
<path
d="M682.666667 896H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-128a32.426667 32.426667 0 0 1 11.946667-25.173334L324.693333 512a269.653333 269.653333 0 0 1-32-320.853333l3.413334-5.973334A204.373333 204.373333 0 0 1 469.333333 85.333333h85.333334a204.373333 204.373333 0 0 1 173.653333 97.706667l3.413333 5.973333a269.653333 269.653333 0 0 1-32.426666 322.986667l3.413333 2.56a32 32 0 0 1-40.106667 50.346667l-32-25.6a32.426667 32.426667 0 0 1-11.946666-27.306667 31.573333 31.573333 0 0 1 11.946666-24.746667 205.653333 205.653333 0 0 0 46.08-264.96l-3.84-5.973333A139.093333 139.093333 0 0 0 554.666667 149.333333h-85.333334a139.093333 139.093333 0 0 0-118.186666 66.986667l-3.84 5.973333a205.653333 205.653333 0 0 0 46.08 264.96 31.573333 31.573333 0 0 1 11.946666 24.746667 32.426667 32.426667 0 0 1-11.946666 25.173333L192 698.026667V810.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h469.333334a32 32 0 0 1 0 64z">
</path>
</symbol>
</svg>
<div class="container">
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
</div>
<div class="container">
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
<a class="item">
<svg>
<use xlink:href="#heart" />
</svg>
商品秒杀
</a>
</div>
(demo)
*{
margin: 0;
padding: 0;
}
body{
background: #83c1ff;
}
ul{
list-style: none;
display: grid;
color: #fff;
grid-template-columns: repeat(3, 33.33%);
margin-right: -1px;
margin-bottom: -1px;
}
img{
width: 4em;
height: 4em;
max-width: 100%;
margin-bottom: .5em;
}
ul>li{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1em;
position: relative;
height: 10em;
}
ul>li:before{
content: '';
width: 100%;
height: 1px;
position: absolute;
bottom: -1em;
background: #fff;
}
ul>li:after{
content: '';
height: 100%;
width: 1px;
position: absolute;
right: -1em;
background: #fff;
}
.wrapper{
overflow: hidden;
background: darkslategrey;
display: inline-block;
width: 90%;
margin-left: 5%;
}
<div class="wrapper">
<ul class="list">
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>商品秒杀</p>
</li>
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>企业团购</p>
</li>
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>铁粉卡</p>
</li>
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>以旧换新</p>
</li>
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>话费充值</p>
</li>
<li class="item">
<img src="https://www.easyicon.net/api/resizeApi.php?id=1183590&size=128" alt="">
<p>私码通道</p>
</li>
</ul>
</div>
<ul class="menu-list">
<li class="menu-list-row">
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
</li>
<li class="menu-list-row">
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
</li>
<li class="menu-list-row">
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
<a href="" class="menu-list-item">
<svg class="menu-list-item-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1988"><path d="M511.99789209 37.74220833C250.05941339 37.74220833 37.72429108 250.07416877 37.72429108 512c0 261.92793915 212.33723022 474.25673772 474.27360101 474.25673772 261.93742475 0 474.27676287-212.32879857 474.27676286-474.25673772 0-261.92688519-212.34039209-474.25779167-474.27676286-474.25779167z m0 905.40143027C273.87037353 943.1436386 80.8373902 750.09906177 80.8373902 512c0-238.14016603 193.03298333-431.14258465 431.16050189-431.14258465S943.15734002 273.86194188 943.15734002 512c0 238.0958999-193.03298333 431.1436386-431.15944793 431.1436386z m237.13890841-431.14153069H533.55338769V231.75853203c0-11.91391171-9.66055509-21.55654956-21.55654956-21.55654956-11.89494051 0-21.55760351 9.64052994-21.55760351 21.55654956v301.79801753c0 11.89494051 9.66477091 21.55654956 21.55760351 21.55654955h237.13890842c11.89388656 0 21.55760351-9.662663 21.55760351-21.55654955-0.00210791-11.9118038-9.66477091-21.55549561-21.55760351-21.55549561z" p-id="1989"></path></svg>
<p class="menu-list-item-title">
商品秒杀
</p>
</a>
</li>
</ul>
ul, li, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.menu-list {
background: #524940;
}
.menu-list-row {
display: flex;
}
.menu-list-item {
text-align: center;
position: relative;
padding: 10px;
flex-grow: 1;
}
.menu-list-item::before {
content: '';
width: 1px;
height: 80%;
background: white;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.menu-list-item::after {
content: '';
width: 90%;
height: 1px;
background: white;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.menu-list-row:last-child .menu-list-item::after {
height: 0;
}
.menu-list-item:last-child::before {
width: 0
}
.menu-list-item-icon {
color: white;
}
.menu-list-item-title {
color: white;
font-size: 14px;
margin-top: 5px;
}
html {font-size: calc(16 / 375 * 100vw);}
.grid-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow: hidden; /* 隐藏溢出的 box-shadow */
background: #524940;
}
.grid-nav-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: calc((100% - 1rem * 1.15 - 2rem - .5rem) / 2) 0; /* 正方形容器 */
line-height: 1.15;
color: #f7f1ee;
box-shadow: 16px 0 0 -15px rgba(255, 255, 255, .5), /* 单侧投影 */
0 16px 0 -15px rgba(255, 255, 255, .5);
text-decoration: none;
}
.grid-nav-item > .iconfont {
margin-bottom: .5rem;
font-size: 2rem;
line-height: 1;
}
<nav class="grid-nav">
<a href="#" class="grid-nav-item">
<i class="iconfont icon-clock" aria-hidden="true"></i>
<span>商品秒杀</span>
</a>
<a href="#" class="grid-nav-item">
<i class="iconfont icon-business" aria-hidden="true"></i>
<span>企业团购</span>
</a>
<a href="#" class="grid-nav-item">
<i class="iconfont icon-private" aria-hidden="true"></i>
<span>私码通道</span>
</a>
<a href="#" class="grid-nav-item">
<i class="iconfont icon-sim-card" aria-hidden="true"></i>
<span>铁粉卡</span>
</a>
<a href="#" class="grid-nav-item">
<i class="iconfont icon-exchange" aria-hidden="true"></i>
<span>以旧换新</span>
</a>
<a href="#" class="grid-nav-item">
<i class="iconfont icon-phone-bill" aria-hidden="true"></i>
<span>话费充值</span>
</a>
</nav>
demo HTML
<ul>
<li>
<i class="icon_1 icon"></i>
<p>商品秒杀</p>
</li>
<li>
<i class="icon_2 icon"></i>
<p>企业团购</p>
</li>
<li>
<i class="icon_3 icon"></i>
<p>私码通道</p>
</li>
<li>
<i class="icon_4 icon"></i>
<p>铁粉卡</p>
</li>
<li>
<i class="icon_5 icon"></i>
<p>以旧换新</p>
</li>
<li>
<i class="icon_6 icon"></i>
<p>话费充值</p>
</li>
</ul>
CSS
ul {
position: relative;
overflow: hidden;
padding: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #524940;
margin: 0px;
}
ul::before {
content: '';
position: absolute;
right: 1px;
top: 0px;
width: 1px;
height: 100%;
z-index: 1;
background-color: #524940;
}
ul::after {
content: '';
position: absolute;
right: 0px;
bottom: 0px;
width: 100%;
height: 1px;
z-index: 1;
background-color: #524940;
}
ul>li {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 33.33333%;
width: 100px;
height: 100px;
color: white;
font-size: 14px;
}
li::before {
content: '';
position: absolute;
right: 1px;
top: 10px;
width: 1px;
height: 80px;
background-color: #f3f3f3;
}
li::after {
content: '';
position: absolute;
right: 10px;
bottom: 0px;
width: calc(100% - 20px);
height: 1px;
background-color: #f3f3f3;
}
<!-- zxx：可以 -->
<style>
.nav {
padding: 0.5em;
background-color: #524840;
}
.nav ul {
overflow: hidden;
font-size: 0;
padding: 0;
list-style: none;
}
.nav li {
font-size: 16px;
display: inline-block;
width: 33.3333%;
position: relative;
text-decoration: none;
text-align: center;
}
.nav li:before {
content: '';
display: block;
padding-top: 100%;
}
.nav a {
color: #f0eae6;
position: relative;
border-radius: 20px;
transition: 200ms;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav a::before,
.nav a:after {
content: '';
position: absolute;
}
.nav a::before {
top: 1em;
bottom: 1em;
right: -1px;
border-right: 1px solid;
}
.nav a::after {
bottom: -1px;
left: 1em;
right: 1em;
border-bottom: 1px solid;
}
.nav a:hover, .nav a:focus {
background-color: rgba(56, 46, 46, 0.5);
outline:none;
}
.nav svg {
width: 1.5em;
height: 1.5em;
fill: currentColor;
position: absolute;
bottom: 50%;
left: 0;
right: 0;
margin: 0 auto 4px;
}
.nav strong {
position: absolute;
margin: 4px auto 0;
left: 5%;
right: 5%;
top: 50%;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@media screen and (min-width: 600px) {
.nav li {
width: 25%;
}
}
@media screen and (min-width: 700px) {
.nav li {
width: 20%;
}
}
@media screen and (min-width: 800px) {
.nav li {
width: 16.66666%;
}
.nav li:before {
padding-top: 128px;
}
}
</style>
<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
<symbol id="icon-10" viewBox="0 0 1048 1024">
<path
d="M522.789 62C274.27 62 72.8 263.47 72.8 511.979c0 103.301 34.814 198.47 93.343 274.422l33.819-35.21c-49.603-66.83-78.951-149.591-78.951-239.212 0-221.889 179.884-401.767 401.776-401.767 221.884 0 401.767 179.877 401.767 401.767 0 221.896-179.884 401.773-401.767 401.773-80.087 0-154.698-23.436-217.357-63.818l-30.437 37.712c71.064 46.97 156.235 74.318 247.793 74.318 248.516 0 449.986-201.466 449.986-449.986-0.001-248.509-201.471-449.979-449.986-449.979zM329.936 560.201v48.213h176.776v160.708h48.213v-32.144h-0.001l0.001-0.007V608.414h176.779v-48.213H554.925V463.78h176.779v-48.222H589.66L693.167 312.05l-34.726-34.729-127.625 127.611-127.612-127.611-34.733 34.729 103.507 103.508H329.937v48.222h176.776v96.421z"
fill=""></path>
</symbol>
<symbol id="icon-9" viewBox="0 0 1024 1024">
<path
d="M511.99999648 335.91327734l97.82565733 0c21.61225898 0 39.1300831-17.51872237 39.1300831-39.1300831 0-21.61225898-17.51872237-39.1300831-39.1300831-39.1300831L492.43450625 257.65311026c-64.83318662 0-117.39114844 52.55796182-117.39114844 117.39114843l0 352.17344443c0 21.61225898 17.51872237 39.1300831 39.13008311 39.13008311 21.61225898 0 39.1300831-17.51872237 39.1300831-39.13008311L453.3035249 629.39114844c0-32.41793935 26.27763398-58.69557422 58.69557422-58.69557422l97.82565732 0c21.61225898 0 39.1300831-17.51872237 39.13008311-39.1300831 0-21.61225898-17.51872237-39.1300831-39.1300831-39.13008311L511.99999648 492.43540713c-32.41793935 0-58.69557422-26.27853222-58.69557421-58.69557422l0-39.13008311C453.30442227 362.19091221 479.58205713 335.91327734 511.99999648 335.91327734z">
</path>
<path
d="M511.99999648 62c-248.52706523 0-450 201.4720374-450 450s201.47293477 450 450 450 450-201.4720374 450-450S760.52706172 62 511.99999648 62zM511.99999648 883.73893555c-205.3061376 0-371.73893555-166.43279795-371.73893554-371.73893555S306.69385888 140.26106445 511.99999648 140.26106445s371.73893555 166.43369531 371.73893555 371.73893555S717.30523584 883.73893555 511.99999648 883.73893555z">
</path>
</symbol>
<symbol id="icon-8" viewBox="0 0 1024 1024">
<path
d="M896 512a384 384 0 1 0-384 384 384 384 0 0 0 384-384z m64 0A448 448 0 1 1 512 64a448 448 0 0 1 448 448z">
</path>
<path
d="M544 498.88l118.72 118.4a32 32 0 0 1-45.44 45.44l-128-128A32 32 0 0 1 480 512V224a32 32 0 0 1 64 0z">
</path>
</symbol>
<symbol id="icon-7" viewBox="0 0 1024 1024">
<path
d="M520.64711111 949.53244445c-123.67644445 0-246.44266667-51.54133333-332.23111111-150.75555556l32.42666667-27.98933333C355.44177778 926.208 590.50666667 952.03555556 755.93955555 829.49688889 921.37244445 706.84444445 965.17688889 474.39644445 855.60888889 300.43022222l36.29511111-22.86933333c121.40088889 192.85333333 72.81777778 450.44622222-110.47822222 586.29688889-77.824 57.57155555-169.52888889 85.67466667-260.77866667 85.67466667z">
</path>
<path
d="M136.64711111 725.04888889c-107.40622222-191.94311111-54.95466667-435.65511111 122.08355556-566.72711111 177.03822222-131.18577778 425.41511111-110.36444445 577.76355555 48.35555556l-30.94755555 29.58222222C668.10311111 93.01333334 443.96088889 74.24 284.21688889 192.68266667c-159.744 118.32888889-207.18933333 338.26133333-110.25066667 511.43111111L136.64711111 725.04888889z">
</path>
<path
d="M788.25244445 535.95022222c-10.58133333 139.94666667-129.024 249.51466667-269.42577778 249.51466667-140.51555555 0-258.84444445-109.568-269.53955556-249.40088889l-29.12711111 2.16177778c11.83288889 155.07911111 143.01866667 276.48 298.66666667 276.48s286.83377778-121.40088889 298.66666666-276.48l-29.24088888-2.27555556zM250.76622222 480.54044445C267.94666667 346.16888889 383.20355555 244.90666667 518.82666667 244.90666667c135.62311111 0 250.88 101.26222222 268.06044444 235.63377778l29.01333334-3.75466667c-7.96444445-62.57777778-35.38488889-118.55644445-75.43466667-162.58844444l-20.59377778-20.70755556c-53.47555555-48.46933333-124.24533333-77.824-200.93155555-77.824-76.8 0-147.456 29.35466667-201.04533334 77.824l-20.59377778 20.70755556c-40.04977778 44.032-67.47022222 100.01066667-75.43466666 162.58844444l28.89955555 3.75466667z">
</path>
<path
d="M518.82666667 274.14755556c-132.89244445 0-241.09511111 108.08888889-241.09511112 241.09511111s108.08888889 241.09511111 241.09511112 241.09511111 241.09511111-108.08888889 241.09511111-241.09511111S651.71911111 274.14755556 518.82666667 274.14755556z m0 29.24088889c82.60266667 0 154.16888889 47.67288889 189.09866666 116.84977777H329.728c34.816-69.17688889 106.38222222-116.84977778 189.09866667-116.84977777z m0 423.59466667c-116.84977778 0-211.85422222-95.00444445-211.85422222-211.85422223 0-22.98311111 3.75466667-45.056 10.58133333-65.76355555h402.54577777c6.82666667 20.70755555 10.58133333 42.78044445 10.58133334 65.76355555 0 116.84977778-95.11822222 211.85422222-211.85422222 211.85422223z">
</path>
<path
d="M628.39466667 390.99733334m-14.56355556 0a14.56355555 14.56355555 0 1 0 29.12711111 0 14.56355555 14.56355555 0 1 0-29.12711111 0Z">
</path>
<path d="M827.27822222 374.272L854.47111111 256.05688889l118.32888889 27.19288889"></path>
<path d="M208.09955555 629.248L180.90666667 747.46311112l-118.32888889-27.1928889"></path>
</symbol>
<symbol id="icon-6" viewBox="0 0 1024 1024">
<path
d="M427.625 602H287c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125h140.625c16.875 0 28.125-11.25 28.125-28.125s-11.25-28.125-28.125-28.125zM427.625 377H287c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125h140.625c16.875 0 28.125-11.25 28.125-28.125s-11.25-28.125-28.125-28.125z">
</path>
<path
d="M933.875 855.125h-56.25V467c0-33.75-25.3125-64.6875-59.0625-73.125L568.25 329.1875V180.125c0-19.6875-8.4375-39.375-25.3125-50.625-19.6875-14.0625-47.8125-19.6875-75.9375-11.25L208.25 182.9375C171.6875 191.375 146.375 225.125 146.375 261.6875v596.25H90.125c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125h843.75c16.875 0 28.125-11.25 28.125-28.125s-11.25-30.9375-28.125-30.9375z m-421.875 0H202.625V261.6875c0-11.25 8.4375-22.5 19.6875-25.3125l258.75-67.5c14.0625-2.8125 22.5 0 28.125 2.8125 2.8125 2.8125 2.8125 5.625 2.8125 8.4375v675z m309.375 0h-253.125V385.4375l236.25 61.875c8.4375 2.8125 16.875 14.0625 16.875 19.6875v388.125z">
</path>
<path
d="M737 602h-84.375c-16.875 0-28.125 11.25-28.125 28.125s11.25 28.125 28.125 28.125h84.375c16.875 0 28.125-11.25 28.125-28.125s-11.25-28.125-28.125-28.125z">
</path>
</symbol>
<symbol id="icon-5" viewBox="0 0 1024 1024">
<path
d="M822.9036544 875.28903682V259.34219229c0-20.93023213-8.97009961-41.86046513-23.92026593-56.81063057l-116.61129579-116.6112958c-17.94019922-14.95016631-38.87043223-23.92026592-59.80066436-23.92026592h-337.873754c-44.85049805 0-83.72093027 35.88039844-83.72093028 83.72093028v732.55813945c0 44.85049805 35.88039844 83.72093027 83.72093028 83.72093027h454.4850498c47.84053183-2.99003291 83.72093027-38.87043223 83.72093028-86.71096318z m-538.20598008 29.90033173c-17.94019922 0-29.90033262-11.96013252-29.90033174-29.90033173V145.72093027c0-14.95016631 14.95016631-29.90033262 29.90033174-29.90033261h337.87375401c8.97009961 0 14.95016631 2.99003291 20.930233 8.97009961l116.6112958 116.6112958c5.9800667 5.9800667 8.97009961 11.96013252 8.97009961 20.930233v615.94684365c0 14.95016631-14.95016631 29.90033262-29.90033262 29.90033262h-454.4850498z">
</path>
<path
d="M544.83056474 316.15282373V199.54152792c0-14.95016631-11.96013252-26.91029883-26.91029882-26.91029881s-26.91029883 11.96013252-26.91029883 26.91029882v116.6112958c0 14.95016631 11.96013252 26.91029883 26.91029883 26.91029883s26.91029883-11.96013252 26.91029882-26.91029883z m-89.70099696 0V199.54152792c0-14.95016631-11.96013252-26.91029883-26.91029884-26.91029881s-26.91029883 11.96013252-26.91029883 26.91029882v116.6112958c0 14.95016631 11.96013252 26.91029883 26.91029883 26.91029883s26.91029883-11.96013252 26.91029883-26.91029883z m-86.71096319 0V199.54152792c0-14.95016631-11.96013252-26.91029883-26.91029883-26.91029881s-26.91029883 11.96013252-26.91029883 26.91029882v116.6112958c0 14.95016631 11.96013252 26.91029883 26.91029883 26.91029883s26.91029883-11.96013252 26.91029883-26.91029883z m340.8637878 451.4950169V540.40531573c0-44.85049805-35.88039844-83.72093027-83.72093028-83.72093028h-230.23255869c-44.85049805 0-83.72093027 35.88039844-83.72093027 83.72093028v227.2425249c0 44.85049805 35.88039844 83.72093027 83.72093027 83.72093026h230.23255869c47.84053183 0 83.72093027-38.87043223 83.72093027-83.72093027z m-53.82059854-140.53156172v56.81063144h-56.81063145v-56.81063144h56.81063145z m-203.32225898-53.82059766h-83.72093028V540.40531573c0-14.95016631 14.95016631-29.90033262 29.90033262-29.90033263h59.80066435v62.79069815h-5.98006669z m0 107.64119619h-83.72093028v-56.81063145h86.71096319v56.81063145h-2.99003291z m-53.82059766 116.61129493c-17.94019922 0-29.90033262-11.96013252-29.90033262-29.90033174v-32.89036553h86.71096318v62.79069727h-56.81063056z m110.6312291 0V510.5049831h116.6112958c17.94019922 0 29.90033262 11.96013252 29.90033174 29.90033263v32.89036552h-80.73089648c-14.95016631 0-26.91029883 11.96013252-26.91029971 26.91029883v197.34219229h-38.87043135z m92.69102988 0v-62.79069727h53.82059766v32.89036553c0 14.95016631-14.95016631 29.90033262-29.90033174 29.90033174h-23.92026592z">
</path>
</symbol>
</svg>
<nav class="nav">
<ul>
<li>
<a href="##" title="商品秒杀">
<svg aria-hidden="true">
<use xlink:href="#icon-8"></use>
</svg>
<strong>
商品秒杀
</strong>
</a>
</li>
<li>
<a href="##" title="企业团购">
<svg aria-hidden="true">
<use xlink:href="#icon-6"></use>
</svg>
<strong>
企业团购
</strong>
</a>
</li>
<li>
<a href="##" title="私码通道">
<svg aria-hidden="true">
<use xlink:href="#icon-9"></use>
</svg>
<strong>
私码通道
</strong>
</a>
</li>
<li>
<a href="##" title="铁粉卡">
<svg aria-hidden="true">
<use xlink:href="#icon-5"></use>
</svg>
<strong>
铁粉卡
</strong>
</a>
</li>
<li>
<a href="##" title="以旧换新">
<svg aria-hidden="true">
<use xlink:href="#icon-7"></use>
</svg>
<strong>
以旧换新
</strong>
</a>
</li>
<li>
<a href="##" title="话费充值">
<svg aria-hidden="true">
<use xlink:href="#icon-10"></use>
</svg>
<strong>
话费充值
</strong>
</a>
</li>
</ul>
</nav>
Demo https://codepen.io/crazyboy/pen/pooMZma
/* zxx: 为何打开是空白，或者一闪而过 */
.ad-table {
display: table;
background-color: #524940;
color: white;
}
.ad-table, .ad-table ol {
list-style: none;
padding: 0;
}
.ad-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
width: 7em;
height: 7em;
}
.ad-cell svg {
width: 30%;
height: 30%;
}
.ad-row+.ad-row .ad-cell::before {
content: '';
display: inline-block;
position: absolute;
height: 1px;
width: 85%;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #FFFFFF;
}
.ad-cell+.ad-cell::after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
height: 85%;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #FFFFFF;
}
<ol class="ad-table">
<li class="ad-row">
<ol>
<li class="ad-cell">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z M12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 Z M13,11 L17,11 L17,13 L11,13 L11,6 L13,6 L13,11 Z"/>
</svg>
<div aria-label="商品秒杀">商品秒杀</div>
</li>
</ol>
</li>
</ol>
<style>
.box{
min-width: 300px;
margin: 50px;
}
.row{
display: flex;
background: #524940;
}
.col{
display: flex;
flex: 1;
height: 100px;
padding: 10px;
position: relative;
justify-content: center;
align-items: center;
}
.col:not(:last-child)::before{
content: '';
position: absolute;
right: 0;
height: calc(100% - 20px);
width: 2px;
background: #9d9793;
}
.row:not(:last-child) .col::after{
content: '';
position: absolute;
bottom: 0;
left: 10px;
height: 2px;
width: calc(100% - 20px);
background: #9d9793;
}
.item{
color: #fff;
text-align: center;
}
.item svg{
width: 30px;
height: 30px;
}
.item .title{
font-size: 16px;
margin-top: 5px;
}
</style>
<div class="box">
<div class="row">
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div class="title">商品秒杀</div>
</div>
</div>
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div>企业团购</div>
</div>
</div>
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div>私码通道</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div>铁粉卡</div>
</div>
</div>
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div>以旧换新</div>
</div>
</div>
<div class="col">
<div class="item">
<svg t="1574957279170" class="icon" viewBox="0 0 1148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" width="200" height="200"><path d="M1042.537043 681.002286C1040.1653 692.704964 1030.1166 701.255722 1018.133057 701.786243L427.038552 727.750587C426.664066 727.781794 426.258373 727.781794 425.85268 727.781794 411.996709 727.781794 400.450066 716.890501 399.85713 702.940908 399.20178 688.616829 410.373937 676.508457 424.76043 675.853107L995.507878 650.793771 1089.378966 190.894097 326.926035 190.894097C312.508335 190.894097 300.868071 179.253832 300.868071 164.898546 300.868071 150.574467 312.508335 138.934203 326.926035 138.934203L1121.272666 138.934203C1129.105659 138.934203 1136.501752 142.429403 1141.463688 148.483589 1146.394417 154.506568 1148.391674 162.464389 1146.80011 170.078932L1042.537043 681.002286ZM1051.743151 790.539359C1066.129644 790.539359 1077.801115 802.179624 1077.801115 816.503703 1077.801115 830.858989 1066.129644 842.499253 1051.743151 842.499253L330.327614 842.499253C317.470271 842.499253 306.547771 833.13711 304.581721 820.46701L186.213025 52.33438 26.057965 52.33438C11.640265 52.33438 0 40.694115 0 26.338829 0 12.01475 11.640265 0.374486 26.057965 0.374486L208.588547 0.374486C221.477097 0.374486 232.399598 9.736629 234.365648 22.406729L352.703136 790.539359 1051.743151 790.539359ZM424.229909 873.300704C465.922653 873.300704 499.81361 907.129248 499.81361 948.665956 499.81361 990.202664 465.922653 1024 424.229909 1024 382.505958 1024 348.583793 990.202664 348.583793 948.665956 348.583793 907.129248 382.505958 873.300704 424.229909 873.300704ZM424.229909 972.040106C437.149666 972.040106 447.666474 961.554506 447.666474 948.665956 447.666474 935.746198 437.149666 925.260598 424.229909 925.260598 411.247737 925.260598 400.73093 935.746198 400.73093 948.665956 400.73093 961.554506 411.247737 972.040106 424.229909 972.040106ZM961.83537 873.300704C1003.528114 873.300704 1037.450279 907.129248 1037.450279 948.665956 1037.450279 990.202664 1003.528114 1024 961.83537 1024 920.142626 1024 886.220461 990.202664 886.220461 948.665956 886.220461 907.129248 920.142626 873.300704 961.83537 873.300704ZM961.83537 972.040106C974.786335 972.040106 985.334349 961.554506 985.334349 948.665956 985.334349 935.746198 974.786335 925.260598 961.83537 925.260598 948.915613 925.260598 938.367598 935.746198 938.367598 948.665956 938.367598 961.554506 948.915613 972.040106 961.83537 972.040106Z" p-id="2474" fill="#ffffff"></path></svg>
<div>话费充值</div>
</div>
</div>
</div>
</div>
/* zxx: 选择器用得很溜~ */
.menu-list__row{
display: flex;
flex-wrap: wrap;
}
.menu-list__row-item{
padding: 11% 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #524840;
color: #fff;
}
.menu-name{
margin-top: 10px;
font-size: 22px;
}
.menu-list__row-item:nth-child(1):nth-last-child(3n), .menu-list__row-item:nth-child(1):nth-last-child(3n) ~ .menu-list__row-item, .menu-list__row-item:nth-child(1):nth-last-child(4n), .menu-list__row-item:nth-child(1):nth-last-child(4n) ~ .menu-list__row-item{
flex: 1;
}
.menu-list__row-item:nth-child(1):nth-last-child(3n)::before, .menu-list__row-item:nth-child(1):nth-last-child(3n) ~ .menu-list__row-item:not(:nth-child(3n))::before, .menu-list__row-item:nth-child(1):nth-last-child(4n)::before, .menu-list__row-item:nth-child(1):nth-last-child(4n) ~ .menu-list__row-item:not(:nth-child(4n))::before{
content: '';
position: absolute;
right: 0;
width: 1px;
height: calc(100% - 40px);
background-color: currentColor;
}
.menu-list__row:not(:nth-last-child(1)) > .menu-list__row-item::after{
content: '';
position: absolute;
bottom: 0;
width: calc(100% - 40px);
height: 1px;
background-color: currentColor;
}
<div class="menu-list">
<div class="menu-list__row">
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
</div>
<div class="menu-list__row">
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
<div class="menu-list__row-item" aria-label="商品秒杀">
<a href="javascript:void(0)">
<svg width="32" height="32">
<use xlink:href="#spike"></use>
</svg>
</a>
<span class="menu-name">商品秒杀</span>
</div>
</div>
</div>
<nav class="coo-nav">
<a href="#" class="coo-nav-a">
<svg class="svg-icon">
<use xlink:href="#icon-watch"></use>
</svg>
<span class="coo-nav-span">商品秒杀</span>
</a>
<a href="#" class="coo-nav-a">
<svg class="svg-icon">
<use xlink:href="#icon-fork"></use>
</svg>
<span class="coo-nav-span">企业团购</span>
</a>
<a href="#" class="coo-nav-a">
<svg class="svg-icon">
<use xlink:href="#icon-star"></use>
</svg>
<span class="coo-nav-span">私码通道</span>
</a>
<a href="#" class="coo-nav-a">
<svg class="svg-icon">
<use xlink:href="#icon-star"></use>
</svg>
<span class="coo-nav-span">私码通道</span>
</a>
</nav>
<!-- svg sprite -->
<svg style="display:none">
<symbol id="icon-star" viewBox="0 0 1024 1024">
<path
d="M897.02475785 421.36072708q0 10.18094348-12.0320238 22.21296648l-167.98556122 163.82063007 39.7982321 231.38507126q0.46277048 3.23939099 0.46277049 9.25540249 0 9.71817297-4.8590865 16.42833981t-14.11448899 6.71016683q-8.79263282 0-18.51080579-5.55324181l-207.78379414-109.21375365-207.78379414 109.21375365q-10.18094348 5.55324181-18.51080579 5.55324181-9.71817297 0-14.57725948-6.71016683t-4.8590865-16.42833981q0-2.77662051 0.92554019-9.25540249l39.79823209-231.38507126-168.44833171-163.82063007q-11.56925333-12.49479349-11.56925333-22.21296648 0-17.12249514 25.91512796-21.2874263l232.31061143-33.7822206 104.12328232-210.56041464q8.79263282-18.97357548 22.67573696-18.97357548t22.67573696 18.97357548l104.12328232 210.56041464 232.31061143 33.7822206q25.91512795 4.16493117 25.91512797 21.2874263z">
</path>
</symbol>
<symbol id="icon-fork" viewBox="0 0 1024 1024">
<path
d="M689.1875 94.2366333a117.7115625 117.7115625 0 0 0-59.06250001 219.7125V389.54913331L512 507.6741333 393.87500001 389.54913331V313.9491333A117.7115625 117.7115625 0 0 0 334.8125 94.2366333a117.7115625 117.7115625 0 0 0-59.0625 219.7125V419.0803833l177.1875 177.18750001v105.13124999A117.7115625 117.7115625 0 0 0 512 921.11163331a117.7115625 117.7115625 0 0 0 59.0625-219.71250001V596.26788331l177.1875-177.18750001V313.9491333A117.7115625 117.7115625 0 0 0 689.1875 94.2366333zM334.8125 283.23663331C295.83124999 283.23663331 263.9375 250.75225831 263.9375 212.3616333c0-38.39062499 32.484375-70.875 70.875-70.87499999 38.39062499 0 70.875 32.484375 70.875 70.87499999 0 38.39062499-32.484375 70.875-70.875 70.87500001z m177.1875 590.62499999c-38.98125001 0-70.875-32.484375-70.875-70.875 0-38.39062499 32.484375-70.875 70.875-70.875 38.39062499 0 70.875 32.484375 70.875 70.875 0 38.39062499-32.484375 70.875-70.875 70.875z m177.1875-590.62499999c-38.98125001 0-70.875-32.484375-70.875-70.87500001 0-38.39062499 32.484375-70.875 70.875-70.87499999 38.39062499 0 70.875 32.484375 70.875 70.87499999 0 38.39062499-32.484375 70.875-70.875 70.87500001z">
</path>
</symbol>
<symbol id="icon-watch" viewBox="0 0 1024 1024">
<path
d="M512 209.408c-201.728 0-374.016 125.44-443.8016 302.592C137.984 689.152 310.272 814.592 512 814.592c201.9328 0 374.016-125.44 443.8016-302.592C886.016 334.848 713.9328 209.408 512 209.408z m0 504.32A201.8304 201.8304 0 0 1 310.272 512 201.7792 201.7792 0 0 1 512 310.272 201.7792 201.7792 0 0 1 713.728 512 201.8304 201.8304 0 0 1 512 713.728z m0-322.7648A121.1392 121.1392 0 0 0 390.9632 512 121.1392 121.1392 0 0 0 512 633.0368 121.1392 121.1392 0 0 0 633.0368 512 121.1392 121.1392 0 0 0 512 390.9632z">
</path>
</symbol>
</svg>
html {
font-size: 16px;
}
body {
margin: 0;
background-color: #524940;
}
a {
text-decoration: none;
}
.svg-icon {
position: absolute;
right: 0;
top: 50px;
left: 0;
margin: auto;
fill: #f7f1ee;
width: 60px;
height: 60px;
}
.coo-nav {
display: inline-block;
position: relative;
font-size: 0;
}
.coo-nav::before {
content: '';
position: absolute;
width: 1px;
height: 100%;
right: -1px;
background-color: #524940;
z-index: 1;
}
.coo-nav::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
background-color: #524940;
z-index: 1;
}
.coo-nav-a :only-child {
height: 100%;
}
.coo-nav-a {
display: inline-block;
position: relative;
width: 188px;
height: 200px;
text-align: center;
color: #f7f1ee;
}
.coo-nav-a::before {
content: '';
position: absolute;
border-left: 1px solid;
right: -1px;
top: 15px;
bottom: 15px;
}
.coo-nav-a::after {
content: '';
position: absolute;
border-top: 1px solid;
bottom: -1px;
left: 15px;
right: 15px;
}
.coo-nav-span {
position: absolute;
right: 0;
bottom: 50px;
left: 0;
color: #f7f1ee;
font-size: 16px;
}
.grid-list {
background: #5f5750;
display: grid;
grid-template-columns: repeat(3, 80px);
overflow: hidden;
list-style: none;
}
.grid-list a {
color: #FFF;
font-size: 15px;
padding: 20px 0;
display: block;
text-decoration: none;
}
.grid-item {
text-align: center;
color: #FFF;
font-size: 15px;
text-decoration: none;
position: relative;
float: left;
width: 80px;
height: 80px;
padding: 0 3px;
/* border-left: solid 1px #ccc; */
/* border-bottom: solid 1px #ccc; */
}
.grid-item :before {
position: absolute;
content: "";
background: #e2cfbe;
top: 15px;
right: -1px;
width: 1px;
height: 50px;
}
.grid-item :after {
position: absolute;
content: "";
background: #e2cfbe;
bottom: -1px;
left: 15px;
width: calc(100% - 20px);
height: 1px;
}
.iconfont {
width: 25px;
height: 25px;
margin: auto;
display: block;
background: url("xxx") no-repeat center;
}
<div>
<ul class="grid-list">
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
</ul>
<ul class="grid-list">
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
</ul>
<ul class="grid-list">
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
<li class="grid-item"><a href=""><i class="iconfont"></i>商品秒杀</a></li>
</ul>
</div>
<nav class="nav-list">
<a class="nav-item" href="#">
<i class="iconfont icon-time"></i>
<span>商品秒杀</span>
</a>
<a class="nav-item" href="#">
<i class="iconfont icon-tuangou"></i>
<span>企业团购</span>
</a>
<a class="nav-item" href="#">
<i class="iconfont icon-fma"></i>
<span>私码通道</span>
</a>
<a class="nav-item" href="#">
<i class="iconfont icon-changyongtubiao"></i>
<span>铁粉卡</span>
</a>
<a class="nav-item" href="#">
<i class="iconfont icon-yijiuhuanxin"></i>
<span>以旧换新</span>
</a>
<a class="nav-item" href="#">
<i class="iconfont icon-huafeichongzhi1"></i>
<span>话费充值</span>
</a>
</nav>
.nav-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 190px;
justify-items: center;
align-items: center;
grid-gap: 1px;
background: #524941;
overflow:hidden;
}
.nav-item {
width: 100%;
height: 100%;
position: relative;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 20px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav-item::before {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
width: 150px;
height: 1px;
background: #fff;
transform: translateX(-50%);
}
.nav-item::after {
content: '';
position: absolute;
right: -1px;
top: 50%;
width: 1px;
height: 160px;
background: #fff;
transform: translateY(-50%);
}
.nav-item .iconfont {
font-size: 50px;
margin-bottom: 5px;
}
ul{
margin: 0;
list-style: none;
padding: 0;
}
.nav {
padding: 20px;
background: #524940;
}
.nav__item ul{
display:flex;
}
.nav__list {
position: relative;
flex: 1;
height: 180px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.nav__list::after{
content:"";
display: block;
position:absolute;
bottom: -14px;
right:-14px;
width: 28px;
height:28px;
background: #524940;
z-index:2;
}
.nav__list a {
display: flex;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
text-decoration: none;
}
.nav__list a img{
}
.nav__list a span{
margin-top: 12px;
}
.nav__list:last-child {
border-right: 0;
}
.nav__item:last-child ul .nav__list{
border-bottom: 0;
}
<ul class="nav">
<li class="nav__item">
<ul>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>商品秒杀</span>
</a>
</li>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>企业团购</span>
</a>
</li>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>私码通道</span>
</a>
</li>
</ul>
</li>
<li class="nav__item">
<ul>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>铁粉卡</span>
</a>
</li>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>以旧换新</span>
</a>
</li>
<li class="nav__list">
<a href="#">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACeUlEQVRYR8WXS6hNURjHf/8MJKRIKCS3TCQSuUgxYOA5uFEmFOUxkTKkXMVEBow8imJIYWBg5iavS0oGREIRSZRXhn+t09q3fa59zl57n9s9q1adOmuv9Vvf9/8eS1QYttcDm4HFwNQ4ww5f43wI3JA0kLqtyhbangfsALYDc8vWx/9fA9eAK5LC75ajLYDts8BOYBzwA7gL3AYeA1/iHA9MB6YBa4F1wJJ44l/gsqT9rQhaAti+CmwFPgEXwpT0OcUCtjcCe4BNcf2gpN6ibwsBbH8AZgKngZOpBw8/wHYfcBGYBHyXNGX4mv8AbH8DJgN9kq4XUdsOAgwbP5V0rJ1VbM8A7kX9fJQ0K7++CcD2I2AZsFdSMHvhsL0auAMMSFqT6JbnwIIgTknbsm+GAKLg9gGXJO0uuVUdgDnAs+iOc5kwGwAx1MKfLyRlCm7JUMcC8Zxd0XUhOhaFEM0AjgOHy0yfEdUFiBA3gS3ACUlHMoBXwK+U28dNKrsgB78yivKtpB7lbtNfpuiRsEC8wANgObAhAJwBDgC9kgYTFV3bAhHgFHAIOB8AQlpdKGlsyuGdumDY908CwDtgjKTZowgQClzQ3fsA8Bt4KWnpKAJMBH4Cf7oFMCFEXQbQiQvaGS1U0YOSQl/QNGz3AG8yF9QRYUirt4D5JW4rrCm2VwD3gYYIK4dhqlbaFLOjQH8WhllMJyeiEQAIndWqRiKKcVkpFXcCYLs5FUeASsWoQ4DCYhQSQ3I5rgtgu7gcRyuEDjipIakDYLt1Q5KrckktWU2A9i1ZDqK0Ka0CUKkpzUF0ry3PQXTvYZKD6N7TLAfRvcdpQRUb8ef5PzUGghBLEuSEAAAAAElFTkSuQmCC" alt="">
<span>话费充值</span>
</a>
</li>
</ul>
</li>
</ul>
写得不好，并不是全适配的。 为了凑一行2列，3列，4列的效果，手动添加的媒体查询适配 在线demo
* {
margin: 0;
}
.item {
float: left;
width: 100px;
padding: 20px 15px 0 20px;
background-color: brown;
position: relative;
}
.item::after {
display: block;
content: '';
width: 1px;
height: calc(100% - 40px);
background-color: #fff;
position: absolute;
right: 0;
top: 20px;
}
.item-detail {
padding-bottom: 20px;
text-align: center;
border-bottom: 1px solid #fff;
}
.item-icon svg {
width: 20px;
height: 20px;
}
.item-name {
color: #fff;
}
@media screen and (min-width: 540px) {
.item:nth-child(3) .item-detail, .item:nth-child(4) .item-detail,
.item:nth-child(5) .item-detail, .item:nth-child(6) .item-detail{
border-bottom-color: brown;
}
.item:nth-child(4)::after, .item:nth-child(6)::after{
background-color: brown;
}
}
@media screen and (min-width: 405px) and (max-width: 540px) {
.item:nth-child(4) .item-detail, .item:nth-child(5) .item-detail,
.item:nth-child(6) .item-detail{
border-bottom-color: brown;
}
.item:nth-child(3)::after, .item:nth-child(6)::after{
background-color: brown;
}
}
@media screen and (min-width: 270px) and (max-width: 405px){
.item:nth-child(5) .item-detail,
.item:nth-child(6) .item-detail{
border-bottom-color: brown;
}
.item:nth-child(2)::after, .item:nth-child(4)::after,
.item:nth-child(6)::after{
background-color: brown;
}
}
<div class="container">
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">商品秒杀</div>
</div>
</div>
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">企业团购</div>
</div>
</div>
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">私码通道</div>
</div>
</div>
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">铁粉卡</div>
</div>
</div>
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">以旧换新</div>
</div>
</div>
<div class="item">
<div class="item-detail">
<div class="item-icon">
<svg t="1575045435448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2770" width="200" height="200">
<path d="M544 224h-64v288c0 8.832 3.584 16.832 9.376 22.656l192 191.968 45.248-45.248L544 498.752V224z"
fill="#181818" p-id="2771"></path>
<path
d="M512 896C300.256 896 128 723.744 128 512S300.256 128 512 128s384 172.256 384 384-172.256 384-384 384m0-832C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64"
fill="#181818" p-id="2772"></path>
</svg>
</div>
<div class="item-name">话费充值</div>
</div>
</div>
</div>
本期要点：
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))。auto-fill：自动填充（列表个数动态），minmax()是一个只用在grid布局中的函数，尺寸范围，最小150px，最大1整个格子填满整行。
- flex实现了类似的效果，子项：flex: 1 1 33%; min-width: 140px; 可以添加的额外的占位，这样最后的比例都是一致的。
- 使用查询语句@media screen and (min-width: 600px) {} 没有任何问题，兼容IE9+，更普世的实现，PC移动通用。也可以和flex布局结合（IE10+）。
- 线的隐藏。流派1：宽高个数固定的实现使用树结构伪类匹配，准确匹配需要绘制分隔线的元素。流派2：隐藏，overflow隐藏，还有一种是实色覆盖（适合容易不能overflow:hidden的场景）。
- 线的绘制。4种。1. 伪元素宽高1像素填色，或者1px边框。2. border+clip-path；3. border-radius > border；4. box-shadow负值，box-shadow: 16px 0 0 -15px;
- inset: 1px ==> left: 1px; top: 1px; right: 1px; bottom: 1px;