nth-child 질문

이미지가 중복해서 나오네요 ..

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    .wgroup li{

        position:relative;

        display: inline-block;

        width:220px;

        height:220px;

        line-height:220px;

        list-style:none;

        text-align:center;

        font-size:2em;

        background-repeat:no-repeat;

        border-radius: 50%;

        cursor: pointer;

        margin:10px;

    }

    .wgroup-wrapper{

        text-align: center;

        border:1px solid red;

    }

 

         .wgroup li:nth-child(1){

             background:url(Asia.png);          

         }

         .wgroup li:nth-child(2){

             background:url(Europe.png);

         }

         .wgroup li:nth-child(3){

             background:url(North_America.png);

         }

         .wgroup li:nth-child(4){

             background:url(South_America.png);

         }

         .wgroup li:nth-child(5){

             background:url(Africa.png);

         }

         .wgroup li:nth-child(6){

             background:url(Oceania.png);

 

         }

         .wgroup li:nth-child(1):hover{

             background-color:black;

         }

         .wgroup li:nth-child(2):hover{

             background-color:black;

         }

         .wgroup li:nth-child(3):hover{

             background-color:black;

         }

         .wgroup li:nth-child(4):hover{

             background-color:black;

         }

         .wgroup li:nth-child(5):hover{

             background-color:black;

         }

         .wgroup li:nth-child(6):hover{

             background-color:black;

         }

        a:link { color: black; text-decoration: none;}

        a:visited { color: black; text-decoration: none;}

 

        #user {

            border:1px solid black;

            text-align: right;

            padding-right:3rem;

            height:3rem;

        }

        

        h1{

            text-align: center;

            margin:0;

        }

        </style>    

    </head>

    <body>

    <div id="user">로그인 회원가입</div>

<div class="wgroup-wrapper">

   <div class="wgroup">

    <h1>ㅎㅇ.</h1>

    <ul>

    <a href="Asia_site.html"><li>Asia</li></a>

    <a href="Europe_site.html"><li>Europe</li></a>

    <a href="North-A_site.html"><li>North America</li></a>

    <a href="South-A_site.html"><li>South America</li></a>

    <a href="Africa_site.html"><li>Africa</li></a>

    <a href="Oceania_site.html"><li>Oceania</li></a>

    </ul>

   </div>

</div>

    </body>

</html>

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기