圖片水平、垂直居中
<div>
<img src="1.jpg" alt="haha">
</div>
1、將display設置成table-cell,然後水平居中設置text-align爲center,垂直居中設置vertical-align爲middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
2、彈性佈局(常用,推薦此方法)
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>
單行文本超出省略
overflow: hidden;
text-overflow:ellipsis;//超出顯示...
white-space: nowrap;//不換行
多行文本超出省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//行數
overflow: hidden;//超出隱藏
吸頂效果
position: sticky;
陰影:
box-shadow: #f0f0f0 10rpx 0rpx 15rpx 5rpx;
uniapp寫vue.js,在onLoad裏面寫方法,然後調methods裏面的具體方法,這樣一是不顯的亂,而是遇到初始化數據等問題方便茶軸。
onLoad(){
this.indexbanner();//方法
},
methods:{
// 具體方法
indexbanner(){
this.http.post('index.php/we/video/recvideo', {}).then(res => {
const data = res.data;
}).catch(err => {
})
},
}
先寫到這裏,之後碰到使用頻率高的再記錄吧。
補充:翹邊陰影
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
四周陰影
box-shadow: darkgrey 0rpx 0rpx 20rpx 5rpx;