前端常用小樣式
阿新 • • 發佈:2018-12-10
1、右箭頭
.right_arrow { width: 3px; height: 3px; border-top: 0.05rem solid #747c8f; border-right: 0.05rem solid #747c8f; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); }
2、選中框樣式
.handle input[type="checkbox"] { width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; -webkit-appearance: none; background-image: url(../images/check.png); background-repeat: no-repeat; background-size: cover; background-size: 1.2rem; background-position: 0; } .handle input[type="checkbox"]:checked { background-position: -0.6rem 0.09rem; background-size: 1.2rem; }
3、字型換行(末尾加…)
/* 單換行 */ .ellipsis-1 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; } /* 雙換行 */ .ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
4、不同大小字型底端對齊(為每個需要對齊的子元素都加上這個)
vertical-align: bottom;
display: inline-block;
5、背景漸變
#grad {
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
6、文字前後的線
h3.title span:before, h3.title span:after {
content: ''; /*CSS偽類用法*/
position: absolute; /*定位背景橫線的位置*/
top: 52%;
/* background: #494949; 寬和高做出來的背景橫線*/
width: 9%;
height: 2px;
}
h3.title span:before{
left: 25%; /*調整背景橫線的左右距離*/
background:linear-gradient(to left,#b6b6b6,#efefef);
}
h3.title span:after {
right: 25%;
background:linear-gradient(to left,#efefef,#b6b6b6);
}
7、H5拆紅包效果
H5拆紅包效果
8、根據X軸旋轉
transform: rotateX(0deg);
transform-origin: top;
transition: all 0.5s;
9、background-img的設定
background-image:url("");
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
10、用layer.open實現的簡單的圖片檢視
JS部分
// 檢視大圖
function showImg(url) {
//alert(url);
var showImg = '<div class="showImg">' +
'<img class="main_img" src="' + url + '" alt="">' +
'<img class="close" onclick="closeLayer()" src="__STATIC__/images/close_white.png" alt="">' +
'</div>'
layer.open({
type: 1,
closeBtn: 1,
className: 'noBg',
title: false,
shadeClose: true,
content: showImg
});
}
// 關閉layer
function closeLayer() {
layer.closeAll();
}
CSS部分:
/* 彈出層圖片,配合layeropen使用 */
.showImg {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.noBg {
background-color: rgba(0, 0, 0, 0);
}
.showImg .main_img {
width: 100%;
height: auto;
}
.showImg .close {
width: 1rem;
height: 1rem;
margin: 1rem auto;
}
11、回到頂部按鈕
<a onclick="$('html,body').animate({'scrollTop':0},600)" id="topup" style="display: inline;">
<img src="__STATIC__/images/topup.png" style="display: block;width: 1.45rem;height:1.45rem;">
</a>
12、jq繫結的onclick失效
在對應的css中新增一個手型
cursor:pointer
13、下拉框樣式
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 2px solid #d4d4d4;
outline: none;
background-color: #fff;
height: 1.5rem;
line-height: 1.5rem;
padding: 0 0.8rem 0 0.48rem;
border-radius: 0.2400rem;
background: url("../images/dg.png") no-repeat scroll right center transparent;
background-position-x: 95%;
}