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部分
扫描二维码关注公众号,回复:
4453544 查看本文章
// 查看大图
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%;
}