给你的大前端加入首页5格(增强版)转

    • 内容
    • 相关

    首页5格增强版,加入了手机自适应,效果图如下

    我就分享一下具体教程,首先在首页合适位置加入下面html代码


    <div class="asb asb-indexd asb-indexd-01"><div class="container">
     <ul class="eboxx">
     <li class="eboxx-i eboxx-01">
     <h4>DUX主题</h4>
     <p>扁平化、简洁白色、多设备支持、多功能配置</p>
     <a class="btn btn-sm btn-primary" target="_blank" href="http://fsboke.cn/">查看演示</a>
     </li>
     <li class="eboxx-i eboxx-02">
     <h4>TAO主题</h4>
     <p>优秀淘宝客主题</p>
     <a class="btn btn-sm btn-primary" target="_blank" href="http://fsboke.cn/">查看演示</a>
     </li>
     <li class="eboxx-i eboxx-03">
     <h4>淘宝客值得买主题</h4>
     <p>仿牛杂网/发现值得买网站主题!</p>
     <a class="btn btn-sm btn-primary" target="_blank" href="http://fsboke.cn/">查看演示</a>
     </li>
     <li class="eboxx-i eboxx-04">
     <h4>什么值得买</h4>
     <p>wp什么值得买主题</p>
     <a class="btn btn-sm btn-primary" target="_blank" href="http://fsboke.cn/">查看演示</a>
     </li>
     <li class="eboxx-i eboxx-100">
     <h4>WordPress主题定制</h4>
     <p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p>
     <a class="btn btn-sm btn-danger" target="_blank" href="http://fsboke.cn/">联系我们</a>
     </li>
     </ul>
    </div></div>
    之后再加入美化css就可以实现首页5格自适应了



     /* 首页5格源于Fsboke.cn */
    .eboxx {
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 10px;
    }
    .eboxx h4 {
    font-size: 14px;
    color: #444;
    margin: 10px 0;
    }
    .eboxx-i {
    position: relative;
    float: left;
    width: 20%;
    padding: 18px;
    background-color: #fff;
    color: #777;
    }
    .eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
    border-right: 2px solid #eee;
    }
    .eboxx-i:hover {background-color: #F9F9F9;}
    .eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
    @media (max-width: 1024px) {
    .eboxx .btn-default {display: none;}
    .eboxx h4 {height: 20px;overflow: hidden;}
    }
    @media (max-width: 860px) {
    .eboxx .eboxx-100 {display: none;}
    .eboxx-i {width: 25%;}
    .eboxx-04 {border-right: none;}
    }
    @media (max-width: 640px) {
    .eboxx-i {width: 50%;}
    .eboxx-01 {border-bottom: 2px solid #eee;}
    .eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
    }
    @media (max-width: 480px) {
    .eboxx-i {padding: 10px 15px 15px;}
    .eboxx h4 {margin-bottom: 0;}
    .eboxx-i p {margin: 5px 0}
    }
    每日打开支付宝首页搜“1056355”领红包

    有好的文章或资源希望【唯品乐淘】帮助分享推广,猛戳这里我要投稿

  • 本文标签:

    版权声明:若无特殊注明,本文皆为《淘优折》原创,转载请保留文章出处。

    本文链接:给你的大前端加入首页5格(增强版)转 - https://www.vipletao.cn/post-914.html

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    未显示?请点击刷新