您现在的位置是:首页 > 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代码。
修改完以后,再刷新一下就可以看到效果了。

本文标签:

很赞哦! ()

相关源码

  • (自适应)蓝色五金制品配件管件pbootcms网站源码下载基于PbootCMS内核开发的五金行业专用模板,采用响应式设计架构,确保产品展示在各类移动设备上的呈现。通过模块化布局与工业风视觉设计,帮助五金企业高效展示产品规格、应用场景及技术支持,建立专业可靠的行业形象。查看源码
  • (自适应)电梯扶梯升降梯行业pbootcms企业网站模板(自适应手机版)响应式电梯扶梯类pbootcms模板 电梯生产企业绿色企业网站源码下载PbootCMS内核开发的网站模板,该模板适用于电梯、扶梯类等企业,查看源码
  • (响应式H5)帝国cms7.5文章新闻博客模板带会员中心本模板基于帝国CMS内核开发,为新闻资讯、个人博客及作品展示类网站设计。采用响应式布局技术,确保在手机、平板和电脑等不同设备上都能获得良好的浏览体验。查看源码
  • 宽屏自适应搬家家政快递物流公司网站模板该宽屏大气的响应式网站模板专为搬家公司、家政服务及物流快递企业设计,基于PbootCMS内核开发,通过自适应布局确保手机、PC等多终端体验一致,助力企业高效构建专业在线服务平台。查看源码
  • (PC+WAP)中英双语户外用品帐篷装备pbootcms网站模板下载这款基于PbootCMS开发的中英文双语模板专为户外装备行业设计,适配PC和移动设备。模板采用现代化设计风格,突出户外产品的功能性和实用性,帮助企业建立专业的国际化展示平台。查看源码
  • (自适应响应式)化妆美容口红唇膏化妆品模板pbootcms源码下载基于PbootCMS开发的响应式模板,为化妆品品牌、美容机构打造,通过优雅的视觉呈现提升产品展示效果与品牌调性。采用时尚杂志排版风格,色卡系统规范产品展示。微交互动画增强用户体验,智能推荐算法提升产品关联展示效果。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐