1. 程式人生 > >整理的前端註意事項和筆記

整理的前端註意事項和筆記

長按 陰影 class 調用 abs -s obj jquery cal

/*谷歌瀏覽器10像素字體(適用微信瀏覽器)*/
font-size:14px;
-webkit-transform:scale(0.71);
transform:scale(0.71);

//點擊div以外,div消失
$(‘.search-a‘).on(‘click‘,function(e){
    $(‘#condition‘).slideDown(200);
    e ? e.stopPropagation() : event.cancelBubble = true;
})
$(‘#condition‘).click(function(e){
    e ? e.stopPropagation() : event.cancelBubble = true
; }) $(document).click(function() { $(‘#condition‘).slideUp(200); });

//jQuery實現textarea高度根據內容自適應
$.fn.extend({
    txtaAutoHeight: function () {
        return this.each(function () {
            var $this = $(this);
            if (!$this.attr(‘initAttrH‘)) {
                $this.attr(‘initAttrH‘, $this
.outerHeight()); } setAutoHeight(this).on(‘input‘, function () { setAutoHeight(this); }); }); function setAutoHeight(elem) { var $obj = $(elem); return $obj.css({ height: $obj.attr(‘initAttrH‘), ‘overflow-y‘: ‘hidden‘ }).height(elem.scrollHeight); } } });
//調用 $(function () { $(".txtaMain").txtaAutoHeight(); });

<!-- 阻止微信圖片長按出現菜單 ->
<div ontouchstart = "return false;">
</div>

/*雙重陰影*/
.buttonbox{
  position:relative;
  width:190px;
  height:50px;
  border-radius:50px;
  box-shadow:0px 9px 6px rgba(0,0,0,0.06);
  margin: 40px auto 0;
  text-align:center;
  line-height:50px;
  color:#51BBA8;
}
.buttonbox::after{
  content:‘ ‘;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.06);
}

/* 1、如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中?
方法: */
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父節點,p是img的父節點。

整理的前端註意事項和筆記