32 lines
951 B
Plaintext
32 lines
951 B
Plaintext
|
|
|||
|
|
.container-applink {
|
|||
|
|
display: grid;
|
|||
|
|
padding: 10rpx 5rpx;
|
|||
|
|
/* grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); */
|
|||
|
|
/* 响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。 *
|
|||
|
|
/*grid-template-columns: 1fr 1fr 1fr 1fr; */
|
|||
|
|
grid-template-columns: repeat(3,1fr);
|
|||
|
|
/* grid-template-columns: 1fr 200px 1fr 200px; */
|
|||
|
|
/* 左右4分 */
|
|||
|
|
gap: 1px;
|
|||
|
|
/* 网格四周的间隔 父容器，子元素，可以不用设置宽度，也不用设置margin间距即可完成如下布局。 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.applink-icon {
|
|||
|
|
width: 3em;
|
|||
|
|
height:3em;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: block;
|
|||
|
|
margin: 0 auto 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.applink-text {
|
|||
|
|
border-radius: 5px;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size:30rpx;
|
|||
|
|
/* color: azure; 根据背景调整文字颜色*/
|
|||
|
|
}
|