Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

阿新 • • 發佈：2022-12-12

關於電商產品展示，無論是從首頁還是到欄目頁，再到產品的詳情頁，產品展示效果不僅僅是在電商平臺，在很多的企業網站也使用頻繁，今天為大家分享一個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老師的部落格-艾程式設計

Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

第一步、構建長方形盒子，同時水平居中

第二步、新增產品圖，同時設定水平居中

第三步、設定產品描述樣式

第四步、構建一個長方形，用來包裹後所有內容

第五步、開發直播中、特惠、30天保價、售後免郵效果

第六步、開發產品標題效果

第七步、開發產品價格效果

第八步、新增a超連結，實現頁面跳轉

第九步：修改加了a標籤後帶來的問題

Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

基於微信小程式雲開發實現的電商專案，可以自行定製開發

前端 css && 原型頭像 && 小米商城導航欄

大資料實戰（三）：flink（三）電商使用者行為分析（三）實時流量統計（一）

大資料實戰（四）：flink（四）電商使用者行為分析（四）實時流量統計（二）

大資料實戰（六）：flink（六）電商使用者行為分析（六）惡意登入監控

大資料實戰（七）：flink（七）電商使用者行為分析（七）訂單支付實時監控

電商直播路在何方？店寶寶：找到了未來的電商直播模式

美國討論新假冒產品法案：亞馬遜等電商平臺將承擔更多責任

發改委等多部門：到 2025 年，電商快件基本實現不再二次包裝

電商產品經理必修課-巨量電商庫存系統+倉庫管理+進貨商貨系統課程答疑+專案原始檔

亞馬遜封號啟示：品牌，跨境電商獨立站的“救世主”？

IDC：今年雙 11 期間電商全平臺出庫筆記本 147 萬臺、桌上型電腦 22 萬臺、平板 61 萬臺

曝一加定位變更：成為 OPPO 主攻線上電商的獨立子品牌，將推更多中低端機型

html+css 小專案注意事項

Python小專案：開發一個動態時鐘小程式（附原始碼）

前端05-CSS-案例2：新聞頁面

CSS小技巧：利用border實現三角形箭頭

HTML下拉導航選單的實現：CSS/Js的實現方案

html+css小例子-1

Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

第一步、構建長方形盒子，同時水平居中

第二步、新增產品圖，同時設定水平居中

第三步、設定產品描述樣式

第四步、構建一個長方形，用來包裹後所有內容

第五步、開發 直播中、特惠、30天保價、售後免郵效果

第六步、開發產品標題效果

第七步、開發產品價格效果

第八步、新增a超連結，實現頁面跳轉

第九步：修改加了a標籤後帶來的問題

相關推薦

第五步、開發直播中、特惠、30天保價、售後免郵效果