新闻列表页用到哪些文件
html 里用相对路径把样式引进来，css 里的背景图再相对 css/ 指到 ../image/。两级路径别写反，横幅和「了解详情」箭头会丢。
页面主体是 header、.sub、.mod、footer。导航当前项用 .main_nav_current，左栏当前栏目用 .mod_new_current，分页当前页用 .page_current。新闻一条是 .mod_content 里的 li，缩略图、日期、标题、摘要、「了解详情」都包在同一个 a 里，整行都能点进详情。
维护这页时入口就是 newsCenter.html。栏目、导航都写在这一页上，不要再套一层别的首页头，否则 1200px 版心会对不齐。
列表页结构示例
页头导航、横幅和面包屑如何布局
页头分两截：上面 nav 宽 1200px 居中，logo 在左、.main-nav float: right 在右；下面 .banner 拉满窗口，高 360px，背景图居中。整页 min-width: 1340px，窄于这个宽度会出现横向滚动，这是按 PC 官网来的，不要拿手机断点去套。
当前频道给 li 加上 .main_nav_current，字色 #0062e3，底下一条 2px 线。hover 走同一套，用户才知道自己在「新闻动态」。
横幅下面是 .sub，灰底 60px 高。左边 .sub_nav_hit 绝对定位贴在底边，叠出「新闻中心 / News Center」那块蓝底；右边面包屑 float: right。斜杠不要塞进 ul 的缝里当杂节点，单独一个 li.sub_nav_sep 写 /。
回顶按钮 .returnTop position: fixed，锚点指 #top。图省事写成 javascript:scroll 各家浏览器表现不一样，用页面里现成的 id="top" 最稳。
左侧栏目导航与右侧图文列表如何布局
.mod 还是 1200px 居中。左栏 .mod_new 宽 240px、float: left，右栏 .mod_content 宽 900px、float: right。左栏用阴影把栏目从背景里托出来，当前项 .mod_new_current 左边 3px 蓝条、从蓝到白的渐变。
说白了：左栏是分类，右栏是这一类下面的列表。两条 float 要同一父级，父级 .mod 写了 overflow: hidden，高度才包得住，否则页脚会顶上来。这坑我见过不止一次。
一条新闻从左到右：
1、.mod_content_img：300×170，图 object-fit: cover，裁中间、不变形
2、.mod_content_wrapper：570px，标题、两行摘要、「了解详情」
3、整行一个 a，详情链接写在 a 的 href 上
「了解详情」用 span.mod_more，不要再套一层按钮。箭头是背景图，padding 右边留 50px 给箭头，左边 20px 给字。hover 和整行 li:hover 都切成蓝底白字、白箭头。
左栏点「党群建设」时，把 .mod_new_current 挪到那一项，右栏换成对应列表。静态页先把「公司要闻」写死；接口来了按栏目 id 重绘右栏即可，结构不用改。
日期角标、多行截断与分页如何实现
日期叠在缩略图左上角。.mod_content li 是 position: relative，.mod_data 绝对定位 top: 10px; left: 20px，宽高 60px。上面 p 写日，下面 span 写年/月，例如 12 和 2021/9。默认浅底蓝字，li:hover 改成蓝底白字，跟「了解详情」同一套强调色。
标题一行截断：
摘要两行截断：
我第一次看也卡了一下：标题用 nowrap 就够；摘要要两行，必须 -webkit-box 那三件套，少写 -webkit-line-clamp 会直接铺开把「了解详情」顶下去。
分页在 .mod_page，同样 900px、float: right，跟列表对齐。左边 .mod_tab 写「共23篇」，右边一排圆点。当前页 .page_current 蓝底白字。上一页、下一页用 .page-prev、.page-next，默认灰箭头，hover 再叠一张白箭头（.leftButtonIco / .rightButtonIco 默认 display: none）。
页码是静态的 1、2、…、3，只负责把样子做出来。总篇数、当前页换成接口返回值；点页码再请求对应 page。
新闻列表如何接入真实项目
样式还用 newsCenter.css。栏目、分页、列表结构不用改，只是 .mod_content ul 里的 li 改成接口拼出来。jQuery 必须写在业务脚本前面。提示建议用 Layui 的 layer.msg，具体按实际项目来定。
栏目用 $("body").on("click", ".mod_new a", ...)，分页用 .mod_page a。接口挂了按钮还是可点，能立刻重试；别一点击就把整页 disabled 掉，用户只能干瞪眼。
栏目 id、分页页码按项目约定改。本例 cateId 默认公司要闻，pageSize 写成 5 条方便对版，业务里常见 10 条。
左栏每个链接带上 data-id。res.code、字段名换成项目里的约定。封面图走站点自己的域名，跨域图有的环境会裂。
版心 1200px、左 240 右 900 这两处对一下设计稿；标题截断和两行摘要不用改。分页只改 pageSize 和接口页码。