【CSS3实战】大战保龄球-CSDN博客

本文链接：https://blog.csdn.net/aa1661241638/article/details/131594943
<!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 type="text/css">
        dl,dt,dd{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        dl{
            position: relative;
            width: 778px;
            height: 612px;
            background: url(images/0335.png) no-repeat left top; 
        }
        dt{
            position: absolute;
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
        img{
            width: 50px;
            position: absolute;
        }
        dd:nth-of-type(1) img{
            left: 370px;
            top:280px;
            z-index: 1000;
        }
        dd:nth-of-type(2) img{
            left: 330px;
            top:250px;
            width: 40px;
            z-index: 100;
        }
        dd:nth-of-type(3) img{
            left: 390px;
            top:250px;
            width: 40px;
            z-index: 100;
        }
        dd:nth-of-type(4) img{
            left: 300px;
            top:220px;
            width: 30px;
            z-index: 10;
        }
        dd:nth-of-type(5) img{
            left: 350px;
            top:220px;
            width: 30px;
            z-index: 10;
        }
        dd:nth-of-type(6) img{
            left: 405px;
            top:220px;
            width: 30px;
            z-index: 10;
        }
        dd:nth-of-type(7) img{
            left: 270px;
            top:190px;
            width: 20px;
        }
        dd:nth-of-type(8) img{
            left: 320px;
            top:190px;
            width: 20px;
        }
        dd:nth-of-type(9) img{
            left: 370px;
            top:190px;
            width: 20px;
        }
        dd:nth-of-type(10) img{
            left: 420px;
            top:190px;
            width: 20px;
        }
        dt:nth-of-type(1){
            left: 392px;
            top:370px;
            z-index:1001;
        }
        dt:nth-of-type(2){
            left: 344px;
            top:320px;
            z-index:101;
        }
        dt:nth-of-type(3){
            left: 408px;
            top:320px;
            z-index:101;
        }
        dt:nth-of-type(4){
            left: 310px;
            top:270px;
            z-index:11;
        }
        dt:nth-of-type(5){
            left: 360px;
            top:270px;
            z-index:11;
        }
        dt:nth-of-type(6){
            left: 415px;
            top:270px;
            z-index:11;
        }
        dt:nth-of-type(8){
            left: 324px;
            top:220px;
            z-index:1;
        }
        dt:nth-of-type(9){
            left: 374px;
            top:220px;
            z-index:1;
        }
        dt:nth-of-type(10){
            left: 420px;
            top:220px;
            z-index:1;
        }
    </style>
</head>
<body>
    <h1>CSS 大战保龄球</h1>
    <dl>
        <dt>1</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>2</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>3</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>4</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>5</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>6</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>7</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>8</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>9</dt>
        <dd><img src="images/blq.png"></dd>
        <dt>10</dt>
        <dd><img src="images/blq.png"></dd>
    </dl>
</body>
</html>