首页 > 代码库 > 项目总结1

项目总结1

1、移动端1px问题

    <style>        .border{            position: relative;            width: 80%;            height: 20px;            background: yellow;        }        .border_btm:after{            position: absolute;            bottom: 0;            left: 0;            width: 100%;            content: ‘ ‘;            border: 1px solid red;            transform: scaleY(.5);        }    </style><div class="border border_btm">        1像素</div>

2.水平垂直居中

<style>        .oneToast{            position: fixed;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);            -webkit-transform:translate(50%,50%);            white-space: nowrap; /*内容过多时不折行*/            min-width: 8rem;            padding: .9rem 1.6rem;            text-align: center;            font-size: 1.4rem;            color: #fff;            background: rgba(0,0,0, .5);            border-radius: 40px;        }    </style>    <div class="oneToast">        您的购物车已满99件,建议先去结算或清理</div>    

3、点赞加1,再次点击取消(这里前端只是实现交互效果,需要后台数据)

<span class="z_dz">    <i class="icon-vdz"></i>    <b class="zan">56</b></span>
var zDz = $(‘.z_dz‘);    zDz.tap(function(){        $(this).toggleClass(‘z_dzColor‘);        var zanNum =parseInt($(‘.zan‘,this).text());    if(zDz.hasClass(‘z_dzColor‘)){            zanNum +=1;            $(‘.zan‘,this).text(zanNum);                    }else {            zanNum -=1;            $(‘.zan‘,this).text(zanNum);        }    });
 $(‘.zan‘,this).text(zanNum)
ps:$(‘.zan‘,this) 等同于 $(this).find(‘.zan‘)

 

项目总结1