1.定义自定义颜色变量
: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 */
}
下面是我自己建的几个站点仅供参考部分代码每个站点都稍有改动
bootstrap确实比较好用。我的js和css目前是本地的没有使用cdn版的改天试一下看看