您现在的位置是：首页 > cms教程 > DedeCMS教程DedeCMS教程

修改dedecms文章正文显示样式的方法

千兰2023-09-19DedeCMS教程已有人查阅

导读安装DedeCMS后的默认模板中，正文内容的显示方式为左对齐，段落前面也没有缩进，段落之间间距与行间距也没有任何区别，这样看起来非常不好看

安装DedeCMS后的默认模板中，正文内容的显示方式为左对齐，段落前面也没有缩进，段落之间间距与行间距也没有任何区别，这样看起来非常不好看，也不便阅读，所以需要改变一下排版样式。
之所以会显示成这样的效果是因为在DedeCMS中的整个正文是一个DIV标签，DIV标签里面也没有P标签，可能是因为编辑器的原因，编辑器默认回车时生成BR标签而不是P标签，所以正文里面几乎全是BR标签，导致我们看到的都是分行，而没有段落。
其正文对应的CSS文件目录位置在：\templets\default\style目录下面的Page.css文件里
里面具体的CSS内容为

.viewbox .content{ font-size:14px; padding:12px 16px; line-height:25px; color:#333; }

要想改变其正文的显示效果，比如增加段落缩进，加大段落间距等，可对文章正文的P标签进行适当的CSS样式控制。
我们可以这样做：
第一步，确认正文内容包含P标签
在文章的编辑页面，点击编辑器左上角的“源码”命令，查看一下正文的源代码中每段是否是用P标签包裹，如果不是，则需要先把段落的BR标签改成P标签，当然不是在源代码状态改，可先再点一下“源码”命令回到正常编辑视图，把鼠标点到段落的末尾，然后按下Shift+Enter组合键，这样就会自动加上P标签了。
第二步，修改CSS代码
在PAGE.CSS文件中的任意位置增加如下代码，然后保存即可

.viewbox .content P{ text-indent:2em; margin-bottom:8px; }

第一句代码的作用是增加段落缩进，段落首行缩进两个字符，第二句代码的作用是在每个段落的后面增加段落间距8px，如果你需要其它段落效果，可自行添加相应的CSS代码。
修改完以后，再刷新一下就可以看到效果了。

本文标签：

很赞哦！ ()

上一篇：修改DedeCMS主页左上角的文字的方法

下一篇：DedeCMS默认Logo怎么更换

图文教程

相关源码

(自适应)英文电子芯片电子元件网站pbootcms模板下载基于PbootCMS内核开发的电子元件类企业专用模板，采用响应式设计技术，适配电子元器件、集成电路、半导体等行业的品牌展示与技术文档发布需求。前端布局针对芯片参数表格与产品规格书展示进行深度优化。查看源码
帝国CMS7.5养生生活健康网模板完整带会员中心可封装APP本套模板为生活服务类网站设计，适用于两性健康、减肥瘦身、生活资讯等领域。采用帝国CMS7.5核心开发，结构清晰合理，视觉体验舒适，能够有效满足相关行业的建站需求。查看源码
(自适应响应式)个人作品技术文章博客网站模板下载基于PbootCMS内核开发的响应式博客模板，为数字营销、技术分享类内容打造。采用前沿设计理念，兼顾内容展示与阅读体验，适配各类终端设备。通过本模板可快速构建专业级行业博客，有效传播专业知识与案例成果。查看源码
自适应黑色建筑装饰设计公司个人工作室pbootcms模板基于PbootCMS内核开发的黑金风格模板，为建筑装饰、工程设计类企业打造，采用‌开源架构‌，支持跨行业快速适配，核心优势如下：查看源码
(自适应)绿色宠物门诊兽医行业网站模板该绿色清爽风格网站模板专为宠物门诊与兽医诊所设计，基于PbootCMS内核开发，采用响应式布局确保手机、PC等多端体验一致，帮助宠物医疗机构高效构建线上服务平台。查看源码
自适应车行汽车租赁二手车行业企业网站模板为汽车租赁与二手车交易场景深度优化，采用PbootCMS内核开发，聚焦车辆展示、租赁流程与服务介绍三大核心模块。响应式布局确保PC与移动端数据实时同步，后台一键管理车辆信息查看源码