酷心工作室 简介

记录生活中的点点滴滴,分享学习中有用的知识点(网站制作、图片处理技巧、视频制作技巧),希望能够结识到更多的朋友。
程序猿

PS: 图片中的老猴子 - 程序猿,是我的真实写照!

当前位置:酷心工作室 >> 网站制作

Zblog自带评论系统里的样式自己写的通用CSS

发布时间:2019-07-20文章分类:网站制作

Zblog通用CSS.jpg

Zblog自带评论系统在不改变程序代码的前提下,只修改CSS样式,简约型CSS如下:

/*****评论CSS样式********/
#divCommentPost{width: 650px; padding: 20px; position: relative;}
#divCommentPost .posttop{ height: 30px; line-height: 30px;}
#divCommentPost input{ height: 30px; line-height: 30px; margin-top: 5px;}
#divCommentPost #txaArticle{ height: 120px; width: 370px; line-height: 30px; margin-top: 5px;}
#divCommentPost .button{ height: 30px; line-height: 30px; width: 80px; }
#divCommentPost #divCommentPost_yzm{ position: absolute;left: 302px;top: 174px;}
ul.msg{margin: 0px 20px; padding: 10px; border: 1px dashed #CCC; margin-top: 10px;}

当评论数量超出后台设置的每页输出评论数量,就会显示分页,分页CSS样式如下:

/*********分页CSS样式*************/
.pagebar{width:688px; text-align: center;font-size: 12px;padding: 14px 0;display:inline-block;}
.pagebar span{display: inline-block;padding: 0 10px;height: 28px;line-height: 28px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #999;cursor: pointer;  margin-right:5px; }
.pagebar .now-page{color: #fff;background: #f04848;border: 1px solid #f04848;}

以上CSS样式只能用2个字形容“简约”,如果你需要,那就拿去吧。

发表评论:

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