在网站首页添加一个小工具显示副标题,可以很好的展示网站工具,有需要的自取。
html
<div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">超强生产力,动力足!</span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div>
css
/*小工具副标题美化*/
.file-format {
padding: 0 20px;
height: 38px;
background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
}
span.txt-file-format {
font-size: 13px;
font-weight: 700;
color: #424866;
line-height: 18px;
margin-right: 17px;
}
i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
background: url(/img/icon-ps.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_ai[data-v-2775696c] {
background: url(/img/icon-ai.svg) no-repeat 50% / 100%;
}
i.icon_sketch[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
background: url(/img/icon-sketch.svg) no-repeat 50% / 100%;
vertical-align: middle;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
background: url(/img/icon-3dMax.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
background: url(/img/icon-cdr.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_c4d[data-v-2775696c] {
background: url(/img/icon-c4d.svg) no-repeat 50% / 100%;
}
i.icon_blender[data-v-2775696c] {
background: url(/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
/*小工具副标题美化*/