![技术小学生微信公众号 技术小学生微信公众号](/d/file/p/2023/11-06/384a0f88dc69e6f0b9276fec739fb818.png)
![腾讯云服务器大促销。](/d/file/p/2023/06-06/8f2af9e8846e4a93cc2a3890462510dc.png)
![华为服务器](/d/file/p/2023/07-25/08518ffe66f6cea5a59993d8b8d33b96.jpg)
侧边栏和两栏标题美化
将侧边栏标题 sidebar h3 位置css修改成以下。
- #sidebar h3 {
- background: #fff;
- height: 37.5px;
- line-height: 25.5px;
- border-bottom: 1px solid #e2e1e1;
- margin: 0 20px 0 20px;
- text-align: center;
- font-size: 1.8rem;
- letter-spacing: 4px;
- color: #606777;
- }
按照以上css修改后,标题栏位置还多了一个 .title-i ,后台找到 .title-i 将其隐藏。
- .title-i {
- float: left;
- width: 16px;
- display: none;
- }
将 .title-i 隐藏后,如下效果图。
然后,如果使用杂志布局的会发现两栏位置前面的 标题ICO 也会不见了,下图红圈的位置。
然后,将 .cat-box .cat-title a 位置css修改成以下即可。
- .cat-box .cat-title a {
- float: left;
- width: 95%;
- margin-left: 20px;
- color: #606777;
- }
两栏标题美化后
![技术小学生微信公众号 技术小学生微信公众号](/d/file/p/2023/11-06/384a0f88dc69e6f0b9276fec739fb818.png)
![华为服务器](/d/file/p/2023/07-25/08518ffe66f6cea5a59993d8b8d33b96.jpg)
![腾讯云服务器大促销。](/d/file/p/2023/06-06/8f2af9e8846e4a93cc2a3890462510dc.png)
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
文章评论 本文章有个评论