觉醒年代HTML，CSS接下文

CJL_lll

已于 2022-12-21 18:30:31 修改

阅读量172

点赞数

文章标签： html

于 2022-12-21 18:11:35 首次发布

本文链接：https://blog.csdn.net/CJL_lll/article/details/128400364

版权

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>觉醒年代</title>
	<link rel="stylesheet" type="text/css" href="css/new_file.css" />
	<style>
	#pp2{
	width:9999px;
	height:9999px;
	animation:switch 10s infinite;
	margin: 0 auto;
	}
	#pp2>img{
	float:left;
	}
	#pp1{
	width:1000px;
	height:500px;
	overflow:hidden;
	margin: 0 auto
	}
	@keyframes switch{
	0%{};
	20%{transform:translateX(0px);}
	40%{transform:translateX(-1000px);}
	60%{transform:translateX(-2000px);}
	80%{transform:translateX(-3000px);}
	100%{transform:translateX(-4000px);}
	}

	</style>
	<style>
	div.ex {
	background-color: #FFFFFF;
	width: 500px;
	height: 450px;
	border: 10px solid #FFFFFF;
	padding: 10px;
	margin: 10px;
	}
	</style>
	</head>
	<body>

	<div id="top">
	<div id="top_left">

	<ul>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank">剧情介绍</a></li>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank">分集剧情</a></li>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank">演职员表</a></li>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank"></a>荣誉</li>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank">幕后制作</a></li>
	<li><a href="觉醒年代（革命历史题材电视剧）_百度百科" target="_blank">出品摄制单位</a></li>
	<li><a id="gengduo">更多>></a></li>
	</ul>
	</div>
	<div id="top_right">
	<ul>
	<li><a href="#">登录</a></li>
	<li><a href="#">帮助</a></li>
	<li><a href="#">应用</a></li>
	</ul>
	</div>
	<div class="clearfix"></div>
	</div>
	<div id="banner"></div>
	<div id="nav_bg">
	<nav>
	<ul>
	<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>
	</nav>
	</div>
	<div id="main">
	<div id="news">
	<div id="origin">
	<footer>
	<h3 class="img_bar">历史人物</h3>
	<div id="pp1">
	<div id="pp2">
	<img src="img/11.jpg" alt=""width="1000px" ; height="500px""陈独秀";>
	<img src="img/12.jpg" alt=""width="1000px" ; height="500px" "李大钊";>
	<img src="img/13.jpg" alt=""width="1000px" ; height="500px" "胡适";>
	<img src="img/14.jpg" alt=""width="1000px" ; height="500px" "鲁迅";>
	<img src="img/15.jpg" alt=""width="1000px" ; height="500px" "陈望道";>
	<img src="img/16.jpg"alt=""width="1000px" ; height="500px" "陈延年";>
	<img src="img/17.jpg" alt=""width="1000px" ; height="500px" "陈乔年";>
	<img src="img/18.jpg" alt=""width="1000px" ; height="500px" "赵世炎";>
	<img src="img/19.jpg" alt=""width="1000px" ; height="500px" "蔡元培";>
	</div>
	</footer>


	<footer>
	<h3 class="img_bar">历史成就</h3>
	<div>
	<a href=""><img src="img/6.jpg" alt="" width="400" height="500" style="float: left;"></a>
	</div>


	<ul class="news_list">
	<h2><a href="#">在这个浮躁的时代，只有自律的人才能够脱颖而出，成就大事。</a></h2>

	<li><a target="_blank" href="#">陈独秀：他创办的《新青年》（原名《青年杂志》）吹响了思想启蒙的号角，在思想文化领域掀起一场以民主和科学为旗帜，向传统封建思想、道德、文化宣战的新文化运动。</a></li>
	<li><a target="_blank" href="#">李大钊：中国共产主义运动的先驱，伟大的马克思主义者，杰出的无产阶级革命家，中国共产党的主要创始人之一。</a></li>
	<li><a target="_blank" href="#">胡适：新文化运动的倡导者，他提倡的白话文对中国历史产生了深远的影响。他同时也是中国古典文化的研究大家，还接受了西方文化的熏陶，是二十世纪世界上具有举足轻重地位的思想者。</a></li>
	<li><a target="_blank" href="#">鲁迅：伟大的、崇高的英雄'战士、思想先驱和文学巨匠。“横眉冷对千夫指，俯首甘为孺子牛”，这就是他的人生写照。</a></li>
	<li><a target="_blank" href="#">陈望道：首个把《共产党宣言》完整地翻译成中文的人，也是中国第一本马克思主义中文书籍的译介人。</a></li>
	<li><a target="_blank" href="#">陈延年：热血青年，更是革命烈士。在不幸被捕后，他以钢铁般的意志，严守党的机密，宁死不屈。</a></li>
	<div id="video">

	<h3 class="img_bar.">经典语录</h3>
	<div>
	</ul>


	<a href=""><img src="img/5.jpg" alt="" width="400" height="500"></a>
	</div>
	<ul class="news_list2">
	<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>
	<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>
	<li><a href="#">温良，不是温顺，更不是懦弱。温良是一种力量，是一种同情和人类智慧力量！</a></li>
	</ul>
	</div>
	</div>


	<footer>
	<h3 class="img_bar">经典片段</h3>
	<div id="pp1">
	<div id="pp2">
	<img src="img/22.jpg" width="1000px" ; height="500px" ;>
	<img src="img/23.jpg" width="1000px" ; height="500px" ;>
	<img src="img/24.jpg" width="1000px" ; height="500px" ;>
	<img src="./img/25.jpg" width="1000px" ; height="500px" ;>
	<img src="./img/26.jpg" width="1000px" ; height="500px" ;>
	</div>
	</footer>



	<div id="footer" style="background-color:#a766;clear:both;text-align:center;margin-top: 1px;height:112px;">
	<p style="color: #FFFFFF;">李大钊：地球即成白首，吾人尚在青春，以吾人之青春，柔化地球之白首，虽老犹未老也。是则地球一日存在，即吾人之青春一日存在，吾人之青春一日存在，即地球之青春一日存在。</p>

	<p style="color: #FFFFFF;">>周恩来：吾辈生于二十世纪竞争之时代，生于积弱不振之中国，生于外侮日逼，自顾不暇之危急时间，安忍坐视而不一救耶……天下兴亡，匹夫有责！</p>


	<p style="color: #FFFFFF;">赵世炎：发动了上海三次工人罢工运动，震惊中外，影响颇大，他也成为当时著名的工人运动领袖。</p>

	<p style="color: #FFFFFF;">陈独秀：青年如初春，如朝日，如百卉之萌动，如利刃之新发于硎，人生最可宝贵之时期也。</p>

	<p style="color: #FFFFFF;"></p>
	<h3 class="img_bar"style="color: #FFFFFF;">22云一陈佳乐202225060101</h3>
	</p>
	</div>
	</body>