仿优设 WordPress 主题 B2 美化添加引导卡片

仿优设侧边栏小工具,适用于wordpress主题,B2测试通过。

效果如图:

实现代码:

<section class="widget widget-uisdc-helper hide_sm">
  <div class="uisdc-helper-main">
    <h2 class="uisdc-helper-title"> 优设学习助手 </h2>
    <ul>
      <li>行业热点,第一时间全知晓</li><li>在线答疑,设计问题来私聊</li>    </ul>
    <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1234567" target="_blank" class="btn btn-orange" data-component="open-division" data-event="hover" data-target="#uisdc_helper_wechat">  加我QQ </a>
  </div>
    <div class="uisdc-helper-thumb"> <img src="./img/uisdc-uu-11pic.png" alt="img"> </div>
  <!--
    <div class="uisdc-helper-wechat" id="uisdc_helper_wechat">
    <div class="helper-content">
      <i class="thumb " style="background-image:url(#)"></i>      <h5>微信号:youshemei6</h5>
    </div>
  </div>
  -->
</section>

<style type="text/css">
.widget-uisdc-helper{position:relative;padding-top:10px}.widget-uisdc-helper .uisdc-helper-main{border:1px solid #f3f3f3;position:relative}.widget-uisdc-helper .uisdc-helper-thumb{position:absolute;right:0;bottom:0}.widget-uisdc-helper .uisdc-helper-thumb .thumb{padding-top:132.075%;background-size:contain}.widget-uisdc-helper .uisdc-helper-title{font-size:16px;font-weight:normal;color:#ff5c00;line-height:20px;position:absolute;left:12px;top:-11px;padding:0 5px;background:#fff}.widget-uisdc-helper ul{padding:25px 24px 0 17px;margin-bottom:15px;font-size:13px}.widget-uisdc-helper ul li{line-height:17px;margin-bottom:6px;position:relative;color:#888}.widget-uisdc-helper .btn{display:inline-block;font-size:12px;line-height:20px;margin:0 0 18px 17px;padding:4px 8px;position:relative;z-index:20}.widget-uisdc-helper .uisdc-helper-wechat{position:absolute;left:50px;bottom:0;padding:10px 15px 8px;text-align:center;background:#fff;box-shadow:0 16px 32px 0 rgba(0,0,0,0.06);transform:translate(-100%, 0);visibility:hidden;opacity:0;transition:all .2s}.widget-uisdc-helper .uisdc-helper-wechat.show{left:5px;visibility:visible;opacity:1;transition:all .2s}.widget-uisdc-helper .uisdc-helper-wechat::after{content:'';display:block;position:absolute;left:100%;bottom:20px;width:0;height:0;border:8px solid #fff;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}.widget-uisdc-helper .uisdc-helper-wechat .thumb{width:106px;padding-top:106px;background-size:contain;margin:0 auto}

.widget-uisdc-helper .uisdc-helper-wechat h5{font-size:12px;font-weight:normal;color:#888;line-height:2;white-space:nowrap}


.widget-uisdc-helper .btn {
    border-radius: 4px;
    background: #ff5c00;
    color: #fff;
    text-decoration: none;
}

</style>

给TA买糖
共{{data.count}}人
人已赞赏
wordpress

SVG+CSS3实现文字动画霓虹灯效果

2020-4-23 12:23:03

wordpress

WordPress 主题 ripro 底部信息统计美化

2020-4-24 12:48:41

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索