Web content display
1. Web page content display:
<!--內(nèi)容顯示頁(yè)面--> <div id="container"> <div> <h3 id="haizei">我的海賊</h3> <p class="text1">海賊王《ONE PIECE》（海賊王、航海王）簡(jiǎn)稱“OP”，是日本漫畫家尾田榮一郎作畫的少年漫畫作品。在《周刊少年Jump》1997年8月4號(hào)開始連載。故事講述曾經(jīng)擁有一切的“海賊王”哥爾·D·羅杰，在臨死前留下了一句話，讓全世界的人們，趨之若鶩奔向大海，世界迎來(lái)了“大海賊時(shí)代”！其中主角蒙奇·D·路飛就是帶著自己的夢(mèng)想奔向大海，在遙遠(yuǎn)的路途上找尋著志同道合的伙伴，一起進(jìn)入“偉大航道”，目標(biāo)當(dāng)上“海賊王”。2012年5月11日，《航海王》獲得第41回日本漫畫家協(xié)會(huì)賞。截至2015年6月15日，《航海王》以日本本土累計(jì)發(fā)行了3億2086萬(wàn)6000本，被吉尼斯世界紀(jì)錄官方認(rèn)證為“世界上發(fā)行量最高的單一作者創(chuàng)作的系列漫畫”。2017年7月21日，日本紀(jì)念日協(xié)會(huì)通過(guò)認(rèn)證，將每年的7月22日設(shè)立為“ONE PIECE紀(jì)念日”。改編的電視動(dòng)畫《航海王》于1999年10月20日起在富士電視臺(tái)首播。<img class="pic" src="12.jpg"> </div> <div> <h3 id="lufei">路飛簡(jiǎn)介</h3> <p class="text2">蒙奇·D·路飛，日本漫畫《航海王》的主角，草帽海賊團(tuán)、草帽大船團(tuán)船長(zhǎng)，極惡的世代之一。橡膠果實(shí)能力者，懸賞金5億貝里。夢(mèng)想是找到傳說(shuō)中的One Piece，成為海賊王。 他性格積極樂(lè)觀，愛憎分明且十分重視伙伴，不甘屈居于他人之下，對(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">羅羅諾亞·索隆，日本漫畫《航海王》及衍生作品中的角色，草帽一伙的劍士，使用三把刀戰(zhàn)斗的三刀流劍士，極惡的世代之一，也是二年前集結(jié)香波地群島的十一超新星之一[1] 。目前懸賞3億2000萬(wàn)貝利[2] 。好嗜酒，實(shí)力強(qiáng)勁。 為了小時(shí)候與古伊娜的約定而踏上了前往世界第一劍士的道路，隨后成為主角蒙奇·D·路飛的第一個(gè)伙伴。在初次敗給世界第一劍士“鷹眼米霍克”后向路飛發(fā)誓永不再敗，并且更加努力的鍛煉自己。在兩年前草帽一伙被熊逐個(gè)擊飛后，遇見了米霍克。在鷹眼的幫助訓(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">娜美，稱號(hào)：小賊貓，日本漫畫《海賊王》[1] 及衍生作品中的角色，女主角，草帽海賊團(tuán)的航海士，路飛的第二個(gè)伙伴[2] ，懸賞6600萬(wàn)貝里。 特征是橘色的短發(fā)（兩年后為波浪長(zhǎng)發(fā)）和左肩的刺青（風(fēng)車與橘子的圖案）。使用棍術(shù)，現(xiàn)在武器為“魔法天候棒”。頭腦聰明又機(jī)靈，精通氣象學(xué)和航海術(shù)，能用身體感知天氣，完美指示航路，是個(gè)能精確畫出航海圖的天才航海士。本質(zhì)上是個(gè)細(xì)心、善良、重視感情、嫉惡如仇、偶爾有些溫柔的能干的女性。最喜歡錢和橘子，夢(mèng)想是要畫出全世界的地圖。 <img class="pic" src="7.jpg"> </div> </div>
##2. Content page color style design:
<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;
}
.pic{
width: 100%;
}
#background{
height: 600px;
background-image: url(13.jpg);
background-size: 100% 100%;
position: relative;
z-index: -1;
}
.text1:first-letter{
font-size: 40px;
}
.text2:first-letter{
font-size: 40px;
}
.text3:first-letter{
font-size: 40px;
}
.text4: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>3, Effect display:
##4, click on the page to jump to the corresponding location design<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>
