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老師的博客-艾編程

現代社會，網頁已經成為企業、個人展示和宣傳的重要窗口，因此掌握網頁制作技能是非常有必要的。今天，我們將為大家介紹8款優秀的網頁設計模板網站，哪怕是小白也能幫助你快速搭建出令人驚艷的網頁。

一、即時設計

即時設計是一款支持在線協作的專業級 UI 設計工具，用戶數已突破230萬，支持 Sketch、Figma、XD 格式導入，無需下載，在線使用。10000+精選設計資源、100+提效插件即拿即用；支持創建交互原型、獲取設計標注，為產設研團隊提供一站式協同辦公體驗，一個鏈接即可完成交付，內容修改實時同步。

響應式網頁設計：

優點：

漏標的地方開發者也可以自行切圖
支持多平臺預設及批量導出
顏色整合顯示，一鍵定位對應元素

二、17素材

17素材網主要收集jQuery網頁特效、jQuery網頁代碼、網站模板、網頁模板、企業模板、商城模板、圖標等素材，為html網站模板開發人員提供高效率的工作方式。

部分素材需要積分才能下載。

三、 jquery 插件庫

jQuery插件庫是一組由開發者編寫的、可重復使用的jQuery插件集合，為Web開發人員提供了多種常用功能的封裝。這些插件可以快速實現諸如表單驗證、圖片輪播、下拉菜單、模態框等功能，使得Web開發人員能夠更快地完成開發任務，減少代碼重復性工作。

它快速、輕量并且簡化了我們瀏覽 HTML 文檔和操作頁面元素的方式。因為它還具有高度可擴展性，所以在框架之上構建了許多jQuery 插件來為網站添加功能。從 UI 組件和元素到布局和網格，有一個jQuery 插件可以滿足您網站所需的幾乎所有功能。

詳情頁還可以查看詳細代碼。

四、凡科建站

凡科建站提供自助建站、做網站、快速建站等營銷推廣服務，凡科建站平臺提供網站模板資源，擁有2000萬+流量入口，精選優質服務商，7*8在線服務；四大搜索覆蓋，快速上線，全網曝光，助力商家完成營銷目標。

網站模板圖片素材定期更新，簡單易操作，小白也會使用；而且擁有SEO框架布局，首頁、欄目產品及文章頁均可獨立設置標題/關鍵詞/描述；后臺直接修改聯系方式、傳真、郵箱、地址等，修改更加方便；同一個后臺管理，四網合一，用戶體驗好！

優點：

3000+精美網站模板，免費使用
100+行業覆蓋，應有盡有
素材豐富，圖片、字體、視頻等多種素材

五、網站模板庫

網站模板庫提供大量精選高質量并永久免費的(網站模版、網頁模板、手機模板、企業網站模板、網站模版)，包括html模板、后臺管理模板、博客模板及各行業類型等上千種模版。

模板素材眾多。

優點：

后臺操作簡單，功能全面
分類詳細，可以根據自己的需求快速找到合適的模板
網站自適應，根據屏幕大小改變網站布局，不變形

六、模板

提供海量精美免費網站模板、企業網站模板、html模板網站、公司網站模板、手機網站模板、自適應網站模板等免下載使用。

該網站收集了大量優質網站設計作品，適用于多個專業的 WordPress 主題模板、HTML5模板、CSS Menu等實用資源。

特色：

100%的響應
漂亮和干凈的設計
清潔和注釋代碼

七、AB模板網

AB模板網專注企業網站模板制作，包括企業pbootcms網站模板，靜態網頁模板，網站源碼下載，HTML網站模板等等。

這個網站專門提供織夢的網頁模板，性質和上面一樣，也是上傳到服務器上。

特點：

手工書寫DIV+CSS、代碼精簡無冗余
分類詳細，根據需要直接定位
SEO框架布局，欄目及文章頁均可獨立設置標題/關鍵詞/描述

八、織夢貓

織夢貓是一個網站模板分享交流平臺，網站以織夢模板、建站資訊、織夢教程為主要內容，以“共享創造價值”為理念，以“尊重原創”為準則。滿足用戶不同的網站模板需求。

同樣也提供dedecms的網頁模板。

模板安裝方法：

下載最新的織夢dedecms5.7 UTF8版本。
解壓下載的織夢安裝包，得到docs和uploads兩個文件夾，將uploads里面的所有文件和文件夾上傳到你的網站根目錄
安裝dede系統。(如果您已經安裝,請跳過本步.)直接運行：http://您的域名/install
將web文件夾內的所有文件夾上傳并覆蓋到織夢的安裝目錄;
登陸后臺并還原數據庫：

1）進入dede后臺，找到“系統”-“數據庫備份/還原”

2）在屏幕右上角點擊“數據還原”

3）點擊屏幕下方的'開始還原'按鈕

確定網站風格（無論是否修改，都點擊一下確定）：

1）點擊“系統”---系統基本參數

2）將“站點根網址”改為您的網址，如http://www.xxx.com/（本地安裝請保持http://127.0.0.1。）

3）點擊“確定”按鈕

更新整站緩存：點擊“生成”-“更新系統緩存”
更新網站：點擊“生成”-“一鍵更新網站”-“更新所有”-“開始更新” 點擊“生成”-“更新主頁html” 至此，模板安裝結束

這些網頁模板網站提供了多樣化的選擇，從專業的商業網站到個人博客，從免費的模板到付費的高級模板，滿足了不同用戶的需求。無論您是有設計經驗的專業人士還是初學者，這些網站都能幫助您快速搭建一個具有吸引力和功能性的網站。

如果你還有更好的方式或工具推薦，記得在評論區互動討論！

文件目錄

assets文件夾：靜態資源目錄，主要存放css、fonts、images、js等靜態資源文件；

favicon.ico文件：網站圖標；

index.html文件：首頁html，主要的頁面結構與布局；

適用于期末HTML大作業、課設項目、畢設項目等，更適用于商用，企業官網展示等。

頁面結構代碼

頁面結構清晰，布局合理，純原生實現響應式布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="keywords" content="ChatChat, Chat, 木番薯, 電子商務, 微信商城">
  <meta name="description" content="關于您所想所悟我們知道您一直想付諸實現，木番薯服務不止于單純的信息服務，我們將全程與您一同創建打造。
依托于木番薯服務與技術團隊超過十年的經驗積累，我們有能力成為您細細專業領域的左膀右臂。">
  <title>木番薯網絡科技</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./assets/dist/css/lib.css">
  <link rel="stylesheet" href="./assets/dist/css/common.css">
  <link rel="stylesheet" href="./assets/dist/css/index.css">
</head>
<body>
 
  <!-- 導航欄 -->
  <div class="header container-fluid" id="pc-header">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="fl" href="#" title="ChatChat">
          <img class="logo" src="./assets/dist/images/index/logo.png" alt="">
        </a>
      </div>
 
      <div id="bs-navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="javascript：void(0);" data-maodian="based-on">電子商務微信商城</a>
          </li>
          <li>
            <a href="javascript：void(0);" data-maodian="weixin-dev">個性化100%開發</a>
          </li>
          <li>
            <a href="javascript：void(0);" data-maodian="procurement-distribution">采購分銷平臺訂制</a>
          </li>
          <li>
            <a href="javascript：void(0);" data-maodian="about-us">關于我們</a>
          </li>
          <li>
            <a href="javascript：void(0);" data-maodian="quick-contact">聯系我們</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- end 導航欄 -->
 
  <!-- banner -->
  <div class="jumbotron">
    <img class="banner-pic" src="./assets/dist/images/index/banner.jpg" alt="">
    <div class="banner-txt">
      <h2>有好的想法付諸實現</h2>
      <p>交給木番薯科技</p>
      <p><a class="btn btn-primary btn-lg" href="javascript：void(0);" data-maodian="about-chat" role="button">了解更多</a></p>
    </div>
  </div>
  <!-- end banner -->
 
  <!-- 關于 -->
  <div class="about-chat" id="about-chat">
    <div class="container">
      <h3>關于木番薯</h3>
      <p>關于您所想所悟我們知道您一直想付諸實現，木番薯服務不止于單純的信息服務，我們將全程與您一同創建打造。</p>
      <p>依托于木番薯服務與技術團隊超過十年的經驗積累，我們有能力成為您細細專業領域的左膀右臂。</p>
 
      <div class="row example-box">
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="f-example">
            <div class="i-box">
              <img class="i-img" src="./assets/dist/images/index/icon1.png" alt="">
            </div>
            <h4>贈送ESC云服務</h4>
            <p>所有簽約客戶均可獲贈</p>
            <p>一年期阿里云服務</p>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="f-example">
            <div class="i-box">
              <img class="i-img" src="./assets/dist/images/index/icon2.png" alt="">
            </div>
            <h4>產品梳理能力</h4>
            <p>我們為客戶交付高保真原型</p>
            <p>確保需求梳理到位</p>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="f-example">
            <div class="i-box">
              <img class="i-img" src="./assets/dist/images/index/icon3.png" alt="">
            </div>
            <h4>開發技術核心</h4>
            <p>開發團隊為您挑選</p>
            <p>一線資深技術工程師</p>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="f-example">
            <div class="i-box">
              <img class="i-img" src="./assets/dist/images/index/icon4.png" alt="">
            </div>
            <h4>承諾按時交付</h4>
            <p>保質保量按時交付</p>
            <p>是我們的最低標準</p>
          </div>
        </div>
      </div>
 
    </div>
  </div>
  <!-- end 關于 -->
 
  <!-- 基于 -->
  <div class="based-on" id="based-on">
    <div class="container">
      <h3>基于微信平臺的移動電子商務整合</h3>
 
      <div class="row based-box">
        <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
          <div class="f-based">
            <h4>
              <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
              豐富電子商務過往開發經驗
            </h4>
            <p>從PC端到移動端，從網上一般貿易到跨境電商，都是我們的主戰場</p>
          </div>
        </div>
        <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
          <div class="f-based">
            <h4>
              <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
              從基礎模塊到定制開發
            </h4>
            <p>多年積累基礎模塊涵蓋商品、促銷優惠、購物車、會員、積分、訂單、支付，同時也仍然保留了較大的空間為您定制</p>
          </div>
        </div>
        <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
          <div class="f-based">
            <h4>
              <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
              注重交互設計客戶體驗
            </h4>
            <p>好的產品總是從第一面開始，死磕細節，我們不會忘記客戶永遠是第一位的</p>
          </div>
        </div>
        <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
          <div class="f-based">
            <h4>
              <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
              安全與性能已為您考慮周全
            </h4>
            <p>網絡安全數據安全一直是我們努力進步完善的方向。布局Linux平臺，啟用SSL，配置安全策略，加密算法可以全部都有</p>
          </div>
        </div>
      </div>
 
    </div>
  </div>
  <!-- end 基于 -->
 
  <!-- 微信訂制開發 -->
  <div class="weixin-dev" id="weixin-dev">
    <div class="container">
      <h3>微信訂制開發</h3>
      <p>如果目前市面上眾多的標準產品已無法滿足您的需求，</p>
      <p>不妨考慮我們的100%真訂制開發</p>
 
      <div class="row dev-box">
        <div class="col-xs-10 col-sm-10 col-md-3">
          <div class="f-dev">
            <h4>
              <span class="i-num at-right">01</span>
              梳理您的需求
            </h4>
            <p>老板說首先應當談需求而不是談錢，梳理您的需求，為您將需求轉換為直觀可靠的原型產品才是正經</p>
          </div>
          <div class="f-dev">
            <h4>
              <span class="i-num at-right">02</span>
              了解您的應用場景
            </h4>
            <p>在我們看來，系統不是一個鼓勵的個體，而應當是一個生態。好的企業生態使客戶滿意，使員工滿足</p>
          </div>
          <div class="f-dev">
            <h4>
              <span class="i-num at-right">03</span>
              開始量身訂制
            </h4>
            <p>開發訂制過程中，我們仍然將保持與客戶進行必要的溝通、反饋。已簽約項目將會與匹配一位產品經理</p>
          </div>
        </div>
 
        <div class="col-md-4 col-md-offset-1 visible-md visible-lg">
          <img class="phone-img" src="./assets/dist/images/index/phone.png" alt="">
        </div>
 
        <div class="col-xs-10 col-xs-offset-2 col-sm-10 col-sm-offset-2 col-md-3 col-md-offset-1">
          <div class="f-dev">
            <h4>
              <span class="i-num at-left">04</span>
              適當調整適應變化
            </h4>
            <p>我們知道唯有變化為不變，所以在項目開發啟動后，我們仍然接受客戶進行適當必要的需求變更</p>
          </div>
          <div class="f-dev">
            <h4>
              <span class="i-num at-left">05</span>
              邀請客戶參與內測
            </h4>
            <p>當項目具備整體測試條件，我們將會邀請客戶一同參與內測完善項目產品，以期望達成完美目標</p>
          </div>
          <div class="f-dev">
            <h4>
              <span class="i-num at-left">06</span>
              交付產品與源代碼
            </h4>
            <p>除了交付項目產品，我們亦可有償交付項目源代碼，以便于您交付自身開發團隊進行維護、迭代、升級、改造</p>
          </div>
        </div>
 
      </div>
 
    </div>
  </div>
  <!-- end 微信訂制開發 -->
 
  <!-- 采購分銷平臺訂制 -->
  <div class="procurement-distribution" id="procurement-distribution">
    <div class="container">
      <h3>采購分銷平臺訂制</h3>
      <p>集中一站式采購／多樣化層級分銷／統一管理售后</p>
 
      <div class="row procurement-box">
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-procurement">
            <h4>
              集中一站式采購
            </h4>
            <span class="f-btn">賬戶邀請審核限定門檻</span>
            <ul>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                跨類目商品
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                多倉庫管理
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                批量采購導入
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                多種支付方式
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-procurement">
            <h4>
              多樣化層級分銷
            </h4>
            <span class="f-btn">公司企業個人層級劃分</span>
            <ul>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                商品設置可見
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                品牌折扣差異
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                引入信用額度
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                返點月度結算
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-procurement">
            <h4>
              統一管理售后
            </h4>
            <span class="f-btn">對接內部ERP打通關鍵</span>
            <ul>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                管理后臺隔離
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                配置OpenAPI
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                報表統計分析
              </li>
              <li>
                <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
                權限賬戶限定
              </li>
            </ul>
          </div>
        </div>
      </div>
 
    </div>
  </div>
  <!-- end 采購分銷平臺訂制 -->
 
  <!-- 快速聯系我們 -->
  <div class="quick-contact" id="quick-contact">
    <div class="container">
      <h3>快速聯系我們</h3>
 
      <div class="quick-box">
        <div class="f-quick">
          <img class="i-img" src="./assets/dist/images/index/quick.png" alt="">
 
          <div class="email-box">
            <a href="mailto:mengchatchat@qq.com" class="btn btn-primary btn-lg email-btn">發送郵件</a>
          </div>
        </div>
      </div>
 
    </div>
  </div>
  <!-- end 快速聯系我們 -->
 
  <!-- 關于我們 -->
  <div class="about-us" id="about-us">
    <div class="container">
 
      <div class="row about-box">
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-about">
            <h4>
              木番薯科技
            </h4>
            <p>木番薯，您身邊的微信小程序專家</p>
            <p>聯系郵箱：mengchatchat@qq.com</p>
            <p>公眾號：木番薯科技</p>
            <p>木番薯地址：廣東省廣州市海珠區</p>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-about">
            <h4 class="us-txt">
              關于我們
            </h4>
            <p class="desc-txt">
              一群熱愛互聯網的80后90后，運用我們的專業為您出謀劃策。在微信運用越來越廣的今天，也希望有我們助您走的更遠！
            </p>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4">
          <div class="f-about text-center">
            <img class="i-img" src="./assets/dist/images/index/erweima.jpg" alt="">
            <p class="erweima-txt">
              掃描二維碼，關注我們
            </p>
          </div>
        </div>
      </div>
 
      <div class="bottom-desc">
        <p>? 2023 木番薯科技 版權所有  粵ICP備16024352-1</p>
        <p>廣州愛范電子商務有限公司</p>
      </div>
    </div>
  </div>
  <!-- end 關于我們 -->
 
  <script src="./assets/dist/js/lib.js"></script>
  <script src="./assets/dist/js/common.js"></script>
  <script src="./assets/dist/js/index.js"></script>
</body>
</html>

css實現

js實現

請點贊+收藏哦。至于css、js、圖片等資源文件、源碼文件，可.關.~注↓公.Z.號獲取。

[木番薯科技]

在線咨詢

上一篇：電腦基礎知識教程-弈安教你認識ActiveX技術
下一篇：HTML5 input type = date 設置最大最小日期

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

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

第二步、添加產品圖，同時設置水平居中

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

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

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

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

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

第八步、添加a超鏈接，實現頁面跳轉

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

一、即時設計

二、17素材

三、 jquery 插件庫

四、凡科建站

五、網站模板庫

六、模板

七、AB模板網

八、織夢貓

更多工具推薦

文件目錄

css實現

js實現

您的項目需求

整合營銷服務商

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

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

第二步、添加產品圖，同時設置水平居中

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

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

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

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

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

第八步、添加a超鏈接，實現頁面跳轉

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

一、即時設計

二、17素材

三、 jquery 插件庫

四、凡科建站

五、網站模板庫

六、模板

七、AB模板網

八、織夢貓

更多工具推薦

文件目錄

css實現

js實現

您的項目需求

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