1, ? ??? ??? ??:

<!--內(nèi)容顯示頁面-->
        <div id="container">
            <div>
            <h3 id="haizei">我的海賊</h3>
            <p class="text1">海賊王《ONE PIECE》（海賊王、航海王）簡稱“OP”，是日本漫畫家尾田榮一郎作畫的少年漫畫作品。在《周刊少年Jump》1997年8月4號開始連載。故事講述曾經(jīng)擁有一切的“海賊王”哥爾·D·羅杰，在臨死前留下了一句話，讓全世界的人們，趨之若鶩奔向大海，世界迎來了“大海賊時代”！其中主角蒙奇·D·路飛就是帶著自己的夢想奔向大海，在遙遠的路途上找尋著志同道合的伙伴，一起進入“偉大航道”，目標當上“海賊王”。2012年5月11日，《航海王》獲得第41回日本漫畫家協(xié)會賞。截至2015年6月15日，《航海王》以日本本土累計發(fā)行了3億2086萬6000本，被吉尼斯世界紀錄官方認證為“世界上發(fā)行量最高的單一作者創(chuàng)作的系列漫畫”。2017年7月21日，日本紀念日協(xié)會通過認證，將每年的7月22日設立為“ONE PIECE紀念日”。改編的電視動畫《航海王》于1999年10月20日起在富士電視臺首播。<img class="pic" src="12.jpg">
            </div>
            <div>
            <h3 id="lufei">路飛簡介</h3>
            <p class="text2">蒙奇·D·路飛，日本漫畫《航海王》的主角，草帽海賊團、草帽大船團船長，極惡的世代之一。橡膠果實能力者，懸賞金5億貝里。夢想是找到傳說中的One Piece，成為海賊王。
                他性格積極樂觀，愛憎分明且十分重視伙伴，不甘屈居于他人之下，對任何危險的事物都超感興趣。和其他傳統(tǒng)的海賊所不同的是，他并不會為了追求財富而無故殺戮，而是享受著身為海賊的冒險和自由。
                從忘年交香克斯手里繼承了海賊王羅杰的草帽[1]  。
                <img class="pic" src="11.jpg">
            </div>
            <div>
            <h3 id="suolong">索隆簡介</h3>
            <p class="text3">羅羅諾亞·索隆，日本漫畫《航海王》及衍生作品中的角色，草帽一伙的劍士，使用三把刀戰(zhàn)斗的三刀流劍士，極惡的世代之一，也是二年前集結(jié)香波地群島的十一超新星之一[1]  。目前懸賞3億2000萬貝利[2]  。好嗜酒，實力強勁。
                為了小時候與古伊娜的約定而踏上了前往世界第一劍士的道路，隨后成為主角蒙奇·D·路飛的第一個伙伴。在初次敗給世界第一劍士“鷹眼米霍克”后向路飛發(fā)誓永不再敗，并且更加努力的鍛煉自己。在兩年前草帽一伙被熊逐個擊飛后，遇見了米霍克。在鷹眼的幫助訓練下，兩年后的他成功與伙伴們會合，并且為了實現(xiàn)自己的夢想，奔赴強者如云的新世界[3]  。和船上的廚師山治是形影不離的死對頭。
                <img class="pic" src="5.jpg" >
            </div>
            <div>
            <h3 id="namei">娜美簡介</h3>
            <p class="text4">娜美，稱號：小賊貓，日本漫畫《海賊王》[1]  及衍生作品中的角色，女主角，草帽海賊團的航海士，路飛的第二個伙伴[2]  ，懸賞6600萬貝里。
                特征是橘色的短發(fā)（兩年后為波浪長發(fā)）和左肩的刺青（風車與橘子的圖案）。使用棍術，現(xiàn)在武器為“魔法天候棒”。頭腦聰明又機靈，精通氣象學和航海術，能用身體感知天氣，完美指示航路，是個能精確畫出航海圖的天才航海士。本質(zhì)上是個細心、善良、重視感情、嫉惡如仇、偶爾有些溫柔的能干的女性。最喜歡錢和橘子，夢想是要畫出全世界的地圖。
                <img class="pic" src="7.jpg">
            </div>
          
        </div>

2. ??? ??? ?? ??? ???:

<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, ?? ??:

4. ???? ????? ?? ?? ????? ?????

<div id="inner-nav">
    <a href="#haizei">我的海賊</a>
    <a href="#lufei">路飛簡介</a>
    <a href="#suolong">索隆簡介</a>
    <a href="#namei">娜美簡介</a>
    <a href="#qita">其他人物簡介</a>
</div>