HTML练习———————

自己用海贼王漫画人物写了一个小网页（侵权请联系删除）
样例图如下(图片请自行下载)：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: pink;
        }
        #tt{
            width: 100%;
            height: 200px;
            background-color: rgb(0, 253, 253);

            

            position: fixed;
            top:0px;
            left: 0px;
            z-index: 9999;

            margin: 0 auto;
        }
        #CM{
            position: relative;
            top:50px;
            left: 10%;
            border: 2px solid white;
            border-bottom-left-radius: 4em;
            border-bottom-right-radius: 4em;
            border-top-left-radius: 4em;
            border-top-right-radius: 4em;
        }
        #first{
            position: relative;
            top:50px;
            left: 35%;
            margin: 0 auto;
        }
        #scend{
            position: relative;
            top:50px;
            left: 38%;
            margin: 0 auto;
        }
        #three{
            position: relative;
            top:50px;
            left: 41%;
            margin: 0 auto;
        }
        #four{
            position: relative;
            top:50px;
            left: 44%;
            margin: 0 auto;
        }
        #five{
            position: relative;
            top:50px;
            left: 47%;
            margin: 0 auto;
        }
        #six{
            position: relative;
            top:50px;
            left: 50%;
            margin: 0 auto;
        }
        .same{
            width: 600px;
            height: 320px;
            border: 3px solid rgb(24, 100, 136);
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            border-top-left-radius: 1em;
            border-top-right-radius: 1em;
            position: relative;
            left: 30%;
            margin: 50 auto;
        }
        
    </style>
</head>
<body>
    <header id="tt">
        
        <div>
                <img src="image/草帽.jpg" alt="草帽" id="CM" width="100px" height="100px">
                <a href="#a" id="first"><img src="image/LF.png" alt="路飞" width="80px" height="80px"></a>
                <a href="#b" id="scend"><img src="image/SL.png" alt="索隆" width="80px" height="80px"></a>
                <a href="#c" id="three"><img src="image/SZ.png" alt="山治" width="80px" height="80px"></a>
                <a href="#d" id="four"><img src="image/NM.png" alt="娜美" width="80px" height="80px"></a>
                <a href="#e" id="five"><img src="image/WSP.png" alt="乌索普" width="80px" height="80px"></a>
                <a href="#f" id="six"><img src="image/LB.png" alt="罗宾" width="80px" height="80px"></a>
        </div>
       
    </header>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <img src="image/lf.jpg" alt="路飞" class="same" id="a" ><br><hr>
    <img src="image/sl.jpg" alt="路飞" class="same" id="b"><br><hr>
    <img src="image/sz.jpg" alt="路飞" class="same" id="c"><br><hr>
    <img src="image/nm.jpg" alt="路飞" class="same" id="d"><br><hr>
    <img src="image/wsp.jpg" alt="路飞" class="same" id="e"><br><hr>
    <img src="image/lb.jpg" alt="路飞" class="same" id="f"><br><hr>
    
</body>
</html>