lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }
        #box {
            width: 1202px;
            height: 118px;
            margin: 150px auto;
            padding-top: 22px;
            border:1px solid #f00;
        }
        ul {
            overflow: hidden;
        }
        ul li {
            width: 120px;
            height: 69px;
            background: plum;
            float: left;
        }
        ul li .pic {
            width: 48px;
            height: 48px;    
        }
        ul li:first-child .pic {
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 597px;
        }
        ul li:nth-child(2) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 530px;
        }
        ul li:nth-child(3) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 470px;
        }
        ul li:nth-child(4) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 412px;
        }
        ul li:nth-child(5) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 356px;
        }
        ul li:nth-child(6) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 241px;
        }
        ul li:nth-child(7) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 181px;
        }
        ul li:nth-child(8) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 128px;
        }
        ul li:nth-child(9) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 61px;
        }
        ul li:nth-child(10) .pic {  
            background: url(./1.png);
            background-size: cover;
            background-position: 96px 0px;
        }
    </style>
</head>
<body>
    <div id="box">
        
    <ul>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
        <li>
            <div class="pic"></div>
        </li>
    </ul>
    </div>
</body>
</html>