给网站添加一个好看的小工具副标题

在网站首页添加一个小工具显示副标题,可以很好的展示网站工具,有需要的自取。

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;
}
/*小工具副标题美化*/
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
Slide
产品集

工坊

农业自动化

建站BOX

RNOS

小夕灯具

版权归属所有权©2024杭州软柠科技有限公司/主办上海枫汇网络科技有限公司。保留所有权利。

切换语言:/ EN

服务协议 | Cookie政策 | 服务条款 | 法律声明 | 浙ICP备2024117703号-2 | 浙公网安备33010802013612号 | 本站:沪ICP备2022008782号-7

你有新的私信

请务必要查看您的私信哟~~