子比主题美化 – 侧边栏联系方式美化-晴天生活分享日志

<div class="webmaster-widget">
<div class="webmaster-header" style="background-image: url(/webmaster-bg.webp)">
<img class="webmaster-avatar" src="http://ys.osaka2.cn/wp-content/uploads/2025/04/srchttp___image109.360doc.com_DownloadImg_2020_11_2822_208574549_16_20201128102421853referhttp___image109.360doc.gif">
<div>
 <div>资源网</div>
<div class="webmaster-description">富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善</div>
</div>
</div>

<div class="introduce-block-list">        
<div class="instance-card" style="background-color: #b995ff">
<div class="instance-left">
 <div class="instance-name">可心流量卡:</div>
 <div class="instance-value" title="baidu.com">免费领取，免运费</div>
</div>
<div class="instance-url">
<a href="https://172.lot-ml.com/ProductEn/index/5a85520732be1066" style="color: #b995ff " target="_blank">
<i class="fa fa-linkedin-square"></i> 去看看</a>
</div>
<img src="/bs.png " class="instance-bg-1">
</div>


<div class="instance-card" style="background-color: #ff8989">
<div class="instance-left">
<div class="instance-name">一凡导航:</div>
<div class="instance-value" title="baidu.com">简洁、高效，一键直达</div>
</div>
<div class="instance-url">
<a href="https://www.baidu.cn/" style="color: #ff8989 " target="_blank"><i class="fa fa-linkedin-square"></i> 去看看</a>
</div>
<img src="/bs.png " class="instance-bg-1">
</div>
</div>

<div class="introduce-item-list">            
<div class="instance-card" style="background-color: #2AAE67">
<div class="instance-left">
<div class="instance-name">QQ:</div>
<div class="instance-value" title="123456">123456</div>
</div>
<img src="/bs.png " class="instance-bg-1">
</div>


<div class="instance-card" style="background-color: #ffab2e">
<div class="instance-left">
<div class="instance-name">QQ群:</div>
<div class="instance-value" title="123456">123456</div>
    </div>
<img src="/bs.png " class="instance-bg-1">
</div>
</div>
</div>

上面代码复制到外观-小工具，自定义html（侧边）

自定义css:

.webmaster-widget {
  background-color: var(--box-background-color);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.webmaster-widget .webmaster-header {
  background-size: cover;
  height: 78px;
  background-repeat: no-repeat;
  padding: 10px;
  display: flex;
  gap: 10px;
  border-radius: 10px;
  color: var(--widget-webmaster-color);
}
.introduce-block-list .instance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
  flex-wrap: wrap;
}
.introduce-block-list .instance-card a {
  font-size: 12px;
  background-color: #fff;
  padding: 2px 5px;
  border-radius: 10px;
}
.introduce-block-list .instance-card .instance-left {
  display: flex;
  gap: 10px;
}
.introduce-block-list .instance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
  flex-wrap: wrap;
}
.introduce-block-list .instance-card a {
  font-size: 12px;
  background-color: #fff;
  padding: 2px 5px;
  border-radius: 10px;
}
.introduce-block-list .instance-card .instance-left {
  display: flex;
  gap: 10px;
}
.introduce-item-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  /*.instance-card:nth-child(3n) {
    .instance-bg-1 {
      left: 40px;
      top: -80px;
    }
  }

  .instance-card:nth-child(3n) {
    .instance-bg-1 {
      left: 30px;
      top: 30px;
    }
  }*/
}
.introduce-item-list .instance-card {
  padding: 10px;
}
.introduce-item-list .instance-url {
  display: none;
}
.introduce-item-list .instance-card:nth-child(2n) .instance-bg-1 {
  top: -100px;
  left: 40px;
}
.instance-card {
  color: #fff;
  border-radius: 10px;
  font-weight: 500;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.instance-card .instance-bg-1 {
  position: absolute;
  top: -100px;
  left: -20px;
  z-index: 1;
}
.instance-card .instance-left {
  z-index: 2;
  position: relative;
}
.instance-card .instance-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.introduce-block-list .instance-card .instance-left {
  display: flex;
  gap: 10px;
}
.instance-card .instance-left {
  z-index: 2;
  position: relative;
}
.instance-card .instance-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instance-card .instance-bg-1 {
  position: absolute;
  top: -100px;
  left: -20px;
  z-index: 1;
}
.introduce-item-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
}
.czs-link-l:before {
    content: "\e9bc";
}
/*main.min.css样式的调整版*/
.posts-item.card .item-heading {
    position: relative;
    line-height: 1.4em;
    min-height: 1.8em;
    max-height: 1.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.author-tag .but {
   margin: 1px; 
}

body.nav-fixed {
    padding-top: 75px;
}
@media (max-width: 640px) {
    body.nav-fixed {
        padding-top: 55px;
    }
}
.posts-item .item-heading>a {
    font-weight: bold;
    color: unset;
}

.pagenav {
    padding: 15px 0 0 0;
}

.header-slider-search-more.before {
    margin-bottom: 0.2em;
}

.header-slider-search {
    top: calc(50% - 40px);
}

 .filter-blur .header-slider-card .zib-widget {
                background: rgb(255 255 255 / 50%);
            }

.header-slider-card {
  margin-top: -15px;
  z-index: 1;
}
.swiper-scroll .swiper-slide {
    margin-right: 19px;
}

.payvip-icon:before {
    content: '\f143';
}

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章来源

管理员

隐私政策

PrivacyPolicy

用户协议

UseGenerator

许可协议

NC-SA 4.0

1. 资源都是经过站长或作者收集测试修改后发布分享。转载请在文内以超链形式注明出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。

THE END

未分类