<!DOCTYPE html><!--声明文档类型，告诉浏览器：“请用 HTML5 的标准来解析这个网页” -->
<html lang="zh-CN"> <!-- 语言属性，声明网页的主语言为简体中文 -->
<head> <!-- 幕后配置区域，元数据存放区域，给浏览器、搜索引擎、爬虫看的配置信息，决定了网页的编码、标题、适配规则 -->
<meta charset="UTF-8"> <!-- 这个网页的文字编码格式是 UTF-8，编码格式，防止乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端网页适配，网页可在不同设备都可以完美呈现；
viewport指的是 “视口”，即为我要对此视口进行控制width=device-width：强制让网页的宽度等于设备的屏幕宽度，而initial-scale=1.0：设置网页的初始缩放比例为 1.0 -->
<title>央视新闻 - AI赋能制造业升级</title><!-- -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
/* 顶部导航栏 */
.top-nav {
background: #fff;
border-bottom: 1px solid #eee;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.top-nav a {
color: #333;
text-decoration: none;
margin: 0 12px;
}
.top-nav a:hover {
color: #e60012;
}
.top-nav .logo {
width: 120px;
height: 30px;
background: #e60012;
color: #fff;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.top-nav .right {
display: flex;
align-items: center;
}
.top-nav .search {
margin-left: 15px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* 主导航栏 */
.main-nav {
background: #222;
color: #fff;
padding: 0 20px;
}
.main-nav ul {
display: flex;
list-style: none;
}
.main-nav li {
padding: 12px 18px;
}
.main-nav li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.main-nav li.active, .main-nav li:hover {
background: #e60012;
}
/* 轮播图 */
.carousel {
width: 1200px;
margin: 20px auto;
display: flex;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.carousel .img-box {
width: 70%;
overflow: hidden;
}
.carousel .img-box img {
width: 100%;
height: 380px;
object-fit: cover;
}
.carousel .info {
width: 30%;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.carousel .info h2 {
font-size: 22px;
color: #333;
margin-bottom: 15px;
line-height: 1.4;
}
.carousel .info p {
color: #666;
font-size: 14px;
line-height: 1.6;
}
.carousel .nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.carousel .nav .dots {
color: #999;
}
.carousel .nav .icons {
display: flex;
}
.carousel .nav .icons span {
width: 30px;
height: 30px;
border-radius: 50%;
background: #eee;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.carousel .nav .icons span:nth-child(1) {background: #76c945; color: #fff;}
.carousel .nav .icons span:nth-child(2) {background: #ff4444; color: #fff;}
.carousel .nav .icons span:nth-child(3) {background: #ffc107; color: #fff;}
.carousel .nav .icons span:nth-child(4) {background: #4285f4; color: #fff;}
/* 新闻列表区 */
.news-section {
width: 1200px;
margin: 0 auto 30px;
}
.news-item {
display: flex;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.news-item:last-child {
border-bottom: none;
}
.news-item .news-img {
width: 280px;
height: 160px;
overflow: hidden;
margin-right: 18px;
}
.news-item .news-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item .news-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.news-item h3 {
font-size: 18px;
color: #333;
margin-bottom: 8px;
}
.news-item p {
color: #666;
font-size: 14px;
line-height: 1.5;
}
.news-item .news-icons {
display: flex;
justify-content: flex-end;
}
.news-item .news-icons span {
width: 26px;
height: 26px;
border-radius: 50%;
background: #eee;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* 底部频道区 */
.channel-section {
background: #003b70;
color: #fff;
padding: 25px 0;
}
.channel-container {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
}
.channel-card {
background: rgba(255,255,255,0.1);
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.channel-card:hover {
background: rgba(255,255,255,0.2);
}
.channel-card.highlight {
background: #ffcc00;
color: #333;
}
.channel-card h4 {
font-size: 16px;
margin-bottom: 5px;
}
.channel-card p {
font-size: 12px;
}
/* 响应式适配 */
@media (max-width: 1200px) {
.carousel, .news-section, .channel-container {
width: 95%;
}
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
<div class="left">
<div class="logo">央视新闻</div>
<a href="#">首页</a>
<a href="#">时政</a>
<a href="#">新闻</a>
<a href="#">评论</a>
<a href="#">视频</a>
<a href="#">财经</a>
</div>
<div class="right">
<input type="text" class="search" placeholder="搜索">
<a href="#">更多</a>
</div>
</div>
<!-- 主导航栏 -->
<div class="main-nav">
<ul>
<li class="active"><a href="#">新闻</a></li>
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">经济</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">法治</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">文娱</a></li>
<li><a href="#">科技</a></li>
</ul>
</div>
<!-- 轮播图 -->
<div class="carousel">
<div class="img-box">
<img src="https://s41.ax1x.com/2026/01/21/pZckUC4.png" alt="AI赋能制造业">
</div>
<div class="info">
<h2>AI赋能为制造业升级注入源源不断的“数字动力”</h2>
<p>位于浙江杭州萧山区的一家包装工厂，通过集成先进的智能化物流系统与印刷成型设备，实现了从传统制造向智能制造的全面转型。下面，我们一起去揭秘AI究竟能为传统制造业带来怎样的变革？</p>
<div class="nav">
<div class="dots">2 / 3</div>
<div class="icons">
<span>💚</span>
<span>❤️</span>
<span>💛</span>
<span>💙</span>
</div>
</div>
</div>
</div>
<!-- 新闻列表 -->
<div class="news-section">
<div class="news-item">
<div class="news-img">
<a href="https://imgchr.com/i/pZckd29"><img src="https://s41.ax1x.com/2026/01/21/pZckd29.md.jpg" alt="pZckd29.md.jpg" ></a>
</div>
<div class="news-content">
<div>
<h3>万鱼腾跃 在中俄界湖体验冬捕</h3>
<p>人们在现场共同见证千米大网破冰而出，万鱼腾跃竞速的震撼场景，感受传承千年的肃慎渔猎文化，体验北国边境冰雪文化独特魅力。</p>
</div>
<div class="news-icons">
<span>💚</span>
<span>❤️</span>
<span>💛</span>
<span>💙</span>
</div>
</div>
</div>
<div class="news-item">
<div class="news-img">
<a href="https://imgchr.com/i/pZckBK1"><img src="https://s41.ax1x.com/2026/01/21/pZckBK1.md.jpg" alt="pZckBK1.md.jpg" ></a>
</div>
<div class="news-content">
<div>
<h3>第42次南极考察 | “雪龙”号大洋队开始大洋考察作业</h3>
<p>船时1月16日，“雪龙”号大洋队队员在实验室查看抛弃式温深仪回传的数据。</p>
</div>
<div class="news-icons">
<span>💚</span>
<span>❤️</span>
<span>💛</span>
<span>💙</span>
</div>
</div>
</div>
<div class="news-item">
<div class="news-img">
<a href="https://imgchr.com/i/pZck5rt"><img src="https://s41.ax1x.com/2026/01/21/pZck5rt.jpg" alt="pZck5rt.jpg" ></a>
</div>
<div class="news-content">
<div>
<h3>高原玫瑰走俏市场 以“智”赋能、向“新”而行绘就鲜切花产业发展新图景</h3>
<p>这段时间，各地花卉基地进入产销旺季。在甘肃临夏回族自治州的鲜花基地里，10多种鲜切玫瑰批量上市，当地不仅通过科学保鲜技术延长花期，还借助智能化种植技术保障节前供应。</p>
</div>
<div class="news-icons">
<span>💚</span>
<span>❤️</span>
<span>💛</span>
<span>💙</span>
</div>
</div>
</div>
</div>
<!-- 底部频道区 -->
<div class="channel-section">
<div class="channel-container">
<div class="channel-card highlight">
<h4>新闻联播</h4>
<p>CCTV-1 综合</p>
</div>
<div class="channel-card">
<h4>财经</h4>
<p>CCTV-2</p>
</div>
<div class="channel-card">
<h4>中文国际</h4>
<p>CCTV-4</p>
</div>
<div class="channel-card">
<h4>国防军事</h4>
<p>CCTV-7</p>
</div>
<div class="channel-card">
<h4>今日说法</h4>
<p>法治专题</p>
</div>
<div class="channel-card">
<h4>天天学习</h4>
<p>理论专栏</p>
</div>
</div>
</div>
<script>
// 轮播图切换功能
const carouselImages = [
"https://s41.ax1x.com/2026/01/21/pZckUC4.png",
"https://s41.ax1x.com/2026/01/21/pZckBK1.md.jpg",
"https://s41.ax1x.com/2026/01/21/pZck5rt.jpg"
];
const carouselTitles = [
"AI赋能为制造业升级注入源源不断的“数字动力”",
"第42次南极考察 | “雪龙”号大洋队开始大洋考察作业",
"高原玫瑰走俏市场 以“智”赋能、向“新”而行绘就鲜切花产业发展新图景"
];
const carouselTexts = [
"位于浙江杭州萧山区的一家包装工厂，通过集成先进的智能化物流系统与印刷成型设备，实现了从传统制造向智能制造的全面转型。",
"船时1月16日，“雪龙”号大洋队队员在实验室查看抛弃式温深仪回传的数据。",
"这段时间，各地花卉基地进入产销旺季。在甘肃临夏回族自治州的鲜花基地里，10多种鲜切玫瑰批量上市。"
];
let currentSlide = 0;
function changeSlide(direction) {
currentSlide = (currentSlide + direction + carouselImages.length) % carouselImages.length;
document.querySelector(".carousel .img-box img").src = carouselImages[currentSlide];
document.querySelector(".carousel .info h2").textContent = carouselTitles[currentSlide];
document.querySelector(".carousel .info p").textContent = carouselTexts[currentSlide];
document.querySelector(".carousel .dots").textContent = `${currentSlide + 1} / ${carouselImages.length}`;
}
// 自动轮播
setInterval(() => changeSlide(1), 5000);
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
代码成功演示：
