移入出现移除消失列表

最新推荐文章于 2024-09-06 23:41:09 发布

雨天的木子李

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量208

点赞数 6

文章标签： html css 前端

本文链接：https://blog.csdn.net/swy2560666141/article/details/126291125

版权

布置的列表作业，里面主要是符号123，还有就是hover了，移入出现隐藏的代码，先布局，把HTML排列好

<body>
    <div id="box">
       <h4>大家都喜欢的彩妆</h4> 
    
    
        <ul>
            <li><span>1</span> <a href="#">Za姬芮新能真皙美白隔离霜35g</a> <p><img src="./image/icon-1.jpg"></p></li>
           
            <li><span>2</span> <a href="#">美宝莲精纯矿物奇妙新颜乳霜BB霜</a> <p><img src="./image/icon-2.jpg"></p></li>
           
            <li><span>3</span> <a href="#">菲奥娜水漾CC霜40g</a><p><img src="./image/icon-3.jpg"></p></li>
            
            <li><span>4</span> <a href="#">DHC叠翠诗橄榄卸妆油</a><p><img src="./image/icon-4.jpg"></p></li>
            

        </ul>
    </div>
     
    
</body>

然后开始写css

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        #box{
            width: 320px;
            height: auto;
            background-color:rgb(228, 220, 220);
        }
        h4{
            color: white;
            background-color: rgb(233,24,90);
            width: 320px;
            height: 40px;
            display: inline-block;
            line-height: 46px;
            
        }
    
    
        span{
            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            color: white;
            font-weight: bolder;
            background-color: rgb(55,59,60);
            margin-right: 10px;
        } 
       li,a{
           color: rgb(154,136,167);
       }
       li{
            border-bottom:   rgb(55,59,60) 1px dashed;
            width: 320px;
            
            

        }

        li,a:hover{
            color:  rgb(233,24,90);
        }
        p{
            display: none;
        }
        li:hover>p{
            display: inline-block;
            height: auto;
            transition: all 3s;
        }
    
  
    
        

       
    
    
    </style>

运行结果就出现了