Web前端——门户网站设计

最新推荐文章于 2024-05-12 07:59:05 发布

FI小VE

最新推荐文章于 2024-05-12 07:59:05 发布

阅读量726

点赞数 12

分类专栏： Web 文章标签：前端 css

本文链接：https://blog.csdn.net/m0_74219898/article/details/138557182

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、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)

FI小VE

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web前端——门户网站设计

完成以下要求的网站设计：用PhotoShop、DreamWeaver、VS Code等开发工具制作一个由静态网页构成的简单网站、要求包含一个首页、多个子页及以上，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，然后进行网站测试。功能要求：各页面应用CSS+DIV网页布局，使用CSS样式使风格统一、页面之间通过超链接切换。
复制链接

扫一扫

专栏目录