html和css小练习

目录

1、css代码

2、html代码

效果图

彩妆热卖产品列表

1、css代码

  body {
            background-color: rgb(238, 231, 225);
        }

        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        div {
            width: 400px;
            margin: 60px auto;
        }

        li {
           
            line-height: 40px;
            border-bottom: 1px dashed black;
            background-color: rgb(255, 255, 255);
        
        }

        h3 {
            height: 50px;
            background-color: rgb(233, 24, 90);
            color: white;
            line-height: 50px;
            padding-left: 10px;
        }

        a {
            color: rgb(139, 137, 134);
        }

        span {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-color: #333;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 25px;
            margin-right: 10px;
            margin-left: 10px;
        }

        a:hover {
            color: rgb(243, 33, 162);
        }

        a:hover span {
            background-color: rgb(243, 33, 162);
        }

      .image{
            display: none;
            margin: 10px 100px;
            
        }

         a:hover+div {
            display: block;
            color:rgb(243, 33, 162) ;
        }

2、html代码

 <div>
        <h3>大家都喜欢的彩妆</h3>
        <ul>
            <li><a href=""><span>1</span>Za姬芮新能真皙美白隔离霜 35g  </a>
               <div class="image"><img src="./image/icon-1.jpg" alt=""> 
                <p>￥62.00 最近69122人购买</p>
            </div>
            </li>


            <li><a href=""><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml</a> 
                <div class="image"><img src="./image/icon-2.jpg" alt="">
                    <p> ￥89.00 最近13610人购买</p>
                </div>
            </li>
            <li><a href=""><span>3</span>菲奥娜水漾CC霜40g</a>
                <div class="image"><img src="./image/icon-3.jpg" alt="">
                      <p>￥59.90 最近13403人购买</p>
                </div>
              
            </li>
            <li><a href=""><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml </a>
                <div class="image"><img src="./image/icon-4.jpg" alt="">
                    <p>￥59.90 最近13403人购买</p>
                </div>
            </li>
        </ul>
    </div>

效果图