All code display
1, Project directory display:
##2, Code display:
#index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文網(wǎng)</title>
<style>
body{
margin: 0;
margin-bottom: 80px;
background-color:lightblue;
}
#banner{
height: 700px;
background-image: url(2.jpg);
font-size: 50px;
line-height: 700px;
text-align: center;
margin-top: 80px;
}
#container{
width: 1000px;
margin: 0 auto;
}
.text1{
text-indent: 2em;
color:gray;
}
.text2{
text-indent: 2em;
color: red;
}
.text3{
text-indent: 2em;
color: green;
}
.text4{
text-indent: 2em;
color: violet;
}
.text5{
text-indent: 2em;
color: white;
}
.pic{
width: 100%;
}
#background{
height: 600px;
background-image: url(13.jpg);
background-size: 100% 100%;
position: relative;
z-index: -1;
}
#classmate1{
width: 200px;
height: 250px;
left: 240px;
top: 150px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
#classmate2{
width: 150px;
/*height: 200px;*/
right: 150px;
top: 100px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
#classmate3{
width: 200px;
height: 200px;
left: 490px;
bottom: 50px;
position: absolute;
border-radius: 50%;
border: solid 4px white;
}
.text1:first-letter{
font-size: 40px;
}
.text2:first-letter{
font-size: 40px;
}
.text3:first-letter{
font-size: 40px;
}
.text4:first-letter{
font-size: 40px;
}
.text5:first-letter{
font-size: 40px;
}
#nav{
width: 100%;
background-color: skyblue;
height: 80px;
left: 0;
top: 0;
position: fixed;
z-index: 2;
/*text-align: center;*/
}
#inner-nav{
width: 1000px;
margin: 0 auto;
text-decoration: none;
text-align: right;
height: 80px;
line-height: 80px;
}
#inner-nav a{
margin: 0 20px;
text-decoration: none;
color: blue;
font-size: 24px;
display: inline-block;
height: 80px;
}
#inner-nav a:hover{
background-color: white;
}
h3{
font-family: 微軟雅黑;
color: blue;
}
</style>
</head>
<body>
<!--上部標(biāo)題欄-->
<div id="nav">
<div id="inner-nav">
<a href="#haizei">我的海賊</a>
<a href="#lufei">路飛簡(jiǎn)介</a>
<a href="#suolong">索隆簡(jiǎn)介</a>
<a href="#namei">娜美簡(jiǎn)介</a>
<a href="#qita">其他人物簡(jiǎn)介</a>
</div>
</div>
<!--輪播圖顯示頁(yè)面-->
<div id="banner"></div>
<!--內(nèi)容顯示頁(yè)面-->
<div id="container">
<div>
<h3 id="haizei">我的海賊</h3>
<p class="text1">海賊王《ONE PIECE》（海賊王、航海王）簡(jiǎn)稱(chēng)“OP”，是日本漫畫(huà)家尾田榮一郎作畫(huà)的少年漫畫(huà)作品。在《周刊少年Jump》1997年8月4號(hào)開(kāi)始連載。故事講述曾經(jīng)擁有一切的“海賊王”哥爾·D·羅杰，在臨死前留下了一句話(huà)，讓全世界的人們，趨之若鶩奔向大海，世界迎來(lái)了“大海賊時(shí)代”！其中主角蒙奇·D·路飛就是帶著自己的夢(mèng)想奔向大海，在遙遠(yuǎn)的路途上找尋著志同道合的伙伴，一起進(jìn)入“偉大航道”，目標(biāo)當(dāng)上“海賊王”。2012年5月11日，《航海王》獲得第41回日本漫畫(huà)家協(xié)會(huì)賞。截至2015年6月15日，《航海王》以日本本土累計(jì)發(fā)行了3億2086萬(wàn)6000本，被吉尼斯世界紀(jì)錄官方認(rèn)證為“世界上發(fā)行量最高的單一作者創(chuàng)作的系列漫畫(huà)”。2017年7月21日，日本紀(jì)念日協(xié)會(huì)通過(guò)認(rèn)證，將每年的7月22日設(shè)立為“ONE PIECE紀(jì)念日”。改編的電視動(dòng)畫(huà)《航海王》于1999年10月20日起在富士電視臺(tái)首播。<img class="pic" src="12.jpg">
</div>
<div>
<h3 id="lufei">路飛簡(jiǎn)介</h3>
<p class="text2">蒙奇·D·路飛，日本漫畫(huà)《航海王》的主角，草帽海賊團(tuán)、草帽大船團(tuán)船長(zhǎng)，極惡的世代之一。橡膠果實(shí)能力者，懸賞金5億貝里。夢(mèng)想是找到傳說(shuō)中的One Piece，成為海賊王。
他性格積極樂(lè)觀(guān)，愛(ài)憎分明且十分重視伙伴，不甘屈居于他人之下，對(duì)任何危險(xiǎn)的事物都超感興趣。和其他傳統(tǒng)的海賊所不同的是，他并不會(huì)為了追求財(cái)富而無(wú)故殺戮，而是享受著身為海賊的冒險(xiǎn)和自由。
從忘年交香克斯手里繼承了海賊王羅杰的草帽[1] 。
<img class="pic" src="11.jpg">
</div>
<div>
<h3 id="suolong">索隆簡(jiǎn)介</h3>
<p class="text3">羅羅諾亞·索隆，日本漫畫(huà)《航海王》及衍生作品中的角色，草帽一伙的劍士，使用三把刀戰(zhàn)斗的三刀流劍士，極惡的世代之一，也是二年前集結(jié)香波地群島的十一超新星之一[1] 。目前懸賞3億2000萬(wàn)貝利[2] 。好嗜酒，實(shí)力強(qiáng)勁。
為了小時(shí)候與古伊娜的約定而踏上了前往世界第一劍士的道路，隨后成為主角蒙奇·D·路飛的第一個(gè)伙伴。在初次敗給世界第一劍士“鷹眼米霍克”后向路飛發(fā)誓永不再敗，并且更加努力的鍛煉自己。在兩年前草帽一伙被熊逐個(gè)擊飛后，遇見(jiàn)了米霍克。在鷹眼的幫助訓(xùn)練下，兩年后的他成功與伙伴們會(huì)合，并且為了實(shí)現(xiàn)自己的夢(mèng)想，奔赴強(qiáng)者如云的新世界[3] 。和船上的廚師山治是形影不離的死對(duì)頭。
<img class="pic" src="5.jpg" >
</div>
<div>
<h3 id="namei">娜美簡(jiǎn)介</h3>
<p class="text4">娜美，稱(chēng)號(hào)：小賊貓，日本漫畫(huà)《海賊王》[1] 及衍生作品中的角色，女主角，草帽海賊團(tuán)的航海士，路飛的第二個(gè)伙伴[2] ，懸賞6600萬(wàn)貝里。
特征是橘色的短發(fā)（兩年后為波浪長(zhǎng)發(fā)）和左肩的刺青（風(fēng)車(chē)與橘子的圖案）。使用棍術(shù)，現(xiàn)在武器為“魔法天候棒”。頭腦聰明又機(jī)靈，精通氣象學(xué)和航海術(shù)，能用身體感知天氣，完美指示航路，是個(gè)能精確畫(huà)出航海圖的天才航海士。本質(zhì)上是個(gè)細(xì)心、善良、重視感情、嫉惡如仇、偶爾有些溫柔的能干的女性。最喜歡錢(qián)和橘子，夢(mèng)想是要畫(huà)出全世界的地圖。
<img class="pic" src="7.jpg">
</div>
<div>
<h3 id="qita">其他人物簡(jiǎn)介</h3>
山治，日本漫畫(huà)《航海王》及衍生作品中的角色。草帽一伙廚師，金發(fā)，有著卷曲眉毛，永遠(yuǎn)遮住半邊臉的家伙，香煙不離口，最?lèi)?ài)女人，很花心但很有風(fēng)度，海賊中的紳士。小時(shí)候在紅腳哲普那兒學(xué)習(xí)廚藝。踢技以快準(zhǔn)狠被海軍稱(chēng)之為“黑足”，但從不愿意傷害任何的女性，哪怕是敵人。在經(jīng)過(guò)司法島一戰(zhàn)后也成了懸賞對(duì)象，首次懸賞就有7700萬(wàn)貝里（但通緝令是畫(huà)上去的）。夢(mèng)想是找到傳說(shuō)之海All Blue而跟隨路飛一同進(jìn)入了偉大航路。是文斯莫克家族的第三子。
烏索普小時(shí)候是出名的吹牛大王，和村里的幾個(gè)孩子組成“烏索普海賊團(tuán)”，自稱(chēng)烏索普船長(zhǎng)。發(fā)現(xiàn)克洛船長(zhǎng)的陰謀后，立志要保護(hù)村里的人，和蒙奇·D·路飛并肩作戰(zhàn)。夢(mèng)想是要成為勇敢的海上戰(zhàn)士。
喬巴是草帽海賊團(tuán)的第五位伙伴，職位是船醫(yī)。原為磁鼓島庫(kù)蕾哈醫(yī)生最寵愛(ài)的馴鹿兼醫(yī)療助手[1] 。喬巴的恩人是“庸醫(yī)”希魯魯克，他身為野生馴鹿時(shí)本來(lái)沒(méi)有名字，“喬巴”也是由希魯魯克給他命名的，意思是他有一對(duì)連樹(shù)木都可以輕松砍倒的角。
<p class="text5"></p>
<div id="background">
<img id="classmate1" src="14.jpg">
<img id="classmate2" src="9.jpg">
<img id="classmate3" src="10.jpg">
</div>
</div>
</div>
</body>
</html>##
