修改侧栏文章标签列表样式

修改侧栏文章标签列表样式

发布:秋思2020-11-06 04:04分类:关于本站标签:秋思博客 Z-Blog Z-BlogPHP

  昨天把文章标签添加到首页侧栏,发现默认的标签显示排列比较混乱,标签背景色也与整个页面不是很协调,于是决定对侧栏标签列表样式进行修改。话说Z-BlogPHP主题修改比Z-BlogASP要麻烦很多,不能在后台直接修改,然后前行效果观测,需要用FTP软件把相关文件下载到本地,修改好之后重新上传。当然,也可能是我对这个不熟悉,反正我是这么折腾的。没办法,非专业人士,请勿见笑。

CSS+DIV属性样式

  我的想法是把侧栏文章标签分两列排列,在文章标签前面加上li效果,同时修改标签为白色背景,黑色字体。用一句话说就是侧栏文章标签显示效果与文章归档、友情链接显示效果一致。

  借助Firefox的Web开发工具发现控制侧栏文章标签显示效果是由下面CSS样式控制的。

.widget_tags li {
 width:auto;
 float:left
}
.widget_tags li::before {
 display:none
}
.widget_tags li:hover a {
 background-color:#d14836
}

  好吧,经过Firefox的Web开发工具反复测试,把上面的代码修如下,侧栏文章标签显示效果就是我想要的了。

.widget_tags li::before {
 content:"";
 position:absolute;
 width:4px;
 height:4px;
 background-color:#000;
 margin-top:12px
}
.widget_tags li a {
 padding-left:0;
 padding:4px 5px;
 background-color:#fff;
 color:#333;
 margin-right:4px
}
.widget_tags li:hover a {
 background-color:#fff
}

  即:指定widget_tags li的宽度为50%;指定.widget_tags li::before的显示效果;.修改widget_tags li a的背景和字体颜色,同时调整padding左侧宽度。完成修改,然后保存并重新上传,再登录后台清空缓存,回到前台刷新一下页面。现在侧栏文章标签列表显示很整齐了。另外,顺便修改了首页文章调用的图片和摘要内容显示样式。

.list .content .img {
 float:left;
 width:200px;
 height:140px;
 overflow:hidden
}.list .content .imgr {
 line-height:28px;
 margin-left:220px;
 margin-top:-5px;
 max-height:168px;
 text-align:justify;
 text-justify:inter-ideograph;
 overflow:hidden
}

  又是经过N次实验,终于把它修改为下面这样时,首页文章摘要和相关图片显示更协调一些了。

.list .content .img {
 float:left;
 width:230px;
 height:140px;
 overflow:hidden
}.list .content .imgr {
 line-height:28px;
 margin-left:250px;
 margin-top:0px;
 max-height:140px;
 text-align:justify;
 text-justify:inter-ideograph;
 overflow:hidden
}
温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

欢迎使用手机扫描访问本站,还可以关注微信哦~