2021_CSS学习笔记第3天: 4.2.7 设计灯箱广告

网站建设 · 2021-01-04
坚持戒烟、坚持学习、坚持运动lhTIT米工网
4.2.7 设计灯箱广告
lhTIT米工网
dl包含两个子标签,dt和dd,dt里面定义的是锚链接,锚链的地址是通过#链接到dd里面包含的每个图像。设计的核心是将4个图显示在同一区域。当单击超链接时,定义到当前图像显示,其它图像被隐藏起来。lhTIT米工网
overflow:表示当一个元素,例如包含框固定宽高之后,内部元素超过这个固定区域后,就被隐藏起来。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    body{
        margin:30px auto auto 30px;
        background-color:#000000;
    }
    #menu{
        position:relative;
        height:180px;
        width:210px;
        background:#ccc;
        text-align:center;
        padding-top:20px;
    }
    #menu dt{
        position:absolute;
        right:5px;
        bottom:5px;
    }
    #menu dt a{
        float:left;
        display:block;
        padding:1px 4px;
        border:1px solid #ccc;
        margin-left:2px;
        text-decoration:none;
        color:#309;
        font-size:12px;
    }
    #menu dt a:hover{
        background:#fff;
        color:#FF0000;
    }
    #menu dd{
        width:210px;
        height:144px;
        overflow:hidden;
    }
 
    </style>
</head>
<body>
<dl id="menu">
    <dt>
        <a href="#img1">1</a>
        <a href="#img2">2</a>
        <a href="#img3">3</a>
        <a href="#img4">4</a>
    </dt>
    <dd>
        <img src="images/1.jpg" id="img1">
        <img src="images/2.jpg"  id="img2">
        <img src="images/3.jpg"  id="img3">
        <img src="images/4.jpg" id="img4">
    </dd>
</dl>
</body>