css 文字超出省略号
# 单行省略号
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden# 多行省略号
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hiddencss3 flex 左右布局
display: flex;
justify-content: space-betweenjquery 简单实现tab切换效果
jQuery 下载地址 https://jquery.com/download/
<!-- Html 代码 -->
<div class="tabs-block">
<ul class="tab-tiem">
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="tab-content">
<div class="active">页面一</div>
<div>页面二</div>
<div>页面三</div>
</div>
</div>// jQuery 代码
$(function() {
$('.tab-item').on('click', 'a', function() {
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content > div').eq($(this).index()).addClass('active').siblings().removeClass('active');
})
})css/css3 常用垂直居中和水平居中的方法
ps：未考虑兼容问题
/* 第一种*/
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 第二种*/
.box {
text-align: center;
vertical-align: middle;
}
/* 第三种 */
.box {
display: flex;
justify-content: center;
align-items: center
}