第二次作业II 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>小米商城</title>
    <style>
        #frist-div{
            background-color:azure;
            width:50px;
            height:20px;
            text-align:center;
            line-height:20px;
            float:left;

        }
        #frist-div:hover{
            background-color:orange;
        }
        #frist-div:hover+#second-div{
            opacity:1;
        }
        #second-div {
            border: hidden;
            text-align: right;
            width: 200px;
            height: 300px;
            background-image: url('lib/miselect.bmp');
            background-size:80px 300px;
            background-repeat:no-repeat;
            margin-left:50px;
            opacity:0;
        }
    </style>
</head>
<body>
    <div id="frist-div">手机</div>
    <div id="second-div">
        <br />XiaomiMIX系列<br /><br />   
        Xiaomi数字系列<br /><br /><br />
                  Xiaomi Civi系列<br /><br /><br />
              Redmi K系列<br /><br />
                 Redmi Note系列<br />
                 <br />Redmi 数字系列
    </div>
</body>


 





 






            

            
posted @ 
2023-12-19 19:46 
青鸢..i 
阅读(18) 
评论(0) 
 
收藏 
举报