:root {
--custom-color-list-page-number: #FF6F0F; /* 定义自定义颜色变量 /
}
2.文章列表的分页样式
.paging_list {
list-style: none;
display: flex;
justify-content: center;
margin-top: 20px;
padding: 0;
}
.paging_list li {
margin: 0 5px;
}
.paging_list a {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f6ff; / 小正方形背景颜色 /
width: 40px;
height: 40px;
border-radius: 3px;
text-align: center;
border-radius:17px;
text-decoration: none;
color: black;
font-size: 14px;
}
.paging_list a:hover {
background-color: var(--custom-color-list-page-number);
}
.paging_list li.on a {
background-color: var(--custom-color-list-page-number); / 选中状态的背景颜色 /
}
3.在手机端一行只显示一个项目
/ 媒体查询 - 手机端样式 /
@media screen and (max-width: 767px) {
.zdy_list_one {
width: calc(100% - 20px);
}
}
4.自定义标题的颜色和居中
.n-title{
text-align: center;
color: #000;
}
5.最好用的调整模块代码
.zdy_s_gun_app_item {
flex: 0 0 calc(25% - 20px); / Adjust the width as needed /
display: flex;
flex-direction: column; / Stack items vertically /
justify-content: center;
align-items: center;
background-color: #f0f6ff; / 小正方形背景颜色 /
text-align: center;
padding: 20px;
margin-right: 20px; / Adjust the margin as needed /
box-sizing: border-box; / Include padding in element's total width and height */
}
下面是我自己建的几个站点仅供参考部分代码每个站点都稍有改动
More than 1 year has passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme