Html+CSS小案例项目：CSS开发小米商城电商产品展示效果

于电商产品展示，无论是从首页还是到栏目页，再到产品的详情页，产品展示效果不仅仅是在电商平台，在很多的企业网站也使用频繁，今天为大家分享一个HTML+CSS小案例项目：小米电商平台的商品展示页面！我们来一起看看吧！

那么我们要开发一个什么样的效果呢？来吧展示！！！

接着下来我们实战开发吧！

温馨提示：本期课程是三十个实战案例的第2节，为了更好的学好前端，可以配合艾编程30天计划学习效果更好，因为30个案例就是30天计划的实战作业一部分！具体参与方式，我放在文章的最底部了，大家可以看完这个效果后找助理老师领取！

第一步、构建长方形盒子，同时水平居中

1、操作步骤

（1）构建一个名为product的盒子

<div class='product'></div>

（2）给product 添加宽度、高度、背景颜色。这里的高度正常情况下是不能设置死，是为了方便大家理解看效果，所以加上的。后面我们会去掉

.product{
   width:268px;/*宽度*/
   height:400px;/*高度*/
   background-color: red;/*背景颜色*/
}

（3）、清除body自带的的默认样式

body{
margin:0px;/*外边距为0px*/
}

（4）、设置.product 长方形盒子与浏览器顶部50px间距，同时水平居中显示

.product{
margin:50px auto; /*上外边距50px 左右外边距自动相等-水平居中*/
}

（5）、给盒子添加边框线,，同时把添加的背景注释掉。背景是为了开始演示效果

.product{
   /* background-color: red;背景颜色*/
border:1px solid #ddd; /*1像素 实线 灰色边框*/
}

2、代码

<style type="text/css">
    body{
        margin:0px;
    }
    .product{
        width:268px;
        height:400px;
        /* background-color: red; */
        margin:50px auto;
        border:1px solid #ddd;
    }
</style>


<div class="product"></div>

3、实现效果

第二步、添加产品图，同时设置水平居中

1、操作步骤

（1）、在.product盒子中添加产品图,同时设置图片宽度和alt描述

<body>
   <div class="product">
       <!--img标签，用来在页面当中插入图片-->
       <img src="images/kettle.png" alt="电水壶" width="195px">
   </div>
</body>

（2）、设置图片在水平方向居中显示

.product{
text-align:center;/*设置内容文字或图片在盒子中水平居中*/
}

2、代码

<style type="text/css">
body{
  margin:0px;
}
.product{
    width:268px;
    height:400px;
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;/*文字和图片水平居中*/
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
    </div>
</body>

3、实现效果

第三步、设置产品描述样式

1、操作步骤

1、在.product盒子中添加p标签，同时到名为describe，p标签用来包裹产品描述

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class='describe'>快速煮水，安心饮用</p>
   </div>
</body>

2、去掉h3自带的默认margin外边距样式

body,p{
margin:0px;/*同时去掉body和h3标签的默认外边距*/
}

3、修饰h3中的文字样式

.product p.describe{
           font-size:16px ;/*字体大小*/
           font-weight: 400;/*字体粗细*/
           color:#845f3f;/*字体颜色*/
      }

2、实现代码

<style type="text/css">
body,h3{
  margin:0px;
}
.product{
    width:268px;
    height:400px;
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;
}
.product h3{
    font-size:16px ;
    font-weight: 400;
    color:#845f3f;
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <h3>快速煮水，安心饮用</h3>
    </div>
</body>

3、实现效果

第四步、构建一个长方形，用来包裹后所有内容

1、操作步骤

1、在.product盒子中，再构建一个名为 .product-text的盒子

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <div class="product-text"></div>
   </div>
</body>

2、我们给product-text 添加如下样式。当然里添加的高度也是为了方便看效果，后面我们也会删除。

 .product .product-text{
           height:100px;/*高度-为了查看效果，后期会删除*/
           background-color: #f8f8f8;/*背景颜色*/
           margin-top:20px;/*上外边距20px*/
           padding:15px;/*上下左右内边距15px*/
      }

3、我们把最开始为了方便看效果，给.product添加的高度给删除（或注释）

.product{
/*height:400px;*/
}

2、实现代码

<style type="text/css">
body,p{
  margin:0px;
}
.product{
    width:268px;
    /* height:400px; */
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;
}
.product p.describe{
    font-size:16px ;
    font-weight: 400;
    color:#845f3f;
}
.product .product-text{
    height:100px;
    background-color: #f8f8f8;
    margin-top:20px;/*上外边距20px*/
    padding:15px;/*上下左右内边距15px*/
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <div class="product-text">
            添加内容边距，使里面的内容与盒子间有上下左右有15px空隙
        </div>
    </div>
</body>

3
实现效果

第五步、开发直播中、特惠、30天保价、售后免邮效果

1、操作步骤

（1）在名为 .product-text盒子中添加类名为 product-mark的div盒子,同时在里面插入四张图,同时把图片高度设为 20px

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <div class="product-text">
           <div class="product-mark">
               <img src="images/live.png" alt="直播中" height="20">
               <img src="images/odds.png" alt="特惠中" height="20">
               <img src="images/30day.png" alt="30天保价" height="20">
               <img src="images/server.png" alt="售后免邮" height="20">
           </div>
       </div>
   </div>
</body>

（2）添加好的图片之间默认有一定的空隙，这个空隙在不同的浏览器中看到的大小可能不一样。所以我们需要把这个默认的空隙去掉，然后自己给图片添加外边距来实现空隙。

空隙产生的原因，是浏览器把图片间的换行和空格给编译了。我们的处理方式可以在.product-mark中添加font-size:0px;就可以消除。

 .product .product-text .product-mark{
           font-size: 0px;/*去掉图片间的空隙*/
      }

（3）、消除空隙后，我们给图片单独添加margin外边距来实现空隙效果。

.product .product-text .product-mark img{
           margin:0px 2px;/*给图片设置左右2像素外边距*/
      }

2、代码

<style type="text/css">
        body,p{
            margin:0px;
        }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            height:100px;
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <div class="product-text">
            <div class="product-mark">
                <img src="images/live.png" alt="直播中" height="20">
                <img src="images/odds.png" alt="特惠中" height="20">
                <img src="images/30day.png" alt="30天保价" height="20">
                <img src="images/server.png" alt="售后免邮" height="20">
            </div>
        </div>
    </div>
</body>

3、实现效果

第六步、开发产品标题效果

1、操作步骤

（1）、在product-text盒子中添加 h3标签，用来包裹标题内容

<div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <div class="product-text">
           <div class="product-mark">
               <img src="images/live.png" alt="直播中" height="20">
               <img src="images/odds.png" alt="特惠中" height="20">
               <img src="images/30day.png" alt="30天保价" height="20">
               <img src="images/server.png" alt="售后免邮" height="20">
           </div>
           <h3>云米电水壶</h3>
       </div>
</div>

（2）、去掉h3自带的默认margin外边距

body,p,h3{
           margin:0px;/*同时去掉body,p,h3的默认外边距*/
      }

（3）、通过以下css来修饰标题

 .product .product-text h3{
           font-size: 20px;/*字体大小*/
           font-weight:400 ;/*字体粗细*/
           margin-top:10px;/*上外边距为 10px*/
      }

2、代码

<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <div class="product-text">
            <div class="product-mark">
                <img src="images/live.png" alt="直播中" height="20">
                <img src="images/odds.png" alt="特惠中" height="20">
                <img src="images/30day.png" alt="30天保价" height="20">
                <img src="images/server.png" alt="售后免邮" height="20">
            </div>
            <h3>云米电水壶</h3>
        </div>
    </div>
</body>

3、实现效果

第七步、开发产品价格效果

1、操作步骤

（1）在product-text中添加 p标签，用来包裹价格

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <div class="product-text">
           <div class="product-mark">
               <img src="images/live.png" alt="直播中" height="20">
               <img src="images/odds.png" alt="特惠中" height="20">
               <img src="images/30day.png" alt="30天保价" height="20">
               <img src="images/server.png" alt="售后免邮" height="20">
           </div>
           <h3>云米电水壶</h3>
           <p>￥59</p>
       </div>
   </div>
</body>

（2）、通过以下css来修饰价格样式

 .product .product-text p{
           font-size:20px ;/*字体大小*/
           color:#a92112;/*字体颜色*/
           margin-top:5px;/*上外边距 5px*/
      }

（3）、去掉最开始给 .product-text添中的高度

.product .product-text{
           /* height:100px; */
  }

2、代码

<style type="text/css">
        body,p,h3{
            margin:0px;
        }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            /* height:100px; */
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
        .product .product-text h3{
            font-size: 20px;
            font-weight:400 ;
            margin-top:10px;
        }
        
        .product .product-text p{
            font-size:20px ;
            color:#a92112;
            margin-top:5px;
        }
</style>
    
<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <div class="product-text">
            <div class="product-mark">
                <img src="images/live.png" alt="直播中" height="20">
                <img src="images/odds.png" alt="特惠中" height="20">
                <img src="images/30day.png" alt="30天保价" height="20">
                <img src="images/server.png" alt="售后免邮" height="20">
            </div>
            <h3>云米电水壶</h3>
            <p>￥59</p>
        </div>
    </div>
</body>

3、实现效果

第八步、添加a超链接，实现页面跳转

添加了超链接之后，页面中的文字就添加了下划线，同时h3中的文字颜色也发生了改变，那下一步我们就来修正下这些细节

1、代码

<div class="product">
  <!--添加超链接，实现点击后跳转到新页面-->
        <a href="https://www.icodingedu.com" target="_blank">
            <img src="images/kettle.png" alt="电水壶" width="195px">
            <p class="describe">快速煮水，安心饮用</h3>
            <div class="product-text">
                <div class="product-mark">
                    <img src="images/live.png" alt="直播中" height="20">
                    <img src="images/odds.png" alt="特惠中" height="20">
                    <img src="images/30day.png" alt="30天保价" height="20">
                    <img src="images/server.png" alt="售后免邮" height="20">
                </div>
                <h3>云米电水壶</h3>
                <p>￥59</p>
            </div>
        </a>
    </div>

2、运行效果

第九步：修改加了a标签后带来的问题

1、操作步骤

（1）清除a标签的默认下划线样式

a{
   text-decoration: none;/*去掉下划线*/
}

（2）给h3标签中的文字加上颜色

 .product .product-text h3{
           color:#000;
      }

（3）把a标签转换为块级元素

a{
display:block;/*a标签转换为块级元素*/
}

a标签默认的是属于内联元素，正常情况下内联元素中是不能放块级元素，但a标签特殊，可以这样用。但在这里，如果不把标签转换为块级元素，会发生很奇怪的效果。你给a标签加上 border:1px solid red; 后，如下图所示：

所以我们要把a标签转换为块级元素。当转换为块级元素后，效果如下，一切正常

2、运行代码

<style type="text/css">
        body,p,h3{
            margin:0px;
        }
a{
    text-decoration: none;/*去掉下划线*/
  }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
.product a{
    display:block;
}
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            /* height:100px; */
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
        .product .product-text h3{
            font-size: 20px;
            font-weight:400 ;
            margin-top:10px;
            color:#000;
        }
        
        .product .product-text p{
            font-size:20px ;
            color:#a92112;
            margin-top:5px;
        }
</style>
    
<div class="product">
  <!--添加超链接，实现点击后跳转到新页面-->
        <a href="https://www.icodingedu.com" target="_blank">
            <img src="images/kettle.png" alt="电水壶" width="195px">
            <p class="describe">快速煮水，安心饮用</h3>
            <div class="product-text">
                <div class="product-mark">
                    <img src="images/live.png" alt="直播中" height="20">
                    <img src="images/odds.png" alt="特惠中" height="20">
                    <img src="images/30day.png" alt="30天保价" height="20">
                    <img src="images/server.png" alt="售后免邮" height="20">
                </div>
                <h3>云米电水壶</h3>
                <p>￥59</p>
            </div>
        </a>
    </div>

3、运行效果

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）

共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿到 PC端，移动端，多端响应式开发项目开发

真机调试，云服务部署上线；
Linux环境下的 Nginx 部署，Nginx 性能优化；
Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！

过程中【不涉及】任何费用和利益，非诚勿扰。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！

绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！

绝对定位元素的特性

使元素完全脱离文档流,将释放自己的位置
元素的层级提升，会覆盖在其它元素上
离自己最近的定位父元素进行位置调整，如果没有定位的父元素，则相对body进行位置调整
元素支持宽高设置
margin:auto；水平居中失效。可以通过left与margin-left控制元素水平居中
定位元素未设置宽高情况下，同时设置top和bottom会改变元素高，同时设置left和right会改变元素宽

绝对定位元素常见用法合集

top、bottom以及left、right 优先级（案例1）
相对于直接父元素定位（案例2）
相对父元素的父元素定位（案例3）
相对于body定位（案例4）
子元素自适应父元素宽高（案例5）
设置元素水平垂直居中（案例6）
改变元素的层级关系（案例7）

1、top、bottom以及left、right 优先级

如果元素添加宽高，同时设置top与bottom属性，会以top值为主。
如果同时设置left和right属性，以left为主。

<style type="text/css">
   html,body{margin:0;}
   .box{
       width:100px;
       height:100px;
       margin: 50px auto;
       background-color: pink;
       position: relative;/*相对定位*/
  }
   .box .item{
       width:50px;
       height: 50px;
       position: absolute;/*绝对定位*/
       left:-20px;/*与相对定位元素左边距离*/
       top:-20px;/*与相对定位元素顶部距离*/
       bottom:0px;/*不生效*/
       right:0px;/*不生效*/
       background-color:skyblue;
  }
</style>

2、相对于直接父元素定位

相对于直接父元素定位案例是太多太多，下图列举了几个

其中图1鼠标滑动悬浮效果源码

<style>
   body,h3{
       margin:0;
       padding:0;
  }
   .music{
       width: 150px;
       height: 150px;
       margin:100px auto;
       position: relative;
  }
   .music h3{
       height: 35px;
       line-height: 35px;
       width: 100%;
       background-color: rgba(0,0,0,0.5);
       color:#fff;
       position: absolute;
       left:0px;
       bottom:0px;
       font-size: 14px;
       font-weight: 100;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
  }
   .music span.icon-hot{
       padding:2px 6px 4px 5px;
       background-color: red;
       color:#fff;
       font-size: 14px;
       position: absolute;
       right:0px;
       top:0px;
  }
</style>
<body>
   <div class="music">
       <img src="images/music.jpg" alt="" height="150">
       <div class="video-mask"></div>
       <span class="icon-hot">最新</span>
       <h3 class="video-title">古风戏腔丨一声曲叹，惊艳了芳华</h3>
   </div>
</body>

3、相对父元素的父元素定位-二级右测悬浮菜单

<style>
       body,ul,li{
           margin:0;
           padding:0;
      }
       body{
           background-image: linear-gradient(to right,skyblue,pink);
      }
       ul{
           list-style: none;
           width: 150px;
           margin: 100px auto;
           position: relative;/*相对定位，.menu-item就是相对于ul来绝对定位的*/
      }
       ul li{
           height: 35px;
           line-height: 35px;
           text-indent: 2em;
           background-color:skyblue;
      }
       ul li a{
           text-decoration: none;
           color:#fff;
      }
       ul li:hover{
           background-color: salmon;
      }
       ul li .menu-item{
           width: 200px;
           height: 100%;
           background-color: #fff;
           position: absolute;/*绝对定位*/
           left:150px;
           top:0px;
           display: none;
      }
       ul li:hover .menu-item{
           display: block;
      }
   </style>
<body>
<ul class="menu">
   <li>
       <a href="#">菜单项1</a>
       <div class="menu-item">内容1</div>
   </li>
   <li>
       <a href="#">菜单项2</a>
       <div class="menu-item">内容2</div>
   </li>
   <li>
       <a href="#">菜单项3</a>
       <div class="menu-item">内容3</div>
   </li>
   <li>
       <a href="#">菜单项3</a>
       <div class="menu-item">内容4</div>
   </li>
</ul>
</body>

4、相对于body定位-右击显示桌面菜单

当鼠标在浏览器窗口右击时，会在右击的位置显示对应的桌面菜单。这里的菜单就是相对于body来绝对定位的。

<style>
   body,ul,li{
       margin: 0;
       padding: 0;
  }
   ul{
       list-style: none;
  }
   .menu{
       width:200px;
       height: 200px;
       background-color: #fff;
       border:1px solid #ddd;
       box-shadow: 2px 2px 5px #ddd;
       position: absolute;
       display: none;
  }
   .menu li{
       text-indent: 2em;
       font-size: 14px;
       color:#666;
       line-height: 30px;
  }
   .menu li:hover{
       background-color: #ddd;
  }
</style>
<body>
   <ul class="menu" id="menu">
       <li>返回</li>
       <li>前进</li>
       <li>重新加载</li>
       <li>新建文件夹</li>
       <li>设置背景</li>
   </ul>
   <script>
       var tag=document.getElementById('menu');
       var li=document.querySelectorAll('.menu li');
       //取消系统默认的右键弹窗
       document.oncontextmenu=function(){
           return false;
      }
       //按下右键，并抬起时
       document.onmouseup=function(e){
           if(e.button==2){//判断鼠标按下的时右键
               //获取鼠标按下时的坐标
               var x=e.pageX;
               var y=e.pageY;
               //把鼠标按下时的坐标，分别赋值给tag元素的left和top
               tag.style.left=x+'px';
               tag.style.top=y+'px';
               /*右键后，显示右侧桌面菜单*/
               tag.style.display='block';
          }
      }
       document.onclick=function(){
           /*在窗口任意位置点击，隐藏桌面菜单*/
           tag.style.display='none';
      }
   </script>
</body>

5、子元素自适应父元素宽高-黑色半透明遮罩层

黑色半透明遮罩层不用设置宽高。我们通过position的left，right、top、bottom来控制黑色半透明遮罩层宽度和高度。

<style>
   body,ul,li{
       margin:0;
       padding: 0;
  }
   ul{
       list-style: none;
       width:690px ;
  }
   ul li{
       margin:5px;
       float: left;
       background-color: skyblue;
       position: relative;/*相对定位*/
  }
   ul li:nth-child(1),ul li:nth-child(3){
       width: 200px;
       height: 200px;
  }
   ul li:nth-child(2){
       width: 250px;
       height: 200px;
  }
   ul li:nth-child(4),ul li:nth-child(5){
       width: 330px;
       height: 200px;
  }
   ul li::before{
       display: block;
       content: "";
       /*通过定位，来控制元素的宽高，可以自适应父元素*/
       position: absolute;
       left:20px;
       right:20px;
       top:20px;
       bottom:20px;
       background-color: rgba(0,0,0,0.5);/*黑色半透明遮罩层*/
  }
</style>
<body>
   <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</body>

6、绝对定位设置元素水平垂直居中

三角形相对父元素水平居中源码

<style>
   html,body{
       margin:0;
       width: 100%;
       height: 100%;
  }
   .tag{
       width:100px;
       height:100px;
       padding: 10px;
       margin: 100px auto;
       background-color:orange;
       border-radius: 10px;
       position: relative;/*绝对定位*/
  }
   .tag::after{
       display:block;
       content: "";
       /*以下三行代码，绘制三角形*/
       width:0;
       border:10px solid transparent;
       border-bottom-color:orange;
       position: absolute; /*利用绝对定位设置三角形的位置*/
       /*以下两行代码，设置三角形相对父元素水平居中*/
       left:50%;
       margin-left:-10px;
       top:-20px;
  }
</style>
<body>
   <div class="tag"></div>
</body>

7、改变元素的层级关系-3D图片展示效果

当鼠标滑动到元素上面，通过改变z-index的值，来提升元素层级，让其在最上方展示。

<style>
   body,ul,li{
       margin:0;
       padding: 0;
  }
   body{
       background-color:#000;
  }
   ul{
       list-style: none;
       width: 800px;
       height: 300px;
       margin: 50px auto;
       position: relative;/*相对定位*/
       perspective:800px ;/*3D场景-景深（视距）*/
  }
   ul li{
       width:400px;
       height:300px;
       position: absolute;/*绝对定位*/
       left:calc(var(--i)*100px);/*通过自定义属性动态计算元素left值*/
       transform: rotateY(20deg);/*Y轴旋转20deg*/
       box-shadow: 0px 2px 35px skyblue;
       transition: all .5s;/*过渡动画*/
  }
   ul li img{
       width: 100%;
       height: 100%;
       object-fit: cover;
  }
   ul li:hover{
       border:10px solid #fff;
       transform: rotateY(0deg);/*元素Y轴旋转到0deg*/
       z-index:2;/*改变元素层级，让元素在最上面显示*/
       top:50px;
  }
</style>
<body>
   <ul>
       <li style="--i:0"><img src="images/rotate1.webp" alt=""></li>
       <li style="--i:1"><img src="images/rotate2.webp" alt=""></li>
       <li style="--i:2"><img src="images/rotate3.webp" alt=""></li>
       <li style="--i:3"><img src="images/rotate1.webp" alt=""></li>
       <li style="--i:4"><img src="images/rotate2.webp" alt=""></li>
       <li style="--i:5"><img src="images/rotate3.webp" alt=""></li>
   </ul>
</body>

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）

共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从蓝湖UI设计稿到 PC端，移动端，多端响应式开发项目开发

真机调试，云服务部署上线；
Linux环境下的 Nginx 部署，Nginx 性能优化；
Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用使用 Git 在线项目部署；

过程中【不涉及】任何费用和利益，非诚勿扰。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自公众号！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

在线咨询

上一篇：CSS-设置水平居中总结
下一篇：PS丨第六课：图层的初步认识

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html+CSS小案例项目：CSS开发小米商城电商产品展示效果

第一步、构建长方形盒子，同时水平居中

第二步、添加产品图，同时设置水平居中

第三步、设置产品描述样式

第四步、构建一个长方形，用来包裹后所有内容

第五步、开发 直播中、特惠、30天保价、售后免邮效果

第六步、开发产品标题效果

第七步、开发产品价格效果

第八步、添加a超链接，实现页面跳转

第九步：修改加了a标签后带来的问题

1、top、bottom以及left、right 优先级

2、相对于直接父元素定位

3、相对父元素的父元素定位-二级右测悬浮菜单

4、相对于body定位-右击显示桌面菜单

5、子元素自适应父元素宽高-黑色半透明遮罩层

6、绝对定位设置元素水平垂直居中

7、改变元素的层级关系-3D图片展示效果

您的项目需求

第五步、开发直播中、特惠、30天保价、售后免邮效果