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天保價、售后免郵效果