1 、垂直居中效果
具體查看:http://www.reibang.com/writer#/notebooks/1470914/notes/13795535
2崔泵、多行文本溢出時自動顯示省略號在夸瀏覽器時的解決方案.
在開發(fā)中單行文本溢出顯示省略號很簡單,但是多行文本溢出也是比較常見的,在解決時時常會遇到夸瀏覽器不兼容的問題,最近找到了兩個比較好用的插件,在這里分享下:
兩個插件的地址:
https://github.com/josephschmitt/Clamp.js
https://github.com/FrDH/jQuery.dotdotdot
2.1 Clamp.js的使用方法特別簡單,甚至不需要jquery等依賴庫.
參數(shù): clamp (Number | String | 'auto').
var element= document.getElementById('clampjs');
$clamp(element, {clamp: 3}); //可以直接定義顯示的行數(shù),溢出部
分會自動添加...
$clamp(element, {clamp: '65px'}); ////可以直接定義元素的高度,插件自動計算可以顯示多少行,溢出部分會自動添加...
$clamp(ps, {clamp: 'auto'}); //也可設(shè)置auto,這時標簽元素要設(shè)置高度
2.2 dotdotdot的使用方法,需要依賴于jquery
先引用必須的依賴庫:
<script type="text/javascript" language="javascript"
src="src/jquery.dotdotdot.min.js"></script>
使用也很簡單
<script>
$(function(){
$('.test1').dotdotdot({
// ellipsis: "\u2026 ",
after: 'a', //可以在省略號后面添加一些如'read more'等的提示語.
// watch: 'window'
// wrap: 'letter'
});
$('.test2').dotdotdot();
})
</script>
這個插件在英文狀態(tài)很好用,但在中文狀態(tài)有時不顯示內(nèi)容,知道怎么解決的朋友希望可以告訴我
3憎瘸、img標簽根據(jù)父div等比例縮放不變形.
在開發(fā)中進行列表或圖文布局時,經(jīng)常會遇到圖片需要根據(jù)父div的縮放自動等比例自動縮放而不變形,我們可以根據(jù)媒體查詢在不同的尺寸下給圖片設(shè)置合適的尺寸,但是這樣太繁瑣,并且如果寬高的尺寸和原始圖片尺寸相差很大的話很容易造成圖片失真的現(xiàn)象,先總結(jié)兩種方法可以自動根據(jù)父div的縮放進行等比例縮放.
3.1
.parent-box{ // 對圖片盒子設(shè)置 overflow: hidden;,不需要固定寬高
overflow: hidden;
}
.parent-box img{ // 對圖片進行如下設(shè)置,
max-width: 100%;
max-height: 100%;
}
這樣設(shè)置之后,圖片就可以自動壓縮而不會失真了.在進行響應式布局時也同樣適合.
3.2 使用div的 background屬性設(shè)置背景圖片并配合padding-top來解決
style部分
.img-box-1{max-width: 1024px;}
.img-content{
padding-top:30.85%; /* 316 / 1024 padding-top為圖片的（高度 / 寬度 ）* 100% */
background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
background-size:cover;
background-position:center;
}
html部分
<div class="img-box-1">
<div class="img-content"></div>
</div>
實現(xiàn)的基本原理：將使用到保持元素的寬高比的技巧，為元素添加垂直方向的padding-top的值锅风，使用百分比的形式，這個值是相對于元素的寬而定的肮帐，比如我上面的一張圖片的寬度是1024px训枢，高度為316px忘巧；那么現(xiàn)在的padding-top = （高度 / 寬度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝ 30.85%;
但是僅僅對圖片高度和寬度縮放的放還不夠，我門還必須添加 background-size:cover, 使這個屬性讓背景鋪滿元素的十酣，但是IE8及以下不支持該屬性，因此為了兼容IE下面的瀏覽器吃环，我門還需要再加一個屬性 background-position: center ; 同時我門也要保證 圖片的寬度最大等于父容器的寬度郁轻；因此下面的HTML代碼
知識點參考:http://www.cnblogs.com/tugenhua0707/p/5260411.html
4、div橫向超出一定寬度之后可以橫向滑動
父div：
.father-div{
width: 1920px;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
子div：
.children-div{
width: 384px;
height: 216px;
display: inline-block;
}
5竭沫、視頻播放
