因为写的很烂，代码就不拿出来了……
效果图展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/font.css" />
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<!-- 这里是头部所有内容-->
<div class="back">
<div class="head_title">
<div class="title_1">
<a href="javascript:">设为首页 | 加入收藏</a>
</div>
<div class="title_2">
<a href="javascript:">中国旅游新闻网 | </a>
<a href="javascript:"> 长城国家文化公园官网</a>
</div>
<div class="search_form">
<form name="form1" id="f1" action="#" method="POST" target="_blank">
<input type="text" class="search_text" placeholder=" 请输入！">
<input type="submit" class="search_button">
</form>
</div>
</div>
</div>
<!--中国旅游网横幅-->
<div class="hengfu">
<img src="http://www.ctnews.com.cn/css/i-banner.jpg" class="lyimg">
</div>
<div class="main">
<div class="item-title">
红色头条 | 奋进新征程 建功新时代 | 红色精神 | 红色影像 | 红色体验 | 红色课堂 | 红色研究 | 专题报道
</div>
<div class="xjp">
<img src="http://www.redtourism.com.cn/pic/2020-01/17/70350_27a40ba4-9f05-414e-ba8a-20c61a6f7497.jpg">
</div>
<div class="redhead">
<!--这里是轮播图片-->
<div class="lunbo">
<div class="content lunbocontent1">
<ul id="item">
<li class="item">
<a href="#" class="lunboing"><img class="imglist"
src="http://www.redtourism.com.cn/hstt/pic/2022-06/09/125140_t1_(0X33X599X370)676b586f-eb63-4357-8dcc-2fc0307aabcb.jpg"></a>
</li>
<li class="item">
<a href="#" class="lunboing"><img class="imglist"
src="http://www.redtourism.com.cn/pic/2022-05/31/124678_t1_(0X57X600X395)517f1563-fe9a-486c-be9c-adfdeb9cb241.jpg"></a>
</li>
<li class="item">
<a href="#" class="lunboing"><img class="imglist"
src="http://www.redtourism.com.cn/hstt/pic/2022-05/12/123656_t1_(0X91X548X399)a0b1bbaa-7653-4981-8d32-e324fbc408ec.jpg"></a>
</li>
<li class="item">
<a href="#" class="lunboing"><img class="imglist"
src="http://www.redtourism.com.cn/hstt/pic/2022-05/05/123280_38b1a97f-4df7-4474-b9e0-a084ce842ed9.jpg"></a>
</li>
<li class="item">
<a href="#" class="lunboimg"><img class="imglist"
src="http://www.redtourism.com.cn/hstt/pic/2022-04/14/122229_t1_(38X6X538X287)d7bfb7a9-dd3e-42ce-9688-9fbadfa169e9.png"></a>
</li>
</ul>
<!--设置左右按钮-->
<div id="btn-left">
《
</div>
<div id="btn-right">
》
</div>
<!--设置按钮-->
<ul id="circle">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<!--这里是红色头条-->
<div class="redheadtext">
<div class="redbac">
<span class="redtitle title"> 红色头条</span>
<span class="redmore more">更多>></span>
</div>
<div class="redcontenttext">
<div class="redhead1 textbox">
<span class="contenttitle">上海：红色基因融入血脉化作奋斗动力</span><br>
<sapn class="contenttext">
这5年代替文本代替文本代替文本代替文本代替
文本代替文本代替文本代替文本代替文本代替文本
代替文本代替文本代替文本代替文本代替文本代
文本代替文本代替文本
</sapn>
</div>
<div class="redhead2 textbox">
<span class="contenttitle">晚上红色旅游饭</span><br>
<sapn class="contenttext">
这5年代替文本代替文本代替文本代替文本代替
文本代替文本代替文本代替文本代替文本代替文本
代替文本代替文本代替文本代替文本代替文本代
文本代替文本代替文本
</sapn>
</div>
<div class="redhead3 textbox">
<sapn class="contenttextbig">
上海600余处红色旧址成为学史课堂
常州三杰纪念馆举办“爱读书的‘常州三杰’”分享会
青海班玛：推进长征国家文化公园青海段（班玛）建设
高质量建设湖北长征、长江国家文化公园 保护
</sapn>
</div>
</div>
</div>
</div>
</div>
<div class="new-cla">
<div class="red-new">
<div class="new-title center-title">
<span class="title"> 奋进新征程 建功新时代</span>
<span class="more">更多>></span>
</div>
<div class="taihang">
<div class="taihangmain">
<img class="taihangimg"
src="http://www.redtourism.com.cn/pic/2022-06/07/125074_t1_(0X6X600X344)144665a6-0baa-4742-80c3-af03ce8e01a7.jpg">
<div class="taihang-text textbox">
<span class="contenttitle">
太行革命老区：幸福新生活 美好新画卷<br>
</span>
<span class="contenttext">
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
</span>
</div>
</div>
<div class="taihangpair">
<div class="taihang-r-t">
<img class="taihang-r-t-img taihang-r-img"
src="http://www.redtourism.com.cn/pic/2022-06/01/124785_t1_(0X51X592X384)764ffa2d-f9d2-4f0c-82cb-c33413004ea7.jpeg">
<div class="taihang-r-t-text">
<div class="contenttitlebox">
<span class="contenttitle">
沂蒙革命老区：红色沂蒙 风光好气象新<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
</span>
</div>
</div>
</div>
<div class="taihang-r-c">
<div class="taihang-r-c-text">
<img class="taihang-r-c-img taihang-r-img"
src="http://www.redtourism.com.cn/pic/2022-05/24/124305_t1_(1X0X595X334)761beb15-9986-4a82-9a00-b3bba42b1ad9.jpg">
<div class="contenttitlebox">
<span class="contenttitle">
甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="taihang-r-b">
<div class="taihang-r-b-text">
<div class="contenttitlebox">
<span class="contenttitle">
致敬国门 坚守初心使命 在吉林最美边境线上探寻红色足迹<br>
</span>
</div>
<div class="content-text-s">
<span class="contenttext-common">
北京丰台·卢沟桥：古桥烽烟<br>
辽宁本溪·东北抗联史实陈列馆：抗联丰碑
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="split-line"></div>
<div class="hongseketang">
<div class="contenttitle hongseketang-title ">
<span class="title">红色课堂</span>
<span class="more">更多>></span>
</div>
<div class="teacher-t">
<img class="teacher-t-img teacher-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="teacher-text">
<div class="contenttitlebox">
<span class="contenttitle">
甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="teacher-c">
<img class="teacher-c-img teacher-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-04/28/102977_t0_(1X11X528X406)fd0a7400-368c-4da5-8521-c706fa3f2491.png">
<div class="teacher-text">
<div class="contenttitlebox">
<span class="contenttitle">
甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="teacher-b">
<img class="teacher-b-img teacher-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-03/02/98759_t0_(0X10X485X374)00f2c276-c29f-493d-a3f0-6604607cf0f4.png">
<div class="teacher-text">
<div class="contenttitlebox">
<span class="contenttitle">
甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ty-js-zt">
<div class="ty-js-left">
<div class="tiyan">
<div class="tiyan-title center-title">
<span class="title"> 红色体验</span>
<span class="more">更多>></span>
</div>
<div class="taihang">
<div class="taihangmain">
<img class="taihangimg"
src="http://www.redtourism.com.cn/pic/2022-06/07/125074_t1_(0X6X600X344)144665a6-0baa-4742-80c3-af03ce8e01a7.jpg">
<div class="taihang-text textbox">
<span class="contenttitle">
太行革命老区：幸福新生活 美好新画卷<br>
</span>
<span class="contenttext">
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
</span>
</div>
</div>
<div class="taihangpair">
<div class="taihang-r-t">
<img class="taihang-r-t-img taihang-r-img"
src="http://www.redtourism.com.cn/pic/2022-06/01/124785_t1_(0X51X592X384)764ffa2d-f9d2-4f0c-82cb-c33413004ea7.jpeg">
<div class="taihang-r-t-text">
<div class="contenttitlebox">
<span class="contenttitle">
沂蒙革命老区：红色沂蒙 风光好气象新<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
抗日战争时期，中国共产党在这里建立第一个抗日敌后根据地；解放战争时期，
党中央在这里指挥“三大战役”取得决定性胜利，从西柏坡出发进京“赶考
</span>
</div>
</div>
</div>
<div class="taihang-r-c">
<div class="taihang-r-c-text">
<img class="taihang-r-c-img taihang-r-img"
src="http://www.redtourism.com.cn/pic/2022-05/24/124305_t1_(1X0X595X334)761beb15-9986-4a82-9a00-b3bba42b1ad9.jpg">
<div class="contenttitlebox">
<span class="contenttitle">
甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="contenttextbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="taihang-r-b">
<div class="taihang-r-b-text">
<div class="contenttitlebox">
<span class="contenttitle">
致敬国门 坚守初心使命 在吉林最美边境线上探寻红色足迹<br>
</span>
</div>
<div class="content-text-s">
<span class="contenttext-common">
北京丰台·卢沟桥：古桥烽烟<br>
辽宁本溪·东北抗联史实陈列馆：抗联丰碑
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jingshen">
<div class="tiyan-title center-title">
<span class="title"> 红色精神</span>
<span class="more">更多>></span>
</div>
<div class="jingshen-left">
<img class="jingshen-img"
src="http://www.redtourism.com.cn/pic/2022-05/24/124305_t1_(1X0X595X334)761beb15-9986-4a82-9a00-b3bba42b1ad9.jpg">
<div class="jingshen-left-text">
<span class="contenttitle">
甘肃会宁放大红色效应 带动全域发展
</span>
</div>
<div class="contenttextbox js-text">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
<div class="hongse-l-b">
<span class="jinshen-l-b-text">
白山黑水间写下不朽史诗<br>
革命薪火 光芒永存<br>
“两弹一星”精神焕发光芒 红色旅游“引擎”作用凸显<br>
</span>
</div>
<div class="hongse-l-b-down">
<span class="jinshen-l-b-d-text">
赓续创新奋斗的精神血脉
</span>
</div>
</div>
<div class="jinshen-right">
<div class="jinshen-right-text">
<!--这里因为时间紧就没有做省略处理-->
<span class="hongyang">
弘扬抗震救灾精神 创造幸福美好生活<br>
传承大庆精神 凝聚奋进力量<br>
传承兵团精神 扎根奉献边疆<br>
伟大抗美援朝精神，弥足珍贵的精神财富<br>
古田会议精神照亮老区旅游致富路<br>
太行精神：弦歌未止薪火永传<br>
红旗渠精神：渠水长流 追梦不休
</span>
</div>
</div>
</div>
</div>
<div class="zhuanti">
<div class="contenttitle zhuanti-title">
<span class="title">专题报告</span>
<span class="more">更多>></span>
</div>
<div class="zhuanti-main">
<div class="baogao1">
<img class="baogao1-img baogaoimg"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="baogao-text">
<div class="contenttitlebox">
<span class="contenttitle">
【专题】甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="zhuanti-textbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
</div>
<div class="zhuanti-main">
<div class="baogao1">
<img class="baogao1-img baogaoimg"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="baogao-text">
<div class="contenttitlebox">
<span class="contenttitle">
【专题】甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="zhuanti-textbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="baogao2">
<img class="baogao1-img baogaoimg"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="baogao-text">
<div class="contenttitlebox">
<span class="contenttitle">
【专题】甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="zhuanti-textbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="baogao3">
<img class="baogao1-img baogaoimg"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="baogao-text">
<div class="contenttitlebox">
<span class="contenttitle">
【专题】甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="zhuanti-textbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="baogao4">
<img class="baogao1-img baogaoimg"
src="http://www.redtourism.com.cn/ztch/pic/2021-06/29/107058_t0_(0X0X565X424)070ab604-3600-470c-b2f0-8dae45df6268.png">
<div class="baogao-text">
<div class="contenttitlebox">
<span class="contenttitle">
【专题】甘肃会宁：放大红色效应 带动全域发展<br>
</span>
</div>
<div class="zhuanti-textbox">
<span class="contenttext">
近年来，甘肃省会宁县依托红军会宁会师旧址（以下简称会宁会师旧址）不断传承红色基因，
赓续红色精神，在弘扬红色文化、完善基地功能、
红色旅游产品开发等方面掀起了一股红色热潮，推动会宁旅游业从单一化向多元化转变。
</span>
</div>
</div>
</div>
<div class="zhuanti-down-text">
【专题】建党百年红色旅游百条精品线路<br>
【专题】“建党百年红色旅游精品线……<br><!--路”广西采风活动 因为时间原因暂未做省略处理-->
【专题】榜样引领时代 使命呼唤担当<br>
【专题】五好讲解员 红色旅游因你更精彩<br>
【专题】讲好红色故事 传承红色基因
</div>
</div>
</div>
</div>
<div class="jubao">
<img class="jubao-img"
src="http://www.redtourism.com.cn/pic/2020-01/17/70353_a3540f62-c618-498a-8d95-ceedc75dbc31.jpg">
</div>
<div class="hongsejingqu">
<div class="jinqu-title">
<span class="title"> 红色景区</span>
<span class="more">更多>></span>
</div>
<div class="dai-ti">
<img class="dai-ti-img"
src="http://www.redtourism.com.cn/pic/2020-07/08/80234_t1_(0X59X600X397)7488f2c5-81e7-4b13-a124-a5d08a67480b.png">
</div>
</div>
<div class="hongseyinxiang">
<div class="yinxiang-title">
<span class="title"> 红色影像</span>
<span class="more">更多>></span>
</div>
<div class="yinxiang-main">
<div class="yinxiang1">
<img class="yinxiang1-img"
src="http://www.redtourism.com.cn/hstp/pic/2022-04/11/122022_t0_(37X3X490X343)1fe277c5-87fc-46bc-9c1c-f623f89154a5.png">
<br>
<span class="yinxiang1-text">
致敬英烈 生命的花朵永远开在春天里
</span>
</div>
<div class="yinxiang2">
<img class="yinxiang2-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-05/25/104751_t1_(0X2X525X297)75cdc5d2-000e-4086-bba4-3a8ae7936db8.png">
<span class="yinxiang2-text">
微访谈 | 中国人民抗日战争纪念馆李洋：心怀敬畏之心，讲好红色故事
</span>
</div>
<div class="yinxiang3">
<img class="yinxiang3-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-05/25/104746_t1_(15X35X547X334)0bd5fbe8-7608-41e9-a4bd-77479f680230.png">
<span class="yinxiang3-text">
微访谈 | 中国人民抗日战争纪念馆李洋：心怀敬畏之心，讲好红色故事
</span>
</div>
<div class="yinxiang4">
<img class="yinxiang4-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-05/25/104745_t1_(1X5X591X337)b13edc48-d132-432d-8308-827601bf2ffd.png">
<span class="yinxiang2-text">
微访谈 | 中国人民抗日战争纪念馆李洋：心怀敬畏之心，讲好红色故事
</span>
</div>
<div class="yinxiang5">
<img class="yinxiang4-img"
src="http://www.redtourism.com.cn/ztch/pic/2021-05/25/104749_t1_(2X1X594X334)156613c3-956b-470c-aa6f-1750d85572d0.png">
<span class="yinxiang2-text">
微访谈 | 中国人民抗日战争纪念馆李洋：心怀敬畏之心，讲好红色故事
</span>
</div>
</div>
</div>
<div class="wenhua-lvyou">
<div class="wl-text-box">
<span class="wl-text">文化和旅游部</span>
</div>
<div class="wl-form">
<select>
<option selected>部直属网站</option>
<option>故宫博物院</option>
</select>
<select>
<option selected>部直属网站</option>
<option>故宫博物院</option>
</select>
<select>
<option selected>部直属网站</option>
<option>故宫博物院</option>
</select>
<select>
<option selected>部直属网站</option>
<option>故宫博物院</option>
</select>
</div>
</div>
<div class="mianze">
<span class="mianze-text">
《中国旅游报》社有限公司简介<br>
中国旅游报 中国旅游新闻网版权所有 未经许可不得转载<br>
京公网安备 11010102002458号 京ICP备05019093号-3<img src="https://icon.cnzz.com/img/pic1.gif"><br>
中华人民共和国互联网新闻信息发布许可证：10120170075<br>
违法和不良信息举报电话：010-85168056
</span>
</div>
</div>
<img class="fix-img1"
src="http://www.redtourism.com.cn/QRCode_1.jpg" alt="">
<img class="fix-img2"
src="http://www.redtourism.com.cn/QRCode_2.jpg" alt="">
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
