自己设计和制作的html和css家谱项目源码分享，富含和运用知识和个人做的详细解析超多
自己设计和制作的html和css家谱项目源码分享,这篇专栏含有我分享的图片素材（自己根据自己的审美去美化设计，我已经把框架做好了），只求三连即可。
* {
margin: 0;
padding: 0;
/* CSS界面的注释是/**/
/*html界面的注释是<!-- -->可以通过搜索来找自己已写的标签在哪里*/
}
#wrap {
background: url("../img/樱花3.png");
/*#wrap是设置全局的,可设置全局背景，不是.wraper*/
/* no-repeat;no-repeat是不让平铺的意思*/
background-position: center center;
/*background-position: center center是背景图片的位置*/
background-attachment: fixed;
/*background-attachment: fixed;用于把背景图片固定到正中心*/
background-size: cover;
/*background-size:cover;是无论背景图片多大都等比，不失调地撑满背景*/
font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue",;
}
em,
i {
font-style: normal
}
li {
list-style: none;
}
/*
<!--英文字母l不要写成数字1--><!--不要少了分号,
不然会让部分代码失效-->*/
img {
border: 0;
vertical-align: middle;
}
button {
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #c81623;
/*//红色*/
}
.header {
line-height: 50px;
background: rgba(0, 0, 0, .4);
}
.header nav {
height: 50px;
background: #ccc;
}
nav ul li {
float: right;
margin-right: 30px;
}
.logo {
/*//修饰有class的部分,要在CSS界面用.*/
float: left;
margin-left: 40px;
}
.logo a {
/*//不一定用视频教程中,别人的方法,可以用自己的方法,有时用别人的方法,
有时用自己的方法
//.logo a可换为b,我在html界面上已经加上了<b></b>,多用鼠标右键来整理
代码的格式用选中，Ctrl+/来注释*/
font-size: 20px;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 2px;
margin-left: 1px;
}
.banner .inner {
/* background: black;*/
/*先写background: black;便于知道布局,之后注释掉*/
/*通过点-号来检查少写或写错了哪些*/
margin: 0 auto;
max-width: 300px;
position: relative;
top: 0px;
text-align: center;
height: 400px;
}
/*<!--.banner .inner中间不要忘了少写空格,
不然会让代码失效,有时是注释问题
position:relative 是开定位,
不影响其它元素text-align:center是文本对齐 line-height: 30px;
是行高-->*/
.line {
width: 65%;
background: #fff;
height: 2px;
margin: 0 auto;
margin-bottom: 10;
}
.inner h1 {
margin-bottom: 10px;
color: white;
}
.banner .inner p {
line-height: 30px;
font-size: 18px;
letter-spacing: 1px;
color: white;
}
.header {
background: rgba(0, 0, 0, .4);
}
/*这里}不可少,我少时就有很多效果没用了*/
.banner .inner button {
/*.banner .inner button中的空格不要少不然会没掉一些效果*/
margin-top: 20px;
padding: 10px 20px;
/*padding用撑开,从里往外撑,10px 20px是简写,分别对应上下和左右,
完整的是上右下左,比如:10px 20px 70px 90px，无逗号，border-radius
是设置按钮的圆角
background: #e85e17;按钮设为橘色，border:none;为去除按钮的边框*/
border-radius: 10px;
background: #e85e17;
border: none;
color: #fff;
outline: none;
cursor: pointer;
}
.banner .inner button:hover {
transform: rotate(1080deg) scale(2);
transition: 2s;
}
/*鼠标悬浮用hover transform是CSS3中的动画,rotate(1080deg)
* 是旋转1080度,transition :2s;是过渡2秒的意思(动画每次动时持续2秒)*/
/*cursor: pointer 能让鼠标放在按钮时变成手，pointer为小手的意思，
* 实现很多细节很重要，我会多介绍细节等，多用视频等形式来做我学习完成的项目等
* outline: none;是专门去掉按钮的边框显示,使得没蓝边框等*/
.banner .inner .more {
margin-top: 140px;
color: white;
}
.wraper .line {
margin: 15px auto;
/*这里;不要写或复制粘贴成:*/
width: 40%;
background: darkgrey;
/*灰色*/
}
.wraper p {
padding: 15px 0px;
font-size: 18px;
letter-spacing: 1px;
}
.wraper {
margin: 0 auto;
max-width: 1080px;
height: 500px;
}
.wraper h1 {
padding: 15px 0;
font-size: 27px;
}
/*把相关的写在一起,便于查找法*/
.icon {
margin: 30px auto;
/*margin: 30px auto;指的是上距离为30px ,右距离 为auto<居中>*/
margin-bottom: 0;
padding-bottom: 30px;
}
.icon .item {
margin: 30px auto;
/*margin: 30px auto;指的是上距离为30px ,右距离 为auto<居中>*/
margin-right: 50px;
border: 2px solid green;
background: black;
display: inline-block;
height: 80px;
width: 80px;
transform: rotate(45deg);
/*transform: rotate(-45deg);是旋转45度，不可有空格*/
}
/*.icon .item img {
width: 100%;
height: 100%;
) */
.first .text_right {
float:right;
}
.first_left {
width: 40%;
}
.first_left img {
width: 1;
/*width: 1;中的1不能加px*/
}
.content {
opacity: .9
}
/*opacity: .9是用来设置透明度为0.9的.9是0.9的缩写*/
.part_one {
text-align: center;
color: #fff;
background: rgba(67, 178, 165, 1);
/*r为red对应红色数值,g为green对应绿色数值,以此类推*/
/*rgba(67,178,165,1)之间可有一个空格,表示颜色,blue也可为蓝色的表达形式*/
padding-top: 65px;
opacity: 0.95;
}
.part_two {
background: rgb(33, 41, 50);
}
.first .text_right {
float: right;
}
/*有了.first,选择器级别就变大了，让图片往右边浮动到顶*/
.first_left {
width: 41%;
}
.first_left img {
width: 100%;
}
.first>div {
/*类名与div要用>来连接,指明是被类包裹的特定的div*/
float: left;
/*float: left;就是向左浮动的意思*/
}
.clear_fix:after {
/*元素产生浮动时,就脱离了文档流,
脱离了文档流就(父元素.frist等,<鼠标右键后可以点检查>)
没了高度,高度为0.
clear_fix是创造的类,after为伪元素,用于清除浮动,清除浮动高
度就会回来,
是常用的方法, 类和伪元素间要用:来连接.*/
content: ' ';
/*content: ' ';是清除浮动要加的格式*/
display: block;
/*display: block;是用于把浮动变为块元素*/
clear: both;
/*clear: both;是清除所有浮动的意思*/
}
.first_text {
position: relative;
/*position: relative;用于开启定位*/
top: 68px;
/*68px等数值是可由<鼠标右键后可以点检查>得出的*/
left: 50px;
width: 55%;
color: blue;
}
.first_text h2 {
font-size: 24px;
margin-bottom: 10px;
}
.first_text .first_tittle {
margin-bottom: 20px;
font-size: 20px;
}
.first_text p {
width: 90%;
font-size: 18px;
}
.first:nth-child(odd) {
background: rgba(255, 255, 255, .1);
}
/*odd为奇数选择器,就是让1,3,5,......个的属性(比如颜色)
同时变得和第2,4,6,8,......个的属性等变的不一样,
even为偶数选择器,功能是就是让2,4,6,8,......个的属性(比如颜色)
同时变得和第1,3,5,......个的属性等变的不一样,可能会常用*/
.part_three {
/*.part_three前面不要有/等东西,把要注意的都记忆,记录, 法*/
background: #3f3965;
opacity: 0.9;
color: #fff;
}
.three_wrap {
margin: 0 auto;
width: 60%;
}
/*.three_wrap是.three_wrap .three_text 的父元素*/
.three_wrap .three_text {
padding-top: 65px;
}
.three_text h2 {
margin-bottom: 20px;
text-align: center;
}
.three_text .line {
background: #1a0973;
width: 55%;
margin-bottom: 20px;
}
.card {
min-height: 300px;
float: left;
width: 50%;
padding: 50px;
max-width: 461px;
margin-top: 20px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/*这里的}不要被注释了-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;可解决因为宽度问题而被挤下来，
box-sizing就是盒子里的一个设置，使得变成独立的一个区域，
互不影响，-webkit-是解决浏览器兼容的问题，
border-box就是独立的盒子，
-moz-就是浏览器的内核，它们都是为了互不影响，解决兼容*/
.card h2 {
text-align: center;
}
/*.card :nth-child(1)是选择器*/
.card:nth-child(1) {
background: rgba(0, 0, 0, 0.05);
}
.card:nth-child(2) {
background: rgba(7, 0, 0, 0.1);
}
.card:nth-child(3) {
background: rgba(0, 0, 0, 0.15);
}
.card:nth-child(4) {
background: rgba(0, 0, 0, 0.2);
}
.card:nth-child(5) {
background: rgba(0, 0, 0, 0.25);
}
.card:nth-child(6) {
background: rgba(0, 0, 0, 0.3)
}
.share_group li {
display: inline-block;
padding: 10px;
}
.mask {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .3);
}
#silder {
position: fixed;
right: -300px;
top: 0;
bottom: 0;
width: 300px;
background: #333;
padding: 20px 0;
transition: .4s;
}
#silder ul a {
padding: 20px;
color: #fff;
width: 100%;
display: inline-block;
}
#silder ul a:hover {
background: #666;
}
.footer {
background: #333;
min-height: 200px;
text-align: center;
color: #fff;
}
.share_group {
display: block;
margin: 0 auto;
width: 1080px;
padding: 45px;
}
.share_group li {
display: inline-block;
/*display: inline-block;是将li这个块元素改为行内块元素的意思*
* //*position: relative;是相对定位*/
padding: 10px;
}
.active {
position: relative;
}
.active span {
position: absolute;
height: 4px;
background: #fff;
bottom: 5px;
width: 100%;
left: 0;
width: 100%;
}
.mask {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .3);
/*background:rgba(0,0,0, .3);中的:不要写成.*/
}
.silder {
background: #333;
position: fixed;
/*position: fixed;是固定定位*/
top: 0;
right: -300;
bottom: 0;
width: 300px;
transition: .3s;
/*这里transition:0.3s;*/
}
.silder ul li {
margin-top: 30px;
padding: 15px;
/*padding: 30px;这里要15px,30px会不好看，间距太大*/
}
.silder ul li:hover {
background: gainsboro;
}
/* hover用于悬浮的样式,就是点侧栏菜单时,会有灰色等*/
.silder ul li a {
color: #fff;
}
.top {
width: 52px;
height: 30px;
position: fixed;
right: 30px;
bottom: 100px;
}
/*position是相对定位*/
/*.top {
margin-top: 20px;
}*/
.top p,img{
width: 100%;
text-align:center;
}
.top img{
width: 80px;
height: 80px;
}
/*我试过很多次,img和.top img {
width: 80px;
height: 80px;
}都必需写,不然会菱形图和top图的大小出现问题
做成这个小项目，花了我几天，光看教程不行，
要用我的尝试和思考，学习笔记才可实现效果*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#background{background: url("../img/樱花.png");
/*#wrap是设置全局的,可设置全局背景，不是.wraper*/
/* no-repeat;no-repeat是不让平铺的意思*/
background-position: center center;
/*background-position: center center是背景图片的位置*/
background-attachment: fixed;
/*background-attachment: fixed;用于把背景图片固定到正中心*/
background-size:cover;
/*background-size:cover;是无论背景图片多大都等比，不失调地撑满背景*/
font-family: "微软雅黑";color:black;
}
background: rgba(0, 0, 0, .4);
</style>
</head><body><div id="background"><h1 align="center">《项羽本纪》
<a href=" 家谱.html"><b>回首页</b></a></h1>
<p>
（自己去百度复制粘贴，填充内容等）
</p></div></body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#background2{background: url("../img/家谱2.png");
/*#wrap是设置全局的,可设置全局背景，不是.wraper*/
/* no-repeat;no-repeat是不让平铺的意思*/
background-position: center center;
/*background-position: center center是背景图片的位置*/
background-attachment: fixed;
/*background-attachment: fixed;用于把背景图片固定到正中心*/
background-size:cover;
/*background-size:cover;是无论背景图片多大都等比，不失调地撑满背景*/
font-family: "微软雅黑";
}
</style>
</head>
<body><div id="background2">
<h1 align="center">项氏家训<a href="家谱.html"><b>回首页</b></a></h1>
<p align="center">一、帝王家训
汉·刘邦《手敕太子》<br />
汝可勤学习，每上疏宜自书<br /><br />
唐·李世民《帝范》<br />
1.并包平正，制断奉先<br />
2.远近相持，亲疏并用<br />
3.良匠无弃材，明君无弃士<br />
4.王者高居深视，亏听阻明<br />
5.五关近闭，则令德远盈;千欲内攻，则凶源外发<br />
6.约己正身<br />
7.宏风导俗，莫尚于文<br /><br />
清·玄烨《庭训格言》<br />
1.凡事惟当以诚，而无务虚名<br />
2.盖敬以存心，则心体湛然居中<br />
3.用人虽宜信，然亦不可遽信<br />
4.仁者以万物为一体<br />
5.自任其过<br />
6.人平日洁净，则清气著身<br />
7.恒自知足<br />
8.欲法令之行，惟身先之<br />
9.恒劳而知逸<br />
10.念虑之正与不正，只在顷刻之间<br />
11.凡人之心志有所专，即是养身之道<br />
12.与之以物，必择其所需用<br />
13.多读书则嗜欲淡<br />
14.持其志，无暴其气<br />
二、官管家训<br /><br />
三国·诸葛亮《诫子书》、《诫外甥书》<br />
1.非淡泊无以明志，非宁静无以致远<br />
2.夫酒之设，合礼致情<br />
3.志当存高远<br /><br />
北齐·颜之推《颜氏家训》<br />
1.同言而信<br />
2.兄弟者，分形连气之人也<br />
3.笞怒废于家，则竖子之过立见<br />
4.世间名士，但务宽仁<br />
5.世人多敝，贵耳轻目，重遥轻近<br />
6.如此以学自损，不如无学也<br />
7.皆由言行声名，无余地也<br />
8.劝立其名，则获其实<br />
9.国之用材，大较不过六事<br />
10.能走者夺其翼，善飞者减其指<br /><br />
唐·苏瑰《中枢龟镜》<br />
1.宰相者，上佐天子，下理阴阳，万物之司命也<br />
2.临大事，断大义，正道以当之<br />
3.人不可尽贤尽愚，汝惟器之一<br />
4.与正入言，则其道坚实而不渝<br />
5.由庶而富，在乎久安;不教而战，是谓弃之<br />
6.方今为政之道，在乎中典<br />
7.臣不密则失身<br />
8.远妻族，无使扬私于外<br /><br />
唐·李恕《戒子拾遗》<br />
1.清勤自勖，平真无亏<br />
2.善为吏者树德，不善为吏者树怨<br />
3.正身范物，修己安人<br />
4.禄俸所获，仅以代耕<br />
5.食禄坐观，贼也<br />
6.家有三史无痴子<br /><br />
宋·包拯《家训》<br />
不从吾志，非吾子孙<br /><br />
宋·袁采《袁氏世范》<br />
1.性不可强合<br />
2.处家贵宽容<br />
3.人有子，须使有业<br />
4.背后之言不可听<br />
5.子孙常宜关防<br />
6.子弟贪缪勿使仕宦<br />
7.人之智识有高下<br />
8.人生劳逸常相若<br />
9.谋事难成则永久<br />
10.性有所偏在救失<br />
11.处事当无愧心<br />
12.为恶祷神为无益<br />
13.小人为恶不必谏<br />
14.小人难责以忠信<br />
15.言貌重则有威<br />
16.礼义制欲之大闲<br />
17.不可轻受人恩<br />
18.报怨以直乃公心<br />
19.讼不可长<br />
20.暴吏害民必天诛<br />
21.狡狯子弟不可用<br />
22.淳谨干人可付托<br />
23.债不可轻举<br />
24.富家置产当存仁心<br /><br />
宋·李邦献《省心杂言》<br />
1.闻善言则拜，告有过则喜<br />
2.好名则立异<br />
3.用过其才则败事，享过其用则丧身<br />
4.利可共而不可独<br />
5.人性如水<br /><br /><br />
元·许衡《与子师可》<br />
《小学》、"四书"，吾敬信如神明<br /><br />
明·姚舜牧《药言》<br />
1.第一品格是读书，第一本等是务农<br />
2.睦族之次，即在睦邻<br />
3.惟清修可胜富贵，富贵不可不清修<br />
4.人常咬得菜根，即百事可做<br /><br />
明·温以介《温氏母训》<br />
1.世人眼赤赤，只见黄铜白铁<br />
2.巴得歇得，便是好汉子<br />
3.使一人富厚，九族饥寒，便是极缺处<br />
4.不徒取益之方，亦是全交之法<br />
5.世间何者最乐<br />
6.受谤之事，有必要辩者，有必不可辩者<br />
7.世间富贵不如文章，文章不如道德<br /><br />
明·陈龙正《家矩》<br />
1.不悭贻后<br />
2.贻谋得中，有养廉之资</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
width: 728px;
height:497px;
}
#zhongTi {
color: white;
border: solid 1px blue;
width:1430px;
height: 1995px;
}
.left1 {
border: solid 1px blue;
width: 728px;
height:497px;
float: right;
font-family:"微软雅黑";
margin: auto;
word-spacing: normal;
}
.right1 {
border: solid 1px blue;
width: 700px;
height:497px;
background-color:red;
}
.left2 {
border: solid 1px blue;
width: 728px;
height:497px;
float: right;
}
.right2 {
border: solid 1px blue;
width: 700px;
height:497px;
background-color:orange;
}
.left3{
border: solid 1px blue;
width: 728px;
height:497px;
float: right;
}
.right3 {
border: solid 1px blue;
width: 700px;
height:497px;
background-color: yellow;
}
.left4{
border: solid 1px blue;
width: 728px;
height:497px;
float: right;
}
.right4 {
border: solid 1px blue;
width: 700px;
height:497px;
background-color: green;
}
</style>
</head>
<body>
<div id="zhongTi">
<div class="left1"><img src="../img/家谱4.png" alt=""></div>
<div class="right1">
<h1 align="center">家谱介绍<a href="家谱.html"><b>回首页
</a></b></h1>
<p > " 源于姬姓，
出自周朝时期古项国，属于以国名为氏。周朝初期，
有一古项国，是西周王朝的同姓(姬)诸侯国，封地在今
河南项城一带，侯爵。项国，在春秋时期的周襄王姬郑五
年(公元前647年)，因不服春秋霸主齐桓公姜小白之令，
齐桓公大怒，因此在夏季出兵一举灭之。齐桓公由此树
立起了自己春秋第一任霸主的威望。不过，不久齐桓公又在管仲之
劝下恢复了项国。齐桓公实际上并未真正灭项国，也未进行什么
杀戮，只不过利用“灭项”之举来树立自己的威信，因此，后世的谷
梁赤在《谷梁春秋传》中就谴责了齐桓公灭项一事， 但又说齐桓公
曾有存亡继绝之功，所以为之避讳。当时项国被灭之后，项国的
一些王族子孙以及一些国民外逃，便以国名为姓氏，称项氏，
世代相传至今。 </p>
</div>
<div class="left2"><img src="../img/家谱25.png" alt=""></div>
<div class="right2"><h1 align="center">家族成员：项羽</h1>
<p>项羽（公元前232年―公元前202年），名籍，字羽，秦末下相（今
江苏宿迁）人，楚国名将项燕之孙，他是中国军事思想“兵形势”代表
人物（兵家四势：兵形势、兵权谋、兵阴阳、兵技巧），堪称中国历
史上最强的武将之一，古人对其有“羽之神勇，千古无二”的评价。
项羽早年跟随叔父项梁在吴中（今江苏苏州）起义，项梁阵亡后他率军渡河救赵王歇，于
巨鹿之战击破章邯、王离领导的秦军主力。秦亡后称西楚霸王，实行分封制，封灭秦功臣
及六国贵族为王。 而后汉王刘邦从汉中出兵进攻项羽，项羽与其展开了历时四年的楚汉战
争，期间虽然屡屡大破刘邦，但项羽始终无法有固定的后方补给，
粮草殆尽，又猜疑亚父范增，最后反被刘邦所灭。公元前202年，项羽兵败垓下（今安徽灵
壁南），突围至乌江（今安徽和县乌江镇）边自刎而死。</p></div>
<div class="left3"><img src="../img/家谱5.png" alt=" "></div>
<div class="right3"><h1 align="center">谱籍：河南</h1></div>
<div class="left4"><img src="../img/家谱6.png" alt=""></div>
<div class="right4"><h1 align="center">姓氏：项</h1></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#background{background: url("../img/樱花.png");
/*#wrap是设置全局的,可设置全局背景，不是.wraper*/
/* no-repeat;no-repeat是不让平铺的意思*/
background-position: center center;
/*background-position: center center是背景图片的位置*/
background-attachment: fixed;
/*background-attachment: fixed;用于把背景图片固定到正中心*/
background-size:cover;
/*background-size:cover;是无论背景图片多大都等比，不失调地撑满背景*/
font-family: "微软雅黑";color:black;
}
img {
width: 728px;
height:497px;
}
#zhongTi {
color:white;
border: solid 1px red;
width:1430px;
height: 1995px;
}
.left1 {
border: solid 1px orange;
width: 728px;
height:497px;
float: right;
font-family:"微软雅黑";
margin: auto;
word-spacing: normal;
}
.right1 {
border: solid 1px yellow;
width: 700px;
height:497px;
background-color:red;
}
.left2 {
border: solid 1px green;
width: 728px;
height:497px;
float: right;
}
.right2 {
border: solid 1px blue;
width: 700px;
height:497px;
background-color:orange;
}
.left3{
border: solid 1px palevioletred;
width: 728px;
height:497px;
float: right;
}
.right3 {
border: solid 1px plum;
width: 700px;
height:497px;
background-color: yellow;
}
.left4{
border: solid 1px black;
width: 728px;
height:497px;
float: right;
}
.right4 {
border: solid 1px white;
width: 700px;
height:497px;
background-color: green;
}
</style>
</head>
<body>
<div id="zhongTi">
<div class="left1"><img src="../img/樱花7.png" alt=""></div>
<div class="right1">
<h1 align="center">项元淇<a href=" 家谱.html">回首页</a>
</h1>
<p > " 明］（约公元一五八０
年前后在世）字子瞻，秀水人。生卒年均不详，约明神宗万历
八年前后在世。
南京太学生。谒选得上林录事。后以赀为光禄寺署丞。元淇善于赏
鉴，于画无所不窥，善书，工诗古文辞，著有《少岳集》四卷，
《四库总目》传于世。 </p>
</div>
<div class="left2"><img src="../img/家谱25.png" alt=""></div>
<div class="right2"><h1 align="center">项羽</h1>
<p>项羽（公元前232年―公元前202年），名籍，字羽，秦末下相（今江苏
宿迁）人，楚国名将项燕之孙，他是中国军事思想“兵形势”代表人物
（兵家四势：兵形势、兵权谋、兵阴阳、兵技巧），堪称中国历史上
最强的武将之一，古人对其有“羽之神勇，千古无二”的评价。
项羽早年跟随叔父项梁在吴中（今江苏苏州）起义，项梁阵亡后他率军渡河救赵王歇，于
巨鹿之战击破章邯、王离领导的秦军主力。秦亡后称西楚霸王，实行分封制，封灭秦功臣
及六国贵族为王。 而后汉王刘邦从汉中出兵进攻项羽，项羽与其展开了历时四年的楚汉战
争，期间虽然屡屡大破刘邦，但项羽始终无法有固定的后方补给，
粮草殆尽，又猜疑亚父范增，最后反被刘邦所灭。公元前202年，项羽兵败垓下（今安徽
灵壁南），突围至乌江（今安徽和县乌江镇）边自刎而死。</p></div>
<div class="left3"><img src="../img/樱花9.png" alt=" "></div>
<div class="right3"><h1 align="center">项阳</h1><p> 湖北省宜昌市人，先
后就读于山东师范大学音乐系（本科），厦门大学音乐系（硕士），中央音乐学
院音乐学系（博士）。曾在大学教授声乐与中国音乐史（古代与近现代）课程。
1991年到中国艺术研究院音乐研究所工作，为中国音乐家协会会员，中国传统音
乐学会会员，
中国音乐史学会会员。为《中国音乐年鉴》“地方音乐”与“学术研究”专栏主持人，曾
任中国艺术研究院研究生部音乐学系副主任。</p></div>
<div class="left4"><img src="../img/樱花6.png" alt=""></div>
<div class="right4"><h1 align="center">项庄</h1>
<p>项庄，西楚霸王项羽的堂弟，作为项羽麾下的武将一直追随项羽南征北战
，最后在乌江边战死。
《史记·项羽本纪》里对于这个人物提得很少。 项庄是故楚大将军项燕的
第三个孙子，而项羽是项燕的二孙子，项庄跟项羽是兄弟关系，
至于是不是同母亲兄弟就不得而知了，也有人说项庄是项羽的堂弟，
这兄弟二人都是由叔父项梁带大的。其家喻户晓之典故——项庄舞剑，项庄舞剑
发生在鸿门宴上，其目的是刺杀刘邦，顾有项庄舞剑意在沛公之说。</p></div>
</div>
</body>
</html>
