新闻页面的开发是前端入门阶段非常常见的需求，核心需要解决两个部分的问题，一是搭建合理的HTML语义化结构，二是设置对应的CSS样式让页面呈现符合预期的效果。下面我们从结构搭建到样式设置逐步讲解具体实现方法。
新闻页面基础HTML结构搭建
新闻页面的核心模块通常包含页面头部、新闻标题区域、新闻列表区域、页面底部四个部分，我们使用语义化标签来搭建整体结构，提升页面的可读性和SEO友好性。
整体结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻资讯页面</title>
<link rel="stylesheet" href="news.css">
</head>
<body>
<!-- 页面头部 -->
<header class="page-header">
<h1 class="site-title">本地新闻网</h1>
</header>
<!-- 新闻标题区域 -->
<section class="news-title-section">
<h2 class="section-title">今日要闻</h2>
</section>
<!-- 新闻列表区域 -->
<section class="news-list-section">
<ul class="news-list">
<li class="news-item">
<span class="news-time">2024-05-20</span>
<a class="news-link" href="news-detail.html">城市新建公园正式对外开放</a>
</li>
<li class="news-item">
<span class="news-time">2024-05-19</span>
<a class="news-link" href="news-detail.html">本年度高考报名人数公布</a>
</li>
<li class="news-item">
<span class="news-time">2024-05-18</span>
<a class="news-link" href="news-detail.html">新能源补贴政策调整通知</a>
</li>
</ul>
</section>
<!-- 页面底部 -->
<footer class="page-footer">
<p class="copyright">© 版权所有 本地新闻网</p>
</footer>
</body>
</html>
结构说明
我们使用<header>标签作为页面头部，放置站点名称；<section>标签划分不同的内容区块，新闻标题区域和新闻列表区域分别用独立的<section>包裹，提升语义化。新闻列表使用无序列表<ul>嵌套<li>的结构，每个列表项包含发布时间和新闻标题链接，这样的结构既清晰又方便后续样式调整。
新闻页面样式设置方法
接下来我们编写对应的CSS样式，让页面结构呈现更美观的视觉效果，样式文件命名为news.css，和上面的HTML文件放在同一目录下。
基础重置与全局样式
/* 清除默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
color: #333;
background-color: #f5f5f5;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
头部与标题区域样式
/* 页面头部样式 */
.page-header {
background-color: #1a73e8;
padding: 20px 0;
text-align: center;
}
.site-title {
color: #fff;
font-size: 28px;
font-weight: 600;
}
/* 新闻标题区域样式 */
.news-title-section {
max-width: 1200px;
margin: 30px auto 0;
padding: 0 20px;
}
.section-title {
font-size: 22px;
padding-bottom: 10px;
border-bottom: 2px solid #1a73e8;
color: #1a73e8;
}
新闻列表样式
/* 新闻列表区域样式 */
.news-list-section {
max-width: 1200px;
margin: 20px auto 0;
padding: 0 20px;
}
.news-list {
list-style: none;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.news-item {
padding: 15px 20px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
transition: background-color 0.2s;
}
.news-item:last-child {
border-bottom: none;
}
.news-item:hover {
background-color: #f8f9fa;
}
.news-time {
color: #666;
font-size: 14px;
margin-right: 20px;
flex-shrink: 0;
}
.news-link {
font-size: 16px;
color: #333;
transition: color 0.2s;
}
.news-link:hover {
color: #1a73e8;
}
底部样式
/* 页面底部样式 */
.page-footer {
max-width: 1200px;
margin: 40px auto 0;
padding: 20px;
text-align: center;
border-top: 1px solid #eee;
}
.copyright {
color: #666;
font-size: 14px;
}
常见问题说明
- 新闻列表中的链接如果指向详情页，只需要修改
<a>标签的href属性为对应的详情页地址即可，比如详情页地址是detail.html?id=1，直接替换即可。 - 如果新闻列表需要添加更多内容，比如新闻摘要，只需要在
<li>标签内新增对应的<p>标签，然后补充对应的CSS样式调整布局即可。 - 页面宽度适配不同屏幕的话，可以在全局样式中添加
max-width和margin: 0 auto的组合，让内容区域居中，同时配合padding避免内容贴边。