自己設(shè)計(jì)和制作的html和css家譜項(xiàng)目源碼分享，富含和運(yùn)用知識(shí)和個(gè)人做的詳細(xì)解析超多
自己設(shè)計(jì)和制作的html和css家譜項(xiàng)目源碼分享,這篇專欄含有我分享的圖片素材（自己根據(jù)自己的審美去美化設(shè)計(jì)，我已經(jīng)把框架做好了），只求三連即可。
* {
margin: 0;
padding: 0;
/*? CSS界面的注釋是/**/
/*html界面的注釋是<!--? -->可以通過搜索來找自己已寫的標(biāo)簽在哪里*/
}
#wrap {
background: url("../img/櫻花3.png");
/*#wrap是設(shè)置全局的,可設(shè)置全局背景，不是.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;是無論背景圖片多大都等比，不失調(diào)地?fù)螡M背景*/
font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue",;
}
em,
i {
font-style: normal
}
li {
list-style: none;
}
/*
<!--英文字母l不要寫成數(shù)字1--><!--不要少了分號(hào),
不然會(huì)讓部分代碼失效-->*/
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 {
/*//不一定用視頻教程中,別人的方法,可以用自己的方法,有時(shí)用別人的方法,
有時(shí)用自己的方法
//.logo a可換為b,我在html界面上已經(jīng)加上了<b></b>,多用鼠標(biāo)右鍵來整理
代碼的格式用選中，Ctrl+/來注釋*/
font-size: 20px;
color: #FFFFFF;
font-weight: 700;
letter-spacing: 2px;
margin-left: 1px;
}
.banner .inner {
/* background: black;*/
/*先寫background: black;便于知道布局,之后注釋掉*/
/*通過點(diǎn)-號(hào)來檢查少寫或?qū)戝e(cuò)了哪些*/
margin: 0 auto;
max-width: 300px;
position: relative;
top: 0px;
text-align: center;
height: 400px;
}
/*<!--.banner .inner中間不要忘了少寫空格,
不然會(huì)讓代碼失效,有時(shí)是注釋問題
position:relative 是開定位,
不影響其它元素text-align:center是文本對(duì)齊 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);
}
/*這里}不可少,我少時(shí)就有很多效果沒用了*/
.banner .inner button {
/*.banner .inner button中的空格不要少不然會(huì)沒掉一些效果*/
margin-top: 20px;
padding: 10px 20px;
/*padding用撐開,從里往外撐,10px 20px是簡寫,分別對(duì)應(yīng)上下和左右,
完整的是上右下左,比如:10px 20px 70px 90px，無逗號(hào)，border-radius
是設(shè)置按鈕的圓角
background: #e85e17;按鈕設(shè)為橘色，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;
}
/*鼠標(biāo)懸浮用hover? ? transform是CSS3中的動(dòng)畫,rotate(1080deg)
* 是旋轉(zhuǎn)1080度,transition :2s;是過渡2秒的意思(動(dòng)畫每次動(dòng)時(shí)持續(xù)2秒)*/
/*cursor: pointer 能讓鼠標(biāo)放在按鈕時(shí)變成手，pointer為小手的意思，
?* 實(shí)現(xiàn)很多細(xì)節(jié)很重要，我會(huì)多介紹細(xì)節(jié)等，多用視頻等形式來做我學(xué)習(xí)完成的項(xiàng)目等
?* outline: none;是專門去掉按鈕的邊框顯示,使得沒藍(lán)邊框等*/
.banner .inner .more {
margin-top: 140px;
color: white;
}
.wraper .line {
margin: 15px auto;
/*這里;不要寫或復(fù)制粘貼成:*/
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;
}
/*把相關(guān)的寫在一起,便于查找法*/
.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);是旋轉(zhuǎn)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是用來設(shè)置透明度為0.9的.9是0.9的縮寫*/
.part_one {
text-align: center;
color: #fff;
background: rgba(67, 178, 165, 1);
/*r為red對(duì)應(yīng)紅色數(shù)值,g為green對(duì)應(yīng)綠色數(shù)值,以此類推*/
/*rgba(67,178,165,1)之間可有一個(gè)空格,表示顏色,blue也可為藍(lán)色的表達(dá)形式*/
padding-top: 65px;
opacity: 0.95;
}
.part_two {
background: rgb(33, 41, 50);
}
.first .text_right {
float: right;
}
/*有了.first,選擇器級(jí)別就變大了，讓圖片往右邊浮動(dòng)到頂*/
.first_left {
width: 41%;
}
.first_left img {
width: 100%;
}
.first>div {
/*類名與div要用>來連接,指明是被類包裹的特定的div*/
float: left;
/*float: left;就是向左浮動(dòng)的意思*/
}
.clear_fix:after {
/*元素產(chǎn)生浮動(dòng)時(shí),就脫離了文檔流,
脫離了文檔流就(父元素.frist等,<鼠標(biāo)右鍵后可以點(diǎn)檢查>)
沒了高度,高度為0.
clear_fix是創(chuàng)造的類,after為偽元素,用于清除浮動(dòng),清除浮動(dòng)高
度就會(huì)回來,
是常用的方法, 類和偽元素間要用:來連接.*/
content: ' ';
/*content: ' ';是清除浮動(dòng)要加的格式*/
display: block;
/*display: block;是用于把浮動(dòng)變?yōu)閴K元素*/
clear: both;
/*clear: both;是清除所有浮動(dòng)的意思*/
}
.first_text {
position: relative;
/*position: relative;用于開啟定位*/
top: 68px;
/*68px等數(shù)值是可由<鼠標(biāo)右鍵后可以點(diǎn)檢查>得出的*/
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為奇數(shù)選擇器,就是讓1,3,5,......個(gè)的屬性(比如顏色)
同時(shí)變得和第2,4,6,8,......個(gè)的屬性等變的不一樣,
even為偶數(shù)選擇器,功能是就是讓2,4,6,8,......個(gè)的屬性(比如顏色)
同時(shí)變得和第1,3,5,......個(gè)的屬性等變的不一樣,可能會(huì)常用*/
.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;可解決因?yàn)閷挾葐栴}而被擠下來，
box-sizing就是盒子里的一個(gè)設(shè)置，使得變成獨(dú)立的一個(gè)區(qū)域，
互不影響，-webkit-是解決瀏覽器兼容的問題，
border-box就是獨(dú)立的盒子，
-moz-就是瀏覽器的內(nèi)核，它們都是為了互不影響，解決兼容*/
.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這個(gè)塊元素改為行內(nèi)塊元素的意思*
* //*position: relative;是相對(duì)定位*/
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會(huì)不好看，間距太大*/
}
.silder ul li:hover {
background: gainsboro;
}
/* hover用于懸浮的樣式,就是點(diǎn)側(cè)欄菜單時(shí),會(huì)有灰色等*/
.silder ul li a {
color: #fff;
}
.top {
width: 52px;
height: 30px;
position: fixed;
right: 30px;
bottom: 100px;
}
/*position是相對(duì)定位*/
/*.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;
}都必需寫,不然會(huì)菱形圖和top圖的大小出現(xiàn)問題
做成這個(gè)小項(xiàng)目，花了我?guī)滋?，光看教程不行?/p>
要用我的嘗試和思考，學(xué)習(xí)筆記才可實(shí)現(xiàn)效果*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#background{background: url("../img/櫻花.png");
/*#wrap是設(shè)置全局的,可設(shè)置全局背景，不是.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;是無論背景圖片多大都等比，不失調(diào)地?fù)螡M背景*/
font-family: "微軟雅黑";color:black;
}
background: rgba(0, 0, 0, .4);
</style>
</head><body><div id="background"><h1 align="center">《項(xiàng)羽本紀(jì)》
<a href=" 家譜.html"><b>回首頁</b></a></h1>
<p>
（自己去百度復(fù)制粘貼，填充內(nèi)容等）
</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是設(shè)置全局的,可設(shè)置全局背景，不是.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;是無論背景圖片多大都等比，不失調(diào)地?fù)螡M背景*/
font-family: "微軟雅黑";
}
</style>
</head>
<body><div id="background2">
<h1 align="center">項(xiàng)氏家訓(xùn)<a href="家譜.html"><b>回首頁</b></a></h1>
<p? align="center">一、帝王家訓(xùn)
漢·劉邦《手敕太子》<br />
汝可勤學(xué)習(xí)，每上疏宜自書<br /><br />
唐·李世民《帝范》<br />
1.并包平正，制斷奉先<br />
2.遠(yuǎn)近相持，親疏并用<br />
3.良匠無棄材，明君無棄士<br />
4.王者高居深視，虧聽阻明<br />
5.五關(guān)近閉，則令德遠(yuǎn)盈;千欲內(nèi)攻，則兇源外發(fā)<br />
6.約己正身<br />
7.宏風(fēng)導(dǎo)俗，莫尚于文<br /><br />
清·玄燁《庭訓(xùn)格言》<br />
1.凡事惟當(dāng)以誠，而無務(wù)虛名<br />
2.蓋敬以存心，則心體湛然居中<br />
3.用人雖宜信，然亦不可遽信<br />
4.仁者以萬物為一體<br />
5.自任其過<br />
6.人平日潔凈，則清氣著身<br />
7.恒自知足<br />
8.欲法令之行，惟身先之<br />
9.恒勞而知逸<br />
10.念慮之正與不正，只在頃刻之間<br />
11.凡人之心志有所專，即是養(yǎng)身之道<br />
12.與之以物，必?fù)衿渌栌?lt;br />
13.多讀書則嗜欲淡<br />
14.持其志，無暴其氣<br />
二、官管家訓(xùn)<br /><br />
三國·諸葛亮《誡子書》、《誡外甥書》<br />
1.非淡泊無以明志，非寧靜無以致遠(yuǎn)<br />
2.夫酒之設(shè)，合禮致情<br />
3.志當(dāng)存高遠(yuǎn)<br /><br />
北齊·顏之推《顏氏家訓(xùn)》<br />
1.同言而信<br />
2.兄弟者，分形連氣之人也<br />
3.笞怒廢于家，則豎子之過立見<br />
4.世間名士，但務(wù)寬仁<br />
5.世人多敝，貴耳輕目，重遙輕近<br />
6.如此以學(xué)自損，不如無學(xué)也<br />
7.皆由言行聲名，無余地也<br />
8.勸立其名，則獲其實(shí)<br />
9.國之用材，大較不過六事<br />
10.能走者奪其翼，善飛者減其指<br /><br />
唐·蘇瑰《中樞龜鏡》<br />
1.宰相者，上佐天子，下理陰陽，萬物之司命也<br />
2.臨大事，斷大義，正道以當(dāng)之<br />
3.人不可盡賢盡愚，汝惟器之一<br />
4.與正入言，則其道堅(jiān)實(shí)而不渝<br />
5.由庶而富，在乎久安;不教而戰(zhàn)，是謂棄之<br />
6.方今為政之道，在乎中典<br />
7.臣不密則失身<br />
8.遠(yuǎn)妻族，無使揚(yáng)私于外<br /><br />
唐·李恕《戒子拾遺》<br />
1.清勤自勖，平真無虧<br />
2.善為吏者樹德，不善為吏者樹怨<br />
3.正身范物，修己安人<br />
4.祿俸所獲，僅以代耕<br />
5.食祿坐觀，賊也<br />
6.家有三史無癡子<br /><br />
宋·包拯《家訓(xùn)》<br />
不從吾志，非吾子孫<br /><br />
宋·袁采《袁氏世范》<br />
1.性不可強(qiáng)合<br />
2.處家貴寬容<br />
3.人有子，須使有業(yè)<br />
4.背后之言不可聽<br />
5.子孫常宜關(guān)防<br />
6.子弟貪繆勿使仕宦<br />
7.人之智識(shí)有高下<br />
8.人生勞逸常相若<br />
9.謀事難成則永久<br />
10.性有所偏在救失<br />
11.處事當(dāng)無愧心<br />
12.為惡禱神為無益<br />
13.小人為惡不必諫<br />
14.小人難責(zé)以忠信<br />
15.言貌重則有威<br />
16.禮義制欲之大閑<br />
17.不可輕受人恩<br />
18.報(bào)怨以直乃公心<br />
19.訟不可長<br />
20.暴吏害民必天誅<br />
21.狡獪子弟不可用<br />
22.淳謹(jǐn)干人可付托<br />
23.債不可輕舉<br />
24.富家置產(chǎn)當(dāng)存仁心<br /><br />
宋·李邦獻(xiàn)《省心雜言》<br />
1.聞善言則拜，告有過則喜<br />
2.好名則立異<br />
3.用過其才則敗事，享過其用則喪身<br />
4.利可共而不可獨(dú)<br />
5.人性如水<br /><br /><br />
元·許衡《與子師可》<br />
《小學(xué)》、"四書"，吾敬信如神明<br /><br />
明·姚舜牧《藥言》<br />
1.第一品格是讀書，第一本等是務(wù)農(nóng)<br />
2.睦族之次，即在睦鄰<br />
3.惟清修可勝富貴，富貴不可不清修<br />
4.人常咬得菜根，即百事可做<br /><br />
明·溫以介《溫氏母訓(xùn)》<br />
1.世人眼赤赤，只見黃銅白鐵<br />
2.巴得歇得，便是好漢子<br />
3.使一人富厚，九族饑寒，便是極缺處<br />
4.不徒取益之方，亦是全交之法<br />
5.世間何者最樂<br />
6.受謗之事，有必要辯者，有必不可辯者<br />
7.世間富貴不如文章，文章不如道德<br /><br />
明·陳龍正《家矩》<br />
1.不慳貽后<br />
2.貽謀得中，有養(yǎng)廉之資</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 > "? 源于姬姓，
出自周朝時(shí)期古項(xiàng)國，屬于以國名為氏。周朝初期，
有一古項(xiàng)國，是西周王朝的同姓(姬)諸侯國，封地在今
河南項(xiàng)城一帶，侯爵。項(xiàng)國，在春秋時(shí)期的周襄王姬鄭五
年(公元前647年)，因不服春秋霸主齊桓公姜小白之令，
齊桓公大怒，因此在夏季出兵一舉滅之。齊桓公由此樹
立起了自己春秋第一任霸主的威望。不過，不久齊桓公又在管仲之
勸下恢復(fù)了項(xiàng)國。齊桓公實(shí)際上并未真正滅項(xiàng)國，也未進(jìn)行什么
殺戮，只不過利用“滅項(xiàng)”之舉來樹立自己的威信，因此，后世的谷
梁赤在《谷梁春秋傳》中就譴責(zé)了齊桓公滅項(xiàng)一事， 但又說齊桓公
曾有存亡繼絕之功，所以為之避諱。當(dāng)時(shí)項(xiàng)國被滅之后，項(xiàng)國的
一些王族子孫以及一些國民外逃，便以國名為姓氏，稱項(xiàng)氏，
世代相傳至今。 </p>
</div>
<div class="left2"><img src="../img/家譜25.png" alt=""></div>
<div class="right2"><h1 align="center">家族成員：項(xiàng)羽</h1>
<p>項(xiàng)羽（公元前232年―公元前202年），名籍，字羽，秦末下相（今
江蘇宿遷）人，楚國名將項(xiàng)燕之孫，他是中國軍事思想“兵形勢(shì)”代表
人物（兵家四勢(shì)：兵形勢(shì)、兵權(quán)謀、兵陰陽、兵技巧），堪稱中國歷
史上最強(qiáng)的武將之一，古人對(duì)其有“羽之神勇，千古無二”的評(píng)價(jià)。?
項(xiàng)羽早年跟隨叔父項(xiàng)梁在吳中（今江蘇蘇州）起義，項(xiàng)梁陣亡后他率軍渡河救趙王歇，于
巨鹿之戰(zhàn)擊破章邯、王離領(lǐng)導(dǎo)的秦軍主力。秦亡后稱西楚霸王，實(shí)行分封制，封滅秦功臣
及六國貴族為王。 而后漢王劉邦從漢中出兵進(jìn)攻項(xiàng)羽，項(xiàng)羽與其展開了歷時(shí)四年的楚漢戰(zhàn)
爭，期間雖然屢屢大破劉邦，但項(xiàng)羽始終無法有固定的后方補(bǔ)給，
糧草殆盡，又猜疑亞父范增，最后反被劉邦所滅。公元前202年，項(xiàng)羽兵敗垓下（今安徽靈
壁南），突圍至烏江（今安徽和縣烏江鎮(zhèn)）邊自刎而死。</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">姓氏：項(xiàng)</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是設(shè)置全局的,可設(shè)置全局背景，不是.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;是無論背景圖片多大都等比，不失調(diào)地?fù)螡M背景*/
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">項(xiàng)元淇<a href=" 家譜.html">回首頁</a>
</h1>
<p > "? 明］（約公元一五八０
年前后在世）字子瞻，秀水人。生卒年均不詳，約明神宗萬歷
八年前后在世。
南京太學(xué)生。謁選得上林錄事。后以貲為光祿寺署丞。元淇善于賞
鑒，于畫無所不窺，善書，工詩古文辭，著有《少岳集》四卷，
《四庫總目》傳于世。 </p>
</div>
<div class="left2"><img src="../img/家譜25.png" alt=""></div>
<div class="right2"><h1 align="center">項(xiàng)羽</h1>
<p>項(xiàng)羽（公元前232年―公元前202年），名籍，字羽，秦末下相（今江蘇
宿遷）人，楚國名將項(xiàng)燕之孫，他是中國軍事思想“兵形勢(shì)”代表人物
（兵家四勢(shì)：兵形勢(shì)、兵權(quán)謀、兵陰陽、兵技巧），堪稱中國歷史上
最強(qiáng)的武將之一，古人對(duì)其有“羽之神勇，千古無二”的評(píng)價(jià)。?
項(xiàng)羽早年跟隨叔父項(xiàng)梁在吳中（今江蘇蘇州）起義，項(xiàng)梁陣亡后他率軍渡河救趙王歇，于
巨鹿之戰(zhàn)擊破章邯、王離領(lǐng)導(dǎo)的秦軍主力。秦亡后稱西楚霸王，實(shí)行分封制，封滅秦功臣
及六國貴族為王。 而后漢王劉邦從漢中出兵進(jìn)攻項(xiàng)羽，項(xiàng)羽與其展開了歷時(shí)四年的楚漢戰(zhàn)
爭，期間雖然屢屢大破劉邦，但項(xiàng)羽始終無法有固定的后方補(bǔ)給，
糧草殆盡，又猜疑亞父范增，最后反被劉邦所滅。公元前202年，項(xiàng)羽兵敗垓下（今安徽
靈壁南），突圍至烏江（今安徽和縣烏江鎮(zhèn)）邊自刎而死。</p></div>
<div class="left3"><img src="../img/櫻花9.png" alt=" "></div>
<div class="right3"><h1 align="center">項(xiàng)陽</h1><p>? 湖北省宜昌市人，先
后就讀于山東師范大學(xué)音樂系（本科），廈門大學(xué)音樂系（碩士），中央音樂學(xué)
院音樂學(xué)系（博士）。曾在大學(xué)教授聲樂與中國音樂史（古代與近現(xiàn)代）課程。
1991年到中國藝術(shù)研究院音樂研究所工作，為中國音樂家協(xié)會(huì)會(huì)員，中國傳統(tǒng)音
樂學(xué)會(huì)會(huì)員，
中國音樂史學(xué)會(huì)會(huì)員。為《中國音樂年鑒》“地方音樂”與“學(xué)術(shù)研究”專欄主持人，曾
任中國藝術(shù)研究院研究生部音樂學(xué)系副主任。</p></div>
<div class="left4"><img src="../img/櫻花6.png" alt=""></div>
<div class="right4"><h1 align="center">項(xiàng)莊</h1>
<p>項(xiàng)莊，西楚霸王項(xiàng)羽的堂弟，作為項(xiàng)羽麾下的武將一直追隨項(xiàng)羽南征北戰(zhàn)
，最后在烏江邊戰(zhàn)死。
《史記·項(xiàng)羽本紀(jì)》里對(duì)于這個(gè)人物提得很少。 項(xiàng)莊是故楚大將軍項(xiàng)燕的
第三個(gè)孫子，而項(xiàng)羽是項(xiàng)燕的二孫子，項(xiàng)莊跟項(xiàng)羽是兄弟關(guān)系，
至于是不是同母親兄弟就不得而知了，也有人說項(xiàng)莊是項(xiàng)羽的堂弟，
這兄弟二人都是由叔父項(xiàng)梁帶大的。其家喻戶曉之典故——項(xiàng)莊舞劍，項(xiàng)莊舞劍
發(fā)生在鴻門宴上，其目的是刺殺劉邦，顧有項(xiàng)莊舞劍意在沛公之說。</p></div>
</div>
</body>
</html>
