Web前端——门户网站设计

一、HTML,CSS学习链接

    HTML 教程 | 菜鸟教程 (runoob.com)

    https://www.runoob.com/html/html-tutorial.html

二、实验任务

   完成以下要求的网站设计:

        用PhotoShop、DreamWeaver、VS Code等开发工具制作一个由静态网页构成的简单网站、要求包含一个首页、多个子页及以上,按照网站开发流程,先做网页效果图,然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能,然后进行网站测试。

        功能要求:各页面应用CSS+DIV网页布局,使用CSS样式使风格统一、页面之间通过超链接切换。该网站首页必须包括系统时间显示并动态更新、网站logo、导航条(带有鼠标事件变化效果)、banner(简单flash动画)、图片、多媒体运用、文字等主要信息展示。

三、代码实现

1.Homepage.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐诗网</title>
		<link rel="stylesheet" type="text/css" href="homepage.css">
	</head>
	<body>
	
		<!-- 导航栏 -->
		<div id=bground1>
			<div id=logo>
			<img src="images/logo.png" alt="logo" width="300" height="125">
			</div>
			<ul>
				<li><a class="active" href="Homepage.html">主页</a></li>
				<li><a href="Poetry.html">诗词</a></li>
				<li><a href="Poet.html">诗人</a></li>
			    <li><a href="History.html">历史</a></li>
			    <li><a href="Classic.html">古籍</a></li>
			</ul>	
		</div>
		<!-- 主图 -->
        <div class="slideshow-container">
            <div class="mySlides fade1">    
                <img src="images/p1.jpg" width="600px" height="400px">    
            </div>    
        </div>   
          
        <div class="slideshow-container">    
            <div class="mySlides fade2">    
                <img src="images/p2.jpg" width="600px" height="400px">    
            </div>    
        </div>    
          
        <div class="slideshow-container">   
            <div class="mySlides fade3">    
                <img src="images/p3.jpg" width="600px" height="400px">    
            </div>    
        </div>
		
		<!-- 诗句 -->
		<div class="poem-container">
			<div class="poem-title">登鹳雀楼</div>
			<div class="poem-author">[唐]王之涣</div>
			<div class="poem-content">白日依山尽,黄河入海流。</div>
			<div class="poem-content">欲穷千里目,更上一层楼。</div>
		</div>
		<div class="poem-container">
			<div class="poem-title">次韵子瞻有美堂夜归</div>
			<div class="poem-author">[宋]苏辙</div>
			<div class="poem-content">饮阑钟虡欲移轩,香雾犹残金博山。</div>
			<div class="poem-content">明月飞来松岭外,游人散落马蹄间。</div>
			<div class="poem-content">城严画鼓初传角,路暗山花自落鬟。</div>
			<div class="poem-content">清境暂时都不见,夜深人尽始来还。</div>
		</div>
		<div class="poem-container">
			<div class="poem-title">陋室铭</div>
			<div class="poem-author">[唐]刘禹锡</div>
			<div class="poem-content">山不在高,有仙则名。水不在深,有龙则灵。</div>
			<div class="poem-content">斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。</div>
			<div class="poem-content">谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。</div>
			<div class="poem-content">无丝竹之乱耳,无案牍之劳形。</div>
			<div class="poem-content">南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?</div>
		</div>
		
		<!-- 侧图 -->
	    <div id="right-block1">
			<img src="images/C2.jpg" width="300px" height="650px">  
		</div>
		<div id="right-block2">
			<img src="images/C3.jpg" width="300px" height="650px">  
		</div>		
	</body>
</html>

2.homepage.css

/* background */
#bground1{
	background-image: url(images/background1.jpg) ;
	background-size: cover;
	position:relative; 
    top:0;
}

#bground2{
    background-image: url(images/Background2.jpg);
    background-position: top;
    background-repeat: no-repeat;
	padding: 500px;
	background-size: cover;
}

/* ####################################################### */
/* logo*/
#logo{
	margin-left: 225px;
}

/* ####################################################### */
/* 导航栏 */
ul {
    list-style-type: none;
    margin-left: 350px;
    padding-top: 20px;
	padding-left: 200px;
    overflow: hidden;
    background-color: transparent; /*透明背景*/
    position: absolute;
	top:0;
    width: 70%;
	color:black
}

li {
    float: left; 
	margin-right: 15px; 
}

.active{
	background-color: aliceblue;
}

li a {
    display: block;
	background-color: white;
    text-align: left;
	margin-top: 20px;
	padding: 10px;
    text-decoration: none;
    font-family: '楷体';
	font-size: 25px;
	color:black
	border: 1px solid ;
	border-radius: 40px; 
	color:black
}

li a:hover {
    color: gray; 
}

li a:active {
    color: black;
    background-color: aliceblue; 
}

/* ##################################################### */
.slideshow-container {    
    max-width: 10px;    
    position: absolute;  
	top:175px;
	left:150px;
    margin: auto;    
}    
  
.mySlides {      
    position: absolute;    
    width: 100%;    
    opacity: 0%; /* 初始状态设置为透明 */  
    animation-timing-function: ease-in-out; /* 平滑过渡效果 */  
    animation-iteration-count: infinite; /* 无限循环 */  
}    
  
.fade1 {    
    animation-name: slide;    
    animation-duration: 7s; /* 所有动画设置为相同的持续时间 */  
    animation-delay: 0s; /* 第一个动画无延迟 */  
}    
  
.fade2 {    
    animation-name: slide;    
    animation-duration: 7s; /* 保持与fade1相同的持续时间 */  
    animation-delay: 8s; /* 第二个动画在第一个动画结束后开始 */  
}    
  
.fade3 {    
    animation-name: slide;    
    animation-duration: 7s; /* 保持与fade1和fade2相同的持续时间 */  
    animation-delay: 16s; /* 第三个动画在第二个动画结束后开始 */  
}    
  
@keyframes slide {    
    0% {opacity: 0;}     
    10% {opacity: 1;} 
	80% {opacity: 1;} 
    90% {opacity: 0;}  
    100% {opacity: 0;}    
}  

/* ##################################################### */
/* 诗句 */
.poem-container{
	background-image: url(images/Background3.jpg);
	position:relative;
	top:475px;
	border: 50px solid aliceblue;
	border-top: 50px solid aliceblue;
	border-bottom: 5px solid ;
	border-left: 150px solid aliceblue;
	border-right: 100px solid aliceblue;
	width: 550px;
	height: 200px;	
	padding: 20px;
	padding-top: 50px;
}
.poem-title {
    font-family: "楷体";
    font-size: 32px;
    text-align: center;
	font-weight: bold;
    margin-bottom: 10px;
  }
.poem-author {
    font-family: "楷体";
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
.poem-content {
    font-family: "楷体";
    font-size: 24px;
    line-height: 1.0;
    text-align: center;
  }
  
  
/* ############################################### */
  #right-block1 {  
      position: absolute;  
      right: 10px;  
      top: 175px; 
      width: 300px;  
      height: auto; 
      background-color: antiquewhite;
	  padding: 20px;
  }
  #right-block2 {
      position: absolute;  
      right: 10px;  
      top: 900px; 
      width: 300px;  
      height: auto; 
      background-color: antiquewhite;
  	  padding: 20px;
  }

3.Poetry.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐诗网---诗词</title>
		<link rel="stylesheet" type="text/css" href="Poetry.css">
	</head>
	<body>
		
		<!-- 导航栏 -->
		<div id=bground1>
			<div id=logo>
			<img src="images/logo.png" alt="logo" width="300" height="125">
			</div>
			<ul>
				<li><a href="Homepage.html">主页</a></li>
				<li><a class="active" href="Poetry.html">诗词</a></li>
				<li><a href="Poet.html">诗人</a></li>
				<li><a href="History.html">历史</a></li>
				<li><a href="Classic.html">古籍</a></li>
			</ul>	
		</div>
		
		<!-- 三块-唐诗宋词元曲-->
		 <!-- 唐诗 -->
		<div class="container">
		  <div class="left">
			  <div class="poem-container">
			  	<!-- 将进酒 -->
			  	<div class="poem-title">将进酒</div>
			  	<div class="poem-author">[唐]李白</div>
			  	<div class="poem-content">君不见黄河之水天上来,奔流到海不复回。
			  						
君不见高堂明镜悲白发,朝如青丝暮成雪。
			  
人生得意须尽欢,莫使金樽空对月。
			
    天生我材必有用,千金散尽还复来。	
		  
烹羊宰牛且为乐,会须一饮三百杯。
			  
岑夫子,丹丘生,将进酒,杯莫停。
			  
与君歌一曲,请君为我倾耳听。
			  
钟鼓馔玉不足贵,但愿长醉不复醒。
			  
古来圣贤皆寂寞,惟有饮者留其名。
			  
陈王昔时宴平乐,斗酒十千恣欢谑。
			  
主人何为言少钱,径须沽取对君酌。
			  
五花马,千金裘,呼儿将出换美酒。
		  
与尔同销万古愁。   
		    </div>
		  </div>
		  <!-- 锦瑟 -->
		  <div class="poem-container">
			  <div class="poem-title">锦瑟</div>
			  <div class="poem-author">[唐]李商隐</div>
			  <div class="poem-content">锦瑟无端五十弦,一弦一柱思华年。

庄生晓梦迷蝴蝶,望帝春心托杜鹃。

沧海月明珠有泪,蓝田日暖玉生烟。

此情可待成追忆,只是当时已惘然。
              </div>
		  </div>
		</div>  
		
		<!-- 宋词 -->
		<div class="container">
		  <div class="middle">
             <!-- <定风波·莫听穿林打叶声> -->
			<div class="poem-container">
			  <div class="poem-title">定风波·莫听穿林打叶声</div>
			  <div class="poem-author">[宋]苏轼</div>
	<div class="poem-content">三月七日,沙湖道中遇雨。
						雨具先去,同行皆狼狈,余独不觉,
						已而遂晴,故作此词。
						莫听穿林打叶声,何妨吟啸且徐行。
						竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。
						料峭春风吹酒醒,微冷,山头斜照却相迎。
						回首向来萧瑟处,归去,也无风雨也无晴。
					</div>	
			</div>
			<!-- 一剪梅·舟过吴江 -->
			<div class="poem-container">
				<div class="poem-title">一剪梅·舟过吴江</div>
				<div class="poem-author">[宋]蒋捷</div>
			    <div class="poem-content">一片春愁待酒浇,江上舟摇,楼上帘招;

秋娘渡与泰娘桥,风又飘飘,雨又萧萧。

何日归家洗客袍?银字笙调,心字香烧。

流光容易把人抛,红了樱桃,绿了芭蕉。
				</div>	
			</div>
			<!-- <念奴娇·赤壁怀古> -->
			<div class="poem-container">
			<div class="poem-title">念奴娇·赤壁怀古</div>
			<div class="poem-author">[宋]苏轼</div>
<div class="poem-content">大江东去,浪淘尽,千古风流人物。
故垒西边,人道是,三国周郎赤壁。
乱石穿空,惊涛拍岸,卷起千堆雪。
江山如画,一时多少豪杰。
			
遥想公瑾当年,小乔初嫁了,雄姿英发。
羽扇纶巾,谈笑间,樯橹灰飞烟灭。
故国神游,多情应笑我,早生华发。
人生如梦,一尊还酹江月!
			</div>
		  </div>
		</div>
		  
		  <!-- 元曲 -->
		<div class="container">
		  <div class="right">
			  <!-- 山坡羊 潼关怀古 -->
			<div class="poem-container">
			   <div class="poem-title">山坡羊 潼关怀古</div>
			   <div class="poem-author">[元]张养浩</div>
<div class="poem-content">峰峦如聚,波涛如怒,山河表里潼关路。

望西都,意踌躇。

伤心秦汉经行处,宫阙万间都做了土。

兴,百姓苦;亡,百姓苦。
			  	</div>	
			</div>	
			<!-- 水仙子·夜雨 -->
			<div class="poem-container">
				<div class="poem-title">水仙子·夜雨</div>
				<div class="poem-author">[元]徐再思</div>
<div class="poem-content">一声梧叶一声秋,一点芭蕉一点愁,

三更归梦三更后。

落灯花棋未收,叹新丰孤馆人留。

枕上十年事,江南二老忧,

都到心头。
				</div>	
		    </div>
			<!-- 天净沙秋思 -->
			<div class="poem-container">					
				<div class="poem-title">天净沙 秋思</div>
				<div class="poem-author">[元]马致远</div>
<div class="poem-content">枯藤老树昏鸦,
		
小桥流水人家,

古道西风瘦马。
			
夕阳西下,断肠人在天涯。
			     </div>
			</div>  
		  </div>	
	</body>
</html>

4.poetry.css

/* background */
#bground1{
	background-image: url(images/background1.jpg) ;
	background-size: cover;
	position:relative; 
    top:0;
}

#bground2{
    background-image: url(images/Background2.jpg);
    background-position: top;
    background-repeat: no-repeat;
	padding: 500px;
	background-size: cover;
}

/* ####################################################### */
/* logo*/
#logo{
	margin-left: 225px;
}

/* ####################################################### */
/* 导航栏 */
ul {
    list-style-type: none;
    margin-left: 350px;
    padding-top: 20px;
	padding-left: 200px;
    overflow: hidden;
    background-color: transparent; /*透明背景*/
    position: absolute;
	top:0;
    width: 70%;
	color:black
}

li {
    float: left; 
	margin-right: 15px; 
}

li a {
    display: block;
	background-color: white;
    text-align: left;
	margin-top: 20px;
	padding: 10px;
    text-decoration: none;
    font-family: '楷体';
	font-size: 25px;
	color:black
	border: 1px solid ;
	border-radius: 40px; 
	color:black
}

.active{
	background-color: aliceblue;
}

li a:hover {
    color: gray; 
}

li a:active {
    color: black;
    background-color: aliceblue; 
}

/* ##################################################### */
/* 诗 */
.poem-container{
	background-image: url(images/Background3.jpg);
	position:relative;
	top:0
}
.poem-title {
	padding-top: 20px;
    font-family: "楷体";
    font-size: 32px;
    text-align: center;
	font-weight: bold;
    margin-bottom: 10px;
  }
.poem-author {
    font-family: "楷体";
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
  }
.poem-content {
    font-family: "楷体";
    font-size: 18px;
    line-height: 1.0;
    text-align: center;
	white-space: pre-wrap; 
    border-bottom: aliceblue solid 10px;
  }
  
  /* ################################################################# */
  /* 块划分 */
.container {
  display: flex;
  }
  .left {
    width: 600px;
    background-color: aliceblue;
	border-style: dashed;
	border-color: skyblue;
    border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
	padding: 10px;
  }
  .right {
   width: 350px;
   background-color: aliceblue;
   border-style: dashed;
   border-color: skyblue;
   border-bottom-right-radius: 40px;
   border-bottom-left-radius: 40px;
   padding: 10px;
  }
  .middle {
    flex:1;
    background-color: aliceblue;
    border-style: dashed;
    border-color: skyblue;
    border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
    padding: 10px;
  }



5.History.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐诗网---历史</title>
		<link rel="stylesheet" type="text/css" href="history.css">
	</head>
	<body>	
		<!-- 导航栏 -->
		<div id=bground1>
			<div id=logo>
			<img src="images/logo.png" alt="logo" width="300" height="125">
			</div>
			<ul>
				<li><a href="Homepage.html">主页</a></li>
				<li><a href="Poetry.html">诗词</a></li>
				<li><a href="Poet.html">诗人</a></li>
			    <li><a class="active" href="History.html">历史</a></li>
			    <li><a href="Classic.html">古籍</a></li>
			</ul>	
		</div>
		<br/>
		<!--历史 -->
		<div id=historybground>
			<!-- 先秦 -->
			<div id=history-image>
			<img src="images/History_Qin.jpg" alt="Qin" width="90" height="125">
			</div>
			<div class="history-name">先秦</div>
			<div class="history-intro">
				
    先秦时期,依据中国历史大系表的顺序,经历了远古文化时期的:有巢氏 、燧人氏、伏羲氏、神农氏(炎帝) 、轩辕氏(黄帝) 、尧、舜、禹等时代。《先秦史》云:“吾国开化之迹,可征者始于巢、燧、羲、农。”;再到夏、商、周这段时期。传说从大约公元前5700年开始到大约公元前2100年的约3600年的时间。
    在这段时间中,国王的产生均采用“禅让制”,最后到了尧帝,尧禅帝位于舜,舜禅帝位于禹,禹驾崩後,禹之子启建立夏王朝,结束了“禅让制”,从此,“夏”成为中国第一个朝代。夏朝时多达“两万诸侯”。四百余年后(即约公元前1600年),最后一个夏后——夏后桀暴虐无道,商汤代夏,立商朝。</div>
        <button id="toggleButton" onclick="toggleText()">展开</button>
		<p id="text" class="hidden-text">
		【先秦散文】
		中国远古至秦统一前的无韵文。先秦散文的形成和发展,有其政治、经济、思想文化等多方面的社会基础。中国文字的起源可上溯到6000年前。半坡遗址中陶器上刻划的类似符号的图案,是迄今发现的最早文字的孑遗。直至商代,中国才有了比较成熟的文字,这就是甲骨文和青铜铭文。商周之际,中国出现了一部以卜筮为主要内容的巫书《周易》。《周易》是巫官文化的代表,它驳杂零乱,仅处于散文的萌芽阶段。
		先秦散文形成的标志是《尚书》。《尚书》是中国第一部历史文献的汇编,是记言文之祖。包括《虞书》、《夏书》、《商书》、《周书》4部分。主要内容是记录殷商、西周时期王公的言辞、政令。是史官文化的代表。现存的《尚书》已几经聚散,真伪杂糅。其中《盘庚》三篇和《周书》部分,分别保存了商、周二代的重要文献,具有较强的史料价值和文学价值。
		【先秦哲学】
		先秦哲学的发展大体可分为中国哲学的萌芽、诸子前哲学和诸子哲学3个阶段:①萌芽时期。哲学的萌芽是同原始宗教相联系的,主要表现为相信灵魂不死和崇拜自然物的自发观念。在殷商奴隶社会占统治地位的思想是上帝神权观念,周灭殷后发展为天命主宰一切的观念,周公提出「敬德保民」、「以德配天」的思想。以《易经》和《洪范》为代表的早期阴阳、五行观念尚未完全摆脱宗教神学的束缚,表现了科学思维的萌芽同宗教、神话幻想的一种联系。②诸子前哲学。西周末至春秋时期,奴隶主阶级的统治出现了危机,天命神权也发生了动摇。在《诗经》中出现了疑天、责天的思想。出现了原始的阴阳、五行观念,对自然界的变化作了某些唯物主义的解释,表现出无神论的倾向,同时发展了朴素辩证法的思想。伯阳父、史伯、管仲、医和、子产、晏婴、史墨等人,可以称为先秦诸子前哲学思想的主要代表。③诸子哲学。春秋末年,孔子创立儒家学派,是中国哲学进入诸子百家之学的开端。在春秋战国时期的社会大变革中,先后出现儒、墨、道、法、名、阴阳等重要学派,围绕着天人之际和古今之变以及名实、礼法等问题展开了激烈的哲学论辩,学派之间既互相斗争又互相吸取,每个学派内部也不断分化和发展,使这个时期的思想斗争呈现出错综复杂的情况,从而促进了哲学的繁荣。
		先秦哲学是中国哲学的发端,是形成学派和建立哲学体系的重要历史时期,它广泛地探讨了宇宙本原和自然规律问题、天人关系问题、人性善恶问题、认识论和逻辑学问题等,把哲学研究伸展到各个领域和各个方面,内容极为丰富,已包含着以后各个历史时期各种哲学观点的胚胎和萌芽,对中国哲学的发展产生了深远影响。
        </p>
		<script>
          function toggleText() {
            var textElement = document.getElementById("text");
            var button = document.getElementById("toggleButton");
            if (textElement.classList.contains("hidden-text")) 
			{
              textElement.classList.remove("hidden-text");
              button.innerHTML = "隐藏";
            } else
			{
              textElement.classList.add("hidden-text");
              button.innerHTML = "展开";
            }
          }
        </script>
	</div>
	<div id=historybground>
			<!-- 汉 -->
			<div id=history-image>
			<img src="images/History_Han.jpg" alt="Han" width="90" height="125">
			</div>
			<div class="history-name">汉朝</div>
			<div class="history-intro">

   汉(公元前202~公元220),是中国继秦而出现的统一王朝。包括西汉和东汉(也称前汉和后汉),分别建都于长安和洛(雒)阳。在两汉之际,还有王莽、刘玄两个短暂的统治时期。汉高祖刘邦建立的西汉王朝,各种制度基本上沿袭秦朝而有所增益,力求在稳定中求发展。
   文景之治以后出现的汉武帝,巩固并发展了统一事业和专制主义中央集权制度。他统治的半个世纪,是西汉王朝的鼎盛时期。武帝以后,国力逐渐衰落,社会矛盾激化,终于暴发赤眉、绿林起义。汉光武帝企图进一步加强专制皇权,但是封建田庄经济的发展,豪强地主势力的扩张,滋长着分裂因素。外戚、宦官挟持幼帝,统治日趋腐朽。黄巾起义瓦解了东汉王朝。189年东汉政权被权臣逼迫,迁离洛阳,从此至220年,东汉正朔虽存,但历史已进入三国时期。</div>		
		<button id="toggleButton" onclick="toggleText()">展开</button>
		<p id="text" class="hidden-text">
		【诗歌创作】
		中国西汉初至东汉末大约400年间的诗歌创作,包括文人创作和民间歌谣,以两汉乐府和东汉末年的文人五言诗成就最高。
		汉代诗歌是在《诗经》、《楚辞》和秦、汉民歌的基础上发展起来的,大致经历了从民间歌谣到文人创作、从乐府歌辞到文人徒诗即「古诗」、从四言体到五言体、从骚体到七言体、从叙事诗到抒情诗的发展过程。汉武帝时期,正式建立乐府官署,由精通音乐的李延年充任协律都尉,负责制定乐谱和训练乐员,同时大规模地搜集民歌配乐演唱。乐府官署的设置,使汉代民歌得以大量保存,在汉代文人诗坛特别冷落的情况下放射出异常绚烂的光彩,从而形成了中国诗歌史上继《诗经》、《楚辞》之后的第三个重要发展阶段。
		【汉乐府民歌】
		汉乐府民歌题材广泛,内容丰富。其中有些诗揭露了官僚贵族的豪奢与残暴,反映了劳动人民生活的痛苦,展现了汉代社会尖锐的阶级对立,传达出被压迫人民愤怒反抗的呼声。如《相逢行》、《妇病行》、《东门行》等;有些诗反映了战争和徭役带给人民的痛苦和灾难,如《十五从军征》、《战城南》、《饮马长城窟》、《古歌》等;有些诗反映了青年男女的爱情和弃妇的痛苦哀怨,如《上邪》、《有所思》、《上山采蘼芜》、《白头吟》、《怨歌行》、《孔雀东南飞》等;还有些诗反映了社会动乱给人们带来的不幸,如《枯鱼过河泣》、《乌生》等等。在艺术上,汉乐府民歌多采用叙事的形式,具有较强的故事性和鲜明生动的人物形象,如《孤儿行》、《陌上桑》、《孔雀东南飞》;语言朴实凝练,不事雕琢,如《江南》;句式上灵活多样,有四言、杂言,而其最大贡献是开创并完成了五言诗的形式,不仅影响到东汉文人五言诗的创作,而且直接为建安诗歌的繁荣奠定了基础。
		汉乐府民歌主要保存在《宋书·乐志》和宋代郭茂倩《乐府诗集》中;汉代文人诗主要保存在《史记》、《汉书》、《后汉书》以及南朝梁萧统《文选》、南朝陈徐陵《玉台新咏》中。今人逯钦立辑有《先秦汉魏晋南北朝诗·汉诗》。
		</p>
		<script>
	      function toggleText() {
	        var textElement = document.getElementById("text");
	        var button = document.getElementById("toggleButton");
	        if (textElement.classList.contains("hidden-text"))
			{
	          textElement.classList.remove("hidden-text");
	          button.innerHTML = "隐藏";
	        } else
			{
	          textElement.classList.add("hidden-text");
	          button.innerHTML = "展开";
	        }
	      }
	    </script>
	</div>
	<div id=historybground>
		<!-- 魏晋 -->
		<div id=history-image>
		<img src="images/History_WeiJin.jpg" alt="WeiJin" width="90" height="125">
		</div>
		<div class="history-name">魏晋时期</div>
		<div class="history-intro">
	
    魏晋时期(220年—420年),指东汉瓦解后,三国到两晋的时期,是魏晋南北朝(公元220年到公元589年)这段历史的前半段。
    魏晋中“魏”指的是三国北方政权曹魏,及曹家父子政权,而“晋”指的是司马氏建立的晋朝,东晋时北方正是五胡十六国时期。
    魏晋时期,国家政权更替频繁,思想自由开放。文化上得到了巨大的发展,文学、思想、美术、书法、音乐都诞生了影响后世的大家。人们对人物的品评由道德风范转向人物外貌,进而发展到人物的精神气质,文化史上称之为魏晋风流或魏晋风度。
    以魏晋风度为开端的儒道互补的士大夫精神,奠定了中国知识分子的人格基础,影响深远。当今的年轻人作为对人生的爱恋,自我的发现与肯定,与魏晋风度的价值观念是类似的。而年轻人在追求行止姿容的漂亮俊逸的个性上,又和魏晋风度的美学观相辅相成。	</div>
	</div>
	<div id=historybground>
		<!-- 南北朝 -->
		<div id=history-image>
		<img src="images/History_NanBei.jpg" alt="NanBei" width="90" height="125">
		</div>
		<div class="history-name">南北朝</div>
		<div class="history-intro">
	
    南北朝(386~589),从386年北魏建国到589年隋统一,中国历史上形成的南北对峙局面。南朝从420年刘裕代晋到589年陈亡,经历宋、齐、梁、陈四代。北朝从386年魏道武帝建立北魏开始,到534年分裂为东魏、西魏。后来北齐代东魏,北周代西魏,北周又于577年灭北齐。581年北周被隋所灭,北朝结束。589年隋灭陈和后梁,结束了西晋末年以后延续近300年的南北分裂局面。	
    南朝的文化,在文学、史学、哲学、宗教以及艺术、科学等方面都具有特色,对后代影响较为深远。 </div>	
	</div>
	<div id=historybground>
		<!-- 隋朝 -->
		<div id=history-image>
		<img src="images/History_Sui.jpg" alt="Sui" width="90" height="125">
		</div>
		<div class="history-name">隋朝</div>
		<div class="history-intro">
	
    隋朝(581年-618年,一说619年或630年),是中国历史上,上承南北朝、下启唐朝重要的朝代,史学家常把其与唐朝合称隋唐。581年杨坚灭北周静帝,定国号为“隋”,北周覆亡。618年隋恭帝杨侑让位李渊,隋灭亡。国祚38年。
    为了巩固隋朝的发展,在政治、经济、文化及外交等领域进行了大刀阔斧的改革。政治上,确立了影响后世深远的三省六部制,以巩固中央集权制度;正式制定出完整的科举制度,以选拔优秀人才,弱化世族垄断仕官的能力。另外还建立政事堂议事制度、监察制度、考绩制度,这些都强化了政府机制,深刻影响后世封建王朝的政治制度。</div>	
	</div>
	<div id=historybground>
		<!-- 唐朝 -->
		<div id=history-image>
		<img src="images/History_Tang.jpg" alt="Tang" width="90" height="125">
		</div>
		<div class="history-name">唐朝</div>
		<div class="history-intro">
	
    唐朝(618年~907年),是世界公认的中国最强盛的时代之一。李渊于618年建立了唐朝,以长安(今陕西西安)为首都。其鼎盛时期的公元7世纪时,中亚的沙漠地带也受其支配。在690年,武则天改国号“唐”为“周”,迁都洛阳,称神都,史称武周,也称“南周”。直到705年唐中宗李显恢复大唐国号。唐朝在天宝十四年(755年)安史之乱后日渐衰落,至天祐四年(907年)梁王朱温篡位灭亡,共延续了289年,传了21位皇帝(加武则天则为22位皇帝)。唐在文化、政治、经济、外交等方面都有辉煌的成就,是当时世界上最强大的国家。 </div>	
	</div>
	<div id=historybground>
		<!-- 宋朝 -->
		<div id=history-image>
		<img src="images/History_Song.jpg" alt="Song" width="90" height="125">
		</div>
		<div class="history-name">北宋</div>
		<div class="history-intro">

    北宋(960~1127年),公元960年,后周大将赵匡胤发动陈桥兵变,建立宋朝,定都汴京(今属河南开封),史称“北宋”。赵匡胤就是宋太祖。在当时,除了刚建立起来的宋朝之外,还同时存在着后蜀、南汉、南唐、吴越、北汉等割据势力。于是自宋朝建国伊始,宋太祖赵匡胤便开始了他统一全国的斗争。北宋于公元964年、965年、970年先后消灭了荆湘、后蜀、南汉三地,又于974年击败了势力较为强大的南唐。此后,吴越与福建漳、泉等地的地方势力纷纷"纳土"于宋王朝,使纷乱的时局逐渐结束。</div>	
	</div>
	<div id=historybground>
		<!-- 元朝 -->
		<div id=history-image>
		<img src="images/History_Yuan.jpg" alt="Yuan" width="90" height="125">
		</div>
		<div class="history-name">元朝</div>
		<div class="history-intro">

    元(1271~1368),中国历史上蒙古族统治者建立的统一王朝。1206年,成吉思汗建国于漠北,号大蒙古国。1235年,窝阔台建哈刺和林城(即和林)为国都。大蒙古国统治亚洲和欧洲广大地区。按台山(今阿尔泰山)以西术赤、察合台、窝阔台封地以及旭烈兀西征后据有的波斯之地(见伊利汗国),先后成为名义上是大汗藩属实际上拥有独立地位的汗国。1260年,元世祖忽必烈即位,以开平为上都,燕京(今北京)为中都,将政治中心南移。1271年,改国号为大元,次年升中都为大都。1276年灭宋。至1368年,明军攻入大都,元顺帝妥欢帖睦尔退出中原。其继承者据有漠北,仍用元国号,史称北元。</div>	
	</div>
	<div id=historybground>
		<!-- 明朝 -->
		<div id=history-image>
		<img src="images/History_Ming.jpg" alt="Ming" width="90" height="125">
		</div>
		<div class="history-name">明朝</div>
		<div class="history-intro">

    明(1368~1644),中国历史上继元之后的统一王朝。1368年,朱元璋推翻元朝统治,在应天(今南京)称帝,国号明。永乐十九年(1421),明成祖迁都北京。疆域最广时,东北抵日本海、鄂霍次克海、兀的河(今乌第河)流域,西北到新疆哈密,西南包有今西藏、云南,东南到海并及于海外诸岛。崇祯十七年(1644),李自成起义军攻入北京,明思宗自杀,明朝灭亡。明亡后,其残余力量曾在南方建立弘光等政权,史称南明。</div>	
	</div>
	<div id=historybground>
		<!-- 清朝 -->
		<div id=history-image>
		<img src="images/History_Qing.jpg" alt="Qing" width="90" height="125">
		</div>
		<div class="history-name">清朝</div>
		<div class="history-intro">

    清(1636~1911),中国历史上最后一个封建王朝。由满族统治者建立。明万历四十四年(1616),努尔哈赤称汗,国号大金(史称后金)。明崇祯九年(1636)皇太极改国号为大清。1644年清军入关,确立对全国的统治。宣统三年(1911),辛亥革命推翻清朝。翌年清帝被迫逊位。
    清代的文化,丰富绚丽,流派众多,人才辈出,在许多领域取得了光辉的成就。清初,一度产生幼弱的民主启蒙思想,但思想文化界仍不能冲出儒家的樊笼。</div>	
	</div>
	
	<!-- 侧图 -->
	<div id="right-block1">
		<img src="images/C1.jpg" width="300px" height="650px">  
	</div>
	<div id="right-block2">
		<img src="images/C3.jpg" width="300px" height="650px">  
	</div>
	<div id="right-block3">
		<img src="images/C2.jpg" width="300px" height="650px">  
	</div>
	<div id="right-block4">
		<img src="images/C4.jpg" width="300px" height="650px">  
	</div>
	<div id="right-block5">
		<img src="images/C5.jpg" width="300px" height="600px">  
	</div>
	
	</body>
</html>

6.history.css

/* background */
#bground1{
	background-image: url(images/background1.jpg) ;
	background-size: cover;
	position:relative; 
    top:0;
}

#bground2{
    background-image: url(images/Background2.jpg);
    background-position: top;
    background-repeat: no-repeat;
	padding: 500px;
	background-size: cover;
}

/* ####################################################### */
/* logo*/
#logo{
	margin-left: 225px;
}

/* ####################################################### */
/* 导航栏 */
ul {
    list-style-type: none;
    margin-left: 350px;
    padding-top: 20px;
	padding-left: 200px;
    overflow: hidden;
    background-color: transparent; /*透明背景*/
    position: absolute;
	top:0;
    width: 70%;
	color:black
}

li {
    float: left; 
	margin-right: 15px; 
}

li a {
    display: block;
	background-color: white;
    text-align: left;
	margin-top: 20px;
	padding: 10px;
    text-decoration: none;
    font-family: '楷体';
	font-size: 25px;
	color:black
	border: 1px solid ;
	border-radius: 40px; 
	color:black
}

.active{
	background-color: aliceblue;
}

li a:hover {
    color: gray; 
}

li a:active {
    color: black;
    background-color: aliceblue; 
}

/* ##################################################### */


#historybground {
  background-color: aliceblue;
  width: 700px;
  height:auto;
  border-left:100px solid white;
  border-top:20px solid white;
  padding: 10px;
  padding-left: 15px;
  display:flex
}
#history-img {
  position: relative;
  top: 0px;
  left: 0;
}
.history-name{
	position:absolute;
	padding:10px;
	padding-left: 120px;
	font-family: "楷体";
	font-size: 30px;
	color:#0066ff;
}
.history-intro{
	padding:5px;
	padding-left: 20px;
	font-family: "楷体";
	font-size: 20px;
	color:black;
	white-space: pre-wrap;
	line-height: 25px;
	padding-bottom: 15px;
}

/* ################################### */
/* 隐藏属性 */
.hidden-text {
    display: none;
	font-family: "楷体";
	padding:5px;
	padding-left: 50px;
	font-size: 20px;
	color:black;
	white-space: pre-wrap;
	line-height: 25px;
}

  /* ############################################### */
  #right-block1 {  
      position: absolute;  
      right: 10px;  
      top: 175px; 
      width: 300px;  
      height: auto; 
      background-color: antiquewhite;
	  padding: 20px;
  }
  #right-block2 {
      position: absolute;  
      right: 10px;  
      top: 900px; 
      width: 300px;  
      height: auto; 
      background-color: antiquewhite;
  	  padding: 20px;
  }

  #right-block3 {
      position: absolute;  
      right: 10px;  
      top: 1625px;   /* (900+725px) */
      width: 300px;  
      height: auto; 
      background-color: whitesmoke;
  	  padding: 20px;
  }
  #right-block4 {
      position: absolute;  
      right: 10px;  
      top: 2350px;   
      width: 300px;  
      height: auto; 
      background-color: whitesmoke;
  	  padding: 20px;
  }
  #right-block5 {
      position: absolute;  
      right: 10px;  
      top: 3075px;   
      width: 300px;  
      height: auto; 
      background-color: whitesmoke;
  	  padding: 20px;
  }

四、结果展示

不足:History.html中,“展开”的效果不好看

五、参考网站

学诗词网: 学诗词网 - 品读千年古诗 传承中华文化 (xshici.com)

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值