CSS学习笔记第18天--多图排列

网站建设 · 2020-11-06
      今天同样按书上的范例敲完代码,发现伪类设置没有生效,鼠标经过时,字体没有变红,经仔细检查,原来代码a:hover之间多了一个空格,结果伪类不生效,可见,昨天的CSS代码样式不生效,应该也是我把那里搞错了,今天范例的代码如下:cT2IT米工网
3.2.3 多图排列
<!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">
    body{
        margin:20px;
        padding:0px;
        text-alien:center;
    } 
    .container{
        width:800px;
        height:240px;
        background-image:url(images/bg.jpg);
        background-repeat:repeat-x;
        border:1px #000 solid;
    }
    .container div{
        float:left;
    }
    .one{
        margin-top:30px;
        margin-left:35px;
    }
    .container p{
        font-size:20px;
        font-family:黑体;
    }
    a{
        text-decoration:none;
        color:#204402;
    }
    a img{border:4px white solid;}
    a:hover{
        text-decoration:underline;
        color:red;
    }
    a:hover img{
        border:4px #0b35c0 solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">
            <a href="#">
                <img src="images/1.jpg" alt="">
                    <p>老虎</p>
            </a>
        </div>
        <div class="one">
            <a href="#">
                <img src="images/2.jpg" alt="">
                    <p>大熊猫</p>
            </a>
        </div>
        <div class="one">
            <a href="#">
                <img src="images/3.jpg" alt="">
                    <p>大象</p>
            </a>
        </div>
        <div class="one">
            <a href="#">
                <img src="images/4.jpg" alt="">
                    <p>野马</p>
            </a>
        </div>
    </div>
</body>
</html>
cT2IT米工网