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

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

　　我的想法是把侧栏文章标签分两列排列，在文章标签前面加上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
}