HTML5--经典案例：彩妆热卖产品列表（学生版）

556Von

于 2024-05-12 21:57:36 发布

阅读量1.4k

点赞数 28

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2201_75742255/article/details/138769005

版权

实现效果：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>彩妆热卖产品列表</title>
   <style type="text/css">
       *{
           margin: 0px;
       }
       .title{
           background-color: #E9185A;
           color: white;
           padding: 10px 0px 10px 20px;
           width: 350px;
           height: 30px;
           line-height: 30px;
       }
       .box{
           position: relative;
           border-bottom: dashed 1px grey;
           width: 370px;
           height: auto;
       }
       .img-out{
           display: none;
           text-align: center;
       }
       a{
           color: black;
           text-decoration: none;
       }
       a:hover{
           color: red;
           cursor: pointer;
       }
       span{
           color: white;
           font-weight: bold;
           background-color: black;
           display: inline-block;
           text-align: center;
           margin: 10px;
           width: 25px;
           height: 25px;
           border-radius: 50%;
           line-height: 25px;
       }
       a:hover div{
           display: block;
       }
   </style>
</head>

<body>
   <div>
       <div class="title"><h3>大家都喜欢的彩妆</h3></div>
       <div class="box">
           <span>1</span>
           <a>Za姬芮新能真皙美白隔离霜 35g
               <div class="img-out">
                   <img src="image/icon-1.jpg">
                   <p>￥62.00 最近69122人购买</p>
               </div>
           </a>
       </div>
       <div class="box">
           <span>2</span>
           <a>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
               <div class="img-out">
                   <img src="image/icon-2.jpg">
                   <p>￥89.00 最近13610人购买</p>
               </div>
           </a>
       </div>
       <div class="box">
           <span>3</span>
           <a>菲奥娜水漾CC霜40g
               <div class="img-out">
                   <img src="image/icon-3.jpg">
                   <p>￥59.90 最近13403人购买</p>
               </div>
           </a>
       </div>
       <div class="box">
           <span>4</span>
           <a>DHC 蝶翠诗橄榄卸妆油 200ml
               <div class="img-out">
                   <img src="image/icon-4.jpg">
                   <p>￥169.00 最近16757人购买</p>
               </div>
           </a>
       </div>
   </div>
</body>
</html>

关于鼠标悬停hover的用法：

可以使用标签1：hover 标签2 选择器，用于改变标签1后代标签2的样式。

display:none用于隐藏对象，而display：block可以用于显示元素。两者配合可以达到鼠标悬停显示元素，鼠标离开隐藏元素的效果。

556Von

关注

28
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5--经典案例：彩妆热卖产品列表（学生版）

<h3>大家都喜欢的彩妆</h3>￥169.00 最近16757人购买</p><p>￥62.00 最近69122人购买</p><p>￥89.00 最近13610人购买</p><p>￥59.90 最近13403人购买彩妆热卖产品列表
复制链接

扫一扫