1. 文本超出一行顯示省略號
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2. 文本超出多行顯示省略號
div {
display: -webkit-box;
-webkit-line-clamp: 2; // 行數(shù)
-webkit-box-orient: vertical;
overflow: hidden;
}
3. iOS手機(jī)容器滾動條滑動不順暢
div {
overflow:auto;
-webkit-overflow-scrolling: touch;
}
4.修改滾動條樣式
//隱藏
// 火狐瀏覽器
div {
scrollbar-width: none;
}
// 谷歌瀏覽器webkit
div::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar:滾動條整體部分
::-webkit-scrollbar-thumb:滾動條小方塊(上下或左右拖拉那個小部件)
::-webkit-scrollbar-track:滾動條滑動軌道
::-webkit-scrollbar-button:滾動條兩端的小按鈕
5.三角形角標(biāo)
div {
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: black;
}
6.iOS的audio/video無法自動播放、循環(huán)播放問題
let media= document.getElementById('media');
let state = 0;
document.addEventListener('touchstart', function() {
if(state === 0) {
media.play();
state = 1;
}
},false);
document.addEventListener('WeixinJSBridgeReady', function() {
media.play();
},false);
media.onended = function() {
media.load();
media.play();
}
7.水平垂直居中
// 1.position定位
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
margin: auto;
}
// 2.flex 通過父級控制子級居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
8.圖片懶加載
圖片懶加載可以幫助提升網(wǎng)站的性能和響應(yīng)能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當(dāng)用戶滾動臨近圖片時再去開始加載。
// 可以通過為圖片文件添加loading="lazy"的屬性來實現(xiàn):
<img src="xxxx.jpg" loading="lazy" alt="xxx" width="50" height="50" />
9.輸入提示
當(dāng)用戶在進(jìn)行輸入搜索功能時，如果能夠給出有效的提示，這會大大提升用戶體驗。輸入建議和自動完成功能現(xiàn)在到處可見，我們可以使用Javascript添加輸入建議，方法是在輸入框上設(shè)置事件偵聽器，然后將搜索到的關(guān)鍵詞與預(yù)定義的建議相匹配。
其實，HTML也是能夠讓我們來實現(xiàn)預(yù)定義輸入建議功能的，通過<datalist>標(biāo)簽來實現(xiàn)。需要注意的是，使用時這個標(biāo)簽的id屬性需要和input元素的list屬性一致。
<label for="food">請選擇您的餐品:</label>
<input list="foodList" name="food" id="food">
<datalist id="foodList">
<option value="薯條">
<option value="漢堡包">
<option value="可樂(中杯)">
<option value="可樂(大杯)">
<option value="烤翅">
</datalist>
10.Picture標(biāo)簽
針對只有一個尺寸的圖片素材的時候，我們往往可以通過CSS的object-fit屬性來進(jìn)行裁切適配。但是有些時候需要針對不同的分辨率來顯示不同尺寸的圖片的場景的時候呢？這時候我們可以用HTML提供的<picture>標(biāo)簽，它允許我們來添加多張圖片資源，并且根據(jù)不同的分辨率需求來展示不同的圖片。
<picture>
<source media="(min-width:1024px)" srcset="高清.jpg">
<source media="(min-width:375px)" srcset="低清.jpg">
<img src="默認(rèn)圖片.jpg" style="width: auto;" />
</picture>
11.Base URL
當(dāng)我們的頁面有大量的錨點跳轉(zhuǎn)或者靜態(tài)資源加載時，并且這些跳轉(zhuǎn)或者資源都在統(tǒng)一的域名下時，我們可以用<base>標(biāo)簽來做簡化處理。
<head>
<base target="_blank">
</head>
<body>
// https://www.xxxx.com/990525
<a href="990525">990525</a>
// https://www.xxxx.com/990555
<a href="990555">990555</a>
</body>
12.頁面重定向
我們經(jīng)常會遇到有些站點會有這樣一個功能，“5s后頁面將跳轉(zhuǎn)”。這個交互可以嵌入到HTML中，直接通過<meta>標(biāo)簽，設(shè)置http-equiv="refresh"來實現(xiàn)。
// content=" 重定向發(fā)生的秒數(shù);URL='重定向的目標(biāo)地址' "
<meta http-equiv="refresh" content="4; URL='https://www.baidu.com'">
13.卡券效果
.coupon {
width: 300px;
height: 100px;
line-height: 100px;
margin: 50px auto;
text-align: center;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #eee 0) top right /50% 50px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #eee 0) top left / 50% 50px no-repeat, radial-gradient(circle at right top, transparent 10px, #eee 0) bottom right / 50% 50px no-repeat, radial-gradient(circle at left top, transparent 10px, #eee 0) bottom left / 50% 50px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
