公司官网新闻点进详情，中间一大段常是后台富文本编辑器保存下来的 HTML：带 h2、h3、p、img。页面自己管栏目、标题、发布时间，正文丢进 .rich，靠样式把层级和配图压住，别撑破版心。
入口是 index.html。版心和栅格用 css/bootstrap.css，重置在 css/base.css，本页样式在 css/newsInformation.css。栏目切换在 js/newsDetail.js。脚本先引 jQuery，再引业务脚本。jQuery 掉到后面，$ 会挂。
新闻详情页用到哪些文件
html 里按这个顺序引：
页面主体是 .banner、面包屑、.newDetail。.newDetail 里从上到下：.tab 栏目、.detail 标题加 .rich 正文、.pageList 上一篇下一篇和返回列表。维护的时候把入口指到 index.html 就行。
详情页骨架
栏目切换与标题区如何布局
栏目是一排 li，当前项加 .on，橙底白字。点一下切高亮：
本例只切样式。业务里一般在这里跳列表或换详情接口，带着栏目 id 走。
标题区 .title 居中。.big 是文章标题，.small 里类型、发布时间、浏览量三个 span 横排，中间留间距。字号随断点变：窄屏标题 18，平板 20，大屏 24。
面包屑在 .bd_whole_top 里，小屏直接藏掉，省纵向空间。横幅 .banner 窄屏定高 135，到 768 再放开。
翻篇 .pageList 左边上一篇下一篇，右边返回列表。栅格用 col-md-10 / col-md-2 分栏；标题过长用省略号裁掉，别把右边「返回列表」顶下去。可点区域加 cursor: pointer。
富文本区域样式如何写
说白了，后台编辑器爱输出 h1～h6、一堆 p、外链大图。不包一层统一样式，标题会跟站点导航抢字号，图会把版心撑出横向滚动条。这坑我见过不止一次。
正文一律丢进 .rich。容器自己定正文字号、行高、颜色、上下内边距，底下一条浅分割线跟翻篇隔开。各级标题只在 .rich 里写死字号，别让编辑器内联样式把整页搞乱——内联 font-size 仍会盖过你的规则时，再按项目约定清或提高优先级。
图片必须 max-width: 100%，高度 auto，左右可居中。我第一次看也卡了一下：图在编辑器里写了固定宽，不加 max-width，手机上一屏装不下。
正文字号、标题阶梯按设计稿改。本例字偏小是沿用原详情页视觉，业务里常见正文 14～16。
后台返回的 HTML 如何显示到详情页
接口把编辑器 HTML 放在某个字段里，例如 content。标题、类型、时间、浏览量、上一篇下一篇各自字段。前端填标题区，再把 HTML 塞进 .rich：
data.content 必须是服务端已转义处理好的 HTML 片段，不要自己拼用户输入，避免 XSS。本例静态页把一段带 h2、h3、img 的正文直接写在 .rich 里，方便看版面；接到项目用上面的 html 回填即可。
jQuery 这套建议用 Layui 做提示，具体按实际项目来定。
如何对接到真实项目中
把 css、js、lib、images 拷进项目，页面按下面这份接。列表地址、详情 id、接口路径按项目约定换。栏目 li 可改成跳列表并带栏目参数。
横幅图、栏目名、.rich 字号按设计改。详情数据用上一节的 renderDetail 填；没有接口就先在 .rich 里写静态 HTML 对版。