前端常用樣式整理(圖片水平、垂直居中;文本超出省略;吸頂效果、翹邊陰影、四周陰影等)

圖片水平、垂直居中

<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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章