美文网首页
前端的一些技巧

前端的一些技巧

作者: 一米押金 | 来源:发表于2017-02-25 09:10 被阅读0次

    在目前互联网的大环境下,有那么点“全民前端”的意识,iOS最终走向了低谷(对难求一面的我来说),所以我这里记录一些这周学的理解了的一些技巧来让以后的前端开发更有体会
    1.“版心”设置。如果有一个样式要居中(水平居中)展示的话

    <div class="home">
        <div class="inner_c">
        </div>
    </div>
    .inner_c{
         margin:0 auto;
    }
    

    如果是垂直居中,那么可以设置一下Line-height为该“盒子”的height

    2.“隔墙”操作,是针对如果上述“盒子”有进行浮动操作,而后面的模块不想受到其影响的设置

    <div class="cl">
    </div>
    .cl{
      clear:both;
    }
    

    3.在CSS样式里展示背景图,有时候出于内存考虑,还有其他优化方便的考虑的一种做法,方法如下:

    <div class="title">
        <h3>专场招聘</h3>
        <a href="#" class="more">
        MORE
        </a>
    </div>
    

    这里MORE就是要设置图片的,参考CSS的设置如下:

    .more{
        /*特殊方法设置图片*/
        background: url(../img/more2.png);
        /*依赖缩进去掉文字*/
        text-indent: 9999em;
    }
    

    如果尺寸过大的话,可以设置一下background的no-repeat哦,不然会一直重复设置该图片的

    4.“子绝父相“定位设置,是面对如图的情况

    elpsy.png

    我把more+这个图片放在专场招聘的右边,怎么做到的呢?

    .content .inner_c .info .boyajobs .title{
        position: relative;
    }
    
    .content .inner_c .info .boyajobs .title .more{
        /*设置定位*/
        position: absolute;
        top: 39px;
        left: 218px;
    }
    

    这里只放置了主要代码,目的就是让这个按钮相对父控件绝对定位,然后父控件相对定位,top和left,就相当于是向下和向右移动,达到预期的效果,顺带一说,定位设置,无视父控件的padding效果

    相关文章

      网友评论

          本文标题:前端的一些技巧

          本文链接:https://www.haomeiwen.com/subject/skpgwttx.html