国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或

所在位置：首頁 > 營銷資訊 > 網(wǎng)站運營 > Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果

Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果

時間：2023-05-27 00:42:01 | 來源：網(wǎng)站運營

時間：2023-05-27 00:42:01 來源：網(wǎng)站運營

Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果：關(guān)于電商產(chǎn)品展示，無論是從首頁還是到欄目頁，再到產(chǎn)品的詳情頁，產(chǎn)品展示效果不僅僅是在電商平臺，在很多的企業(yè)網(wǎng)站也使用頻繁，今天為大家分享一個HTML+CSS小案例項目：小米電商平臺的商品展示頁面！我們來一起看看吧！

那么我們要開發(fā)一個什么樣的效果呢？來吧展示?。?！

接著下來我們實戰(zhàn)開發(fā)吧！

溫馨提示：本期課程是三十個實戰(zhàn)案例的第2節(jié)，為了更好的學(xué)好前端，可以配合艾編程30天計劃學(xué)習(xí)效果更好，因為30個案例就是30天計劃的實戰(zhàn)作業(yè)一部分！具體參與方式，我放在文章的最底部了，大家可以看完這個效果后找助理老師領(lǐng)取！

第一步、構(gòu)建長方形盒子，同時水平居中

1、操作步驟

（1）構(gòu)建一個名為product的盒子

<div class='product'></div>（2）給product 添加寬度、高度、背景顏色。這里的高度正常情況下是不能設(shè)置死，是為了方便大家理解看效果，所以加上的。后面我們會去掉

.product{ width:268px;/*寬度*/ height:400px;/*高度*/ background-color: red;/*背景顏色*/}（3）、清除body自帶的的默認樣式

body{margin:0px;/*外邊距為0px*/}（4）、設(shè)置.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、實現(xiàn)效果

第二步、添加產(chǎn)品圖，同時設(shè)置水平居中

1、操作步驟

（1）、在.product盒子中添加產(chǎn)品圖,同時設(shè)置圖片寬度和alt描述

<body>   <div class="product">       <!--img標簽，用來在頁面當中插入圖片-->       <img src="images/kettle.png" alt="電水壺" width="195px">   </div></body>

（2）、設(shè)置圖片在水平方向居中顯示

.product{text-align:center;/*設(shè)置內(nèi)容文字或圖片在盒子中水平居中*/}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、實現(xiàn)效果

第三步、設(shè)置產(chǎn)品描述樣式

1、操作步驟

1、在.product盒子中添加p標簽，同時到名為describe，p標簽用來包裹產(chǎn)品描述

<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、實現(xiàn)代碼

<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、實現(xiàn)效果

第四步、構(gòu)建一個長方形，用來包裹后所有內(nèi)容

1、操作步驟

1、在.product盒子中，再構(gòu)建一個名為 .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;/*上下左右內(nèi)邊距15px*/      }

3、我們把最開始為了方便看效果，給.product添加的高度給刪除（或注釋）

.product{/*height:400px;*/}2、實現(xiàn)代碼

<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;/*上下左右內(nèi)邊距15px*/}</style><body>    <div class="product">        <img src="images/kettle.png" alt="電水壺" width="195px">        <p class="describe">快速煮水，安心飲用</h3>        <div class="product-text">            添加內(nèi)容邊距，使里面的內(nèi)容與盒子間有上下左右有15px空隙        </div>    </div></body>

3
實現(xiàn)效果

第五步、開發(fā) 直播中、特惠、30天保價、售后免郵效果

1、操作步驟

（1）在名為 .product-text盒子中添加類名為 product-mark的div盒子,同時在里面插入四張圖,同時把圖片高度設(shè)為 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）添加好的圖片之間默認有一定的空隙，這個空隙在不同的瀏覽器中看到的大小可能不一樣。所以我們需要把這個默認的空隙去掉，然后自己給圖片添加外邊距來實現(xiàn)空隙。

空隙產(chǎn)生的原因，是瀏覽器把圖片間的換行和空格給編譯了。我們的處理方式可以在.product-mark中添加font-size:0px;就可以消除。

.product .product-text .product-mark{ font-size: 0px;/*去掉圖片間的空隙*/ }（3）、消除空隙后，我們給圖片單獨添加margin外邊距來實現(xiàn)空隙效果。

.product .product-text .product-mark img{           margin:0px 2px;/*給圖片設(shè)置左右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;/*上下左右內(nèi)邊距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、實現(xiàn)效果

第六步、開發(fā)產(chǎn)品標題效果

1、操作步驟

（1）、在product-text盒子中添加 h3標簽，用來包裹標題內(nèi)容

<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、實現(xiàn)效果

第七步、開發(fā)產(chǎn)品價格效果

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;/*上下左右內(nèi)邊距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、實現(xiàn)效果

第八步、添加a超鏈接，實現(xiàn)頁面跳轉(zhuǎn)

添加了超鏈接之后，頁面中的文字就添加了下劃線，同時h3中的文字顏色也發(fā)生了改變，那下一步我們就來修正下這些細節(jié)

1、代碼

<div class="product">  <!--添加超鏈接，實現(xiàn)點擊后跳轉(zhuǎn)到新頁面-->        <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標簽轉(zhuǎn)換為塊級元素

a{display:block;/*a標簽轉(zhuǎn)換為塊級元素*/}a標簽?zāi)J的是屬于內(nèi)聯(lián)元素，正常情況下內(nèi)聯(lián)元素中是不能放塊級元素，但a標簽特殊，可以這樣用。但在這里，如果不把標簽轉(zhuǎn)換為塊級元素，會發(fā)生很奇怪的效果。你給a標簽加上 border:1px solid red; 后，如下圖所示：

所以我們要把a標簽轉(zhuǎn)換為塊級元素。當轉(zhuǎn)換為塊級元素后，效果如下，一切正常

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;/*上下左右內(nèi)邊距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">  <!--添加超鏈接，實現(xiàn)點擊后跳轉(zhuǎn)到新頁面-->        <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、運行效果

為幫助到一部分同學(xué)不走彎路，真正達到一線互聯(lián)網(wǎng)大廠前端項目研發(fā)要求，首次實力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計劃》，內(nèi)容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業(yè)項目開發(fā)，云服務(wù)器部署上線，從入門到精通

PC端項目開發(fā)（1個）
移動WebApp開發(fā)（2個）
多端響應(yīng)式開發(fā)（1個）

共4大完整的項目開發(fā) ！一行一行代碼帶領(lǐng)實踐開發(fā)，實際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進入工作狀態(tài)，省得浪費時間。

從學(xué)習(xí)一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實大廠項目的開發(fā)標準和設(shè)計規(guī)范，命名規(guī)范，項目代碼規(guī)范，SEO優(yōu)化規(guī)范

從藍湖UI設(shè)計稿到 PC端，移動端，多端響應(yīng)式開發(fā)項目開發(fā)

真機調(diào)試，云服務(wù)部署上線；
Linux環(huán)境下的 Nginx 部署，Nginx 性能優(yōu)化；
Gzip 壓縮，HTTPS 加密協(xié)議，域名服務(wù)器備案，解析；
企業(yè)項目域名跳轉(zhuǎn)的終極解決方案，多網(wǎng)站、多系統(tǒng)部署；
使用使用 Git 在線項目部署；

這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計劃》中每一個細節(jié)都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業(yè)項目開發(fā)必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計劃，來自今日頭條！老師會邀請你進入學(xué)習(xí)，并給你發(fā)放相關(guān)資料

關(guān)鍵詞：商城,展示,效果,小米,產(chǎn)品,項目

網(wǎng)站
營銷
設(shè)計
運營
優(yōu)化
效率
專注
電商
方案
推廣

解決方案&服務(wù)

客戶&案例

營銷資訊

關(guān)于我們

解決方案&服務(wù)

客戶&案例

營銷資訊

關(guān)于我們

微信公眾號

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。點擊下載Chrome瀏覽器

關(guān)閉

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

快捷入口

Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果

第一步、構(gòu)建長方形盒子，同時水平居中

第二步、添加產(chǎn)品圖，同時設(shè)置水平居中

第三步、設(shè)置產(chǎn)品描述樣式

第四步、構(gòu)建一個長方形，用來包裹后所有內(nèi)容

第五步、開發(fā) 直播中、特惠、30天保價、售后免郵效果

第六步、開發(fā)產(chǎn)品標題效果

第七步、開發(fā)產(chǎn)品價格效果

第八步、添加a超鏈接，實現(xiàn)頁面跳轉(zhuǎn)

第九步：修改加了a標簽后帶來的問題

有哪些好看實用的個人簡歷模板下載？有嘛？

杭州APP外包都有哪些流程

建立個人博客網(wǎng)站從未如此簡單：25個優(yōu)秀個人網(wǎng)站設(shè)計模板一步到位

軟文營銷之網(wǎng)站軟文的打造

布谷一對一視頻直播源碼|手機視頻直播平臺android源碼可打包自己視頻直播

制作一個商城網(wǎng)站需要多少錢？

為啥現(xiàn)在手機廠商越來越重視用戶體驗了！?

杭州的學(xué)校網(wǎng)站建設(shè)時的注意事項

張家口seo,如何做好張家口seo優(yōu)化？

初創(chuàng)企業(yè)如何建立自己的網(wǎng)站？

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

快捷入口

Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果

第一步、構(gòu)建長方形盒子，同時水平居中

第二步、添加產(chǎn)品圖，同時設(shè)置水平居中

第三步、設(shè)置產(chǎn)品描述樣式

第四步、構(gòu)建一個長方形，用來包裹后所有內(nèi)容

第五步、開發(fā) 直播中、特惠、30天保價、售后免郵效果

第六步、開發(fā)產(chǎn)品標題效果

第七步、開發(fā)產(chǎn)品價格效果

第八步、添加a超鏈接，實現(xiàn)頁面跳轉(zhuǎn)

第九步：修改加了a標簽后帶來的問題

推薦文章

Html+CSS小案例項目：CSS開發(fā)小米商城電商產(chǎn)品展示效果

全市唯一區(qū)域型服務(wù)平臺！張家口市產(chǎn)業(yè)數(shù)字化服務(wù)工業(yè)互聯(lián)網(wǎng)平臺項

社交分銷電商系統(tǒng)開發(fā)項目案例

教你花費又少 效果又好的直通車技巧

要怎么樣才能把一款產(chǎn)品做到人氣高 銷量高

美妝商城功能開發(fā),商城平臺開發(fā)

網(wǎng)絡(luò)推廣選擇外包效果如何？如何找好的外包平臺

義烏微信商城開發(fā)公司

如何打造閑魚爆款產(chǎn)品？

企業(yè)品牌推廣總是不見效果？這些地方你做對了嗎

有哪些好看實用的個人簡歷模板下載？有嘛？

杭州APP外包都有哪些流程

建立個人博客網(wǎng)站從未如此簡單：25個優(yōu)秀個人網(wǎng)站設(shè)計模板一步到位

軟文營銷之網(wǎng)站軟文的打造

布谷一對一視頻直播源碼|手機視頻直播平臺android源碼 可打包自己視頻直播

制作一個商城網(wǎng)站需要多少錢？

為啥現(xiàn)在手機廠商越來越重視用戶體驗了！?

杭州的學(xué)校網(wǎng)站建設(shè)時的注意事項

張家口seo,如何做好張家口seo優(yōu)化？

初創(chuàng)企業(yè)如何建立自己的網(wǎng)站？

第一步、構(gòu)建長方形盒子，同時水平居中

第二步、添加產(chǎn)品圖，同時設(shè)置水平居中

第三步、設(shè)置產(chǎn)品描述樣式

第四步、構(gòu)建一個長方形，用來包裹后所有內(nèi)容

第五步、開發(fā) 直播中、特惠、30天保價、售后免郵效果

第六步、開發(fā)產(chǎn)品標題效果

第八步、添加a超鏈接，實現(xiàn)頁面跳轉(zhuǎn)

全市唯一區(qū)域型服務(wù)平臺！張家口市產(chǎn)業(yè)數(shù)字化服務(wù)工業(yè)互聯(lián)網(wǎng)平臺項

教你花費又少效果又好的直通車技巧

要怎么樣才能把一款產(chǎn)品做到人氣高銷量高

網(wǎng)絡(luò)推廣選擇外包效果如何？如何找好的外包平臺

如何打造閑魚爆款產(chǎn)品？

企業(yè)品牌推廣總是不見效果？這些地方你做對了嗎

有哪些好看實用的個人簡歷模板下載？有嘛？

布谷一對一視頻直播源碼|手機視頻直播平臺android源碼可打包自己視頻直播

制作一個商城網(wǎng)站需要多少錢？

為啥現(xiàn)在手機廠商越來越重視用戶體驗了！?

張家口seo,如何做好張家口seo優(yōu)化？

初創(chuàng)企業(yè)如何建立自己的網(wǎng)站？