整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
于電商產(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)?。?/span>
1、操作步驟
（1）構(gòu)建 一個名為product的盒子
<div class='product'></div>（2）給product 添加寬度、高度 、背景顏色。這里的高度正常情況下是不能設(shè)置死，是為了方便大家理解看效果，所以加上的。后面我們會去掉
.product{
width:268px;/*寬度*/
height:400px;/*高度*/
background-color: red;/*背景顏色*/
}（3）、清除body自帶的的默認(rèn)樣式
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)效果
1、操作步驟
（1）、在.product盒子中添加產(chǎn)品圖,同時設(shè)置圖片寬度和alt描述
<body>
<div class="product">
<!--img標(biāo)簽，用來在頁面當(dāng)中插入圖片-->
<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)效果
1、操作步驟
1、在.product盒子中添加p標(biāo)簽，同時到名為describe，p標(biāo)簽用來包裹產(chǎn)品描述
<body>
<div class="product">
<img src="images/kettle.png" alt="電水壺" width="195px">
<p class='describe'>快速煮水，安心飲用</p>
</div>
</body>2、去掉h3自帶的默認(rèn)margin外邊距樣式
body,p{
margin:0px;/*同時去掉body和h3標(biāo)簽的默認(rèn)外邊距*/
}3、修飾h3中的文字樣式
.product p.describe{
font-size:16px ;/*字體大小*/
font-weight: 400;/*字體粗細(xì)*/
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)效果
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 添加如下樣式。當(dāng)然里添加的高度也是為了方便看效果，后面我們也會刪除。
.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)效果
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）添加好的圖片之間默認(rèn)有一定的空隙，這個空隙在不同的瀏覽器中看到的大小可能不一樣。所以我們需要把這個默認(rèn)的空隙去掉，然后自己給圖片添加外邊距來實現(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)效果
1、操作步驟
（1）、在product-text盒子中添加 h3標(biāo)簽，用來包裹標(biāo)題內(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自帶的默認(rèn)margin外邊距
body,p,h3{
margin:0px;/*同時去掉body,p,h3的默認(rèn)外邊距*/
}（3）、通過以下css來修飾標(biāo)題
.product .product-text h3{
font-size: 20px;/*字體大小*/
font-weight:400 ;/*字體粗細(xì)*/
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)效果
1、操作步驟
（1）在product-text中 添加 p標(biāo)簽，用來包裹價格
<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)效果
添加了超鏈接之后，頁面中的文字就添加了下劃線，同時h3中的文字顏色也發(fā)生了改變，那下一步我們就來修正下這些細(xì)節(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、運行效果
1、操作步驟
（1）清除a標(biāo)簽的默認(rèn)下劃線樣式
a{
text-decoration: none;/*去掉下劃線*/
}（2）給h3標(biāo)簽中的文字加上顏色
.product .product-text h3{
color:#000;
}（3）把a標(biāo)簽轉(zhuǎn)換為塊級元素
a{
display:block;/*a標(biāo)簽轉(zhuǎn)換為塊級元素*/
}a標(biāo)簽?zāi)J(rèn)的是屬于內(nèi)聯(lián)元素，正常情況下內(nèi)聯(lián)元素中是不能放塊級元素，但a標(biāo)簽特殊，可以這樣用。但在這里，如果不把標(biāo)簽轉(zhuǎn)換為塊級元素，會發(fā)生很奇怪的效果。你給a標(biāo)簽加上 border:1px solid red; 后，如下圖所示：
所以我們要把a標(biāo)簽轉(zhuǎn)換為塊級元素。當(dāng)轉(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é)不走彎路，真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項目研發(fā)要求，首次實力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計劃》，內(nèi)容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實企業(yè)項目開發(fā)，云服務(wù)器部署上線，從入門到精通
共4大完整的項目開發(fā) ！一行一行代碼帶領(lǐng)實踐開發(fā)，實際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進(jìn)入工作狀態(tài)，省得浪費時間。
從學(xué)習(xí)一開始就同步使用 Git 進(jìn)行項目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實大廠項目的開發(fā)標(biāo)準(zhǔn)和設(shè)計規(guī)范，命名規(guī)范，項目代碼規(guī)范，SEO優(yōu)化規(guī)范
從藍(lán)湖UI設(shè)計稿 到 PC端，移動端，多端響應(yīng)式開發(fā)項目開發(fā)
這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計劃》中每一個細(xì)節(jié)都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業(yè)項目開發(fā)必備技能，不走彎路 ！
過程中【不涉及】任何費用和利益，非誠勿擾 。
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計劃，來自！老師會邀請你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料
30 天挑戰(zhàn)學(xué)習(xí)計劃 Web 前端從入門到實戰(zhàn) | arry老師的博客-艾編程
現(xiàn)代社會，網(wǎng)頁已經(jīng)成為企業(yè)、個人展示和宣傳的重要窗口，因此掌握網(wǎng)頁制作技能是非常有必要的。今天，我們將為大家介紹8款優(yōu)秀的網(wǎng)頁設(shè)計模板網(wǎng)站，哪怕是小白也能幫助你快速搭建出令人驚艷的網(wǎng)頁。
即時設(shè)計是一款支持在線協(xié)作的專業(yè)級 UI 設(shè)計工具，用戶數(shù)已突破230萬，支持 Sketch、Figma、XD 格式導(dǎo)入，無需下載，在線使用。10000+精選設(shè)計資源、100+提效插件即拿即用；支持創(chuàng)建交互原型、獲取設(shè)計標(biāo)注，為產(chǎn)設(shè)研團(tuán)隊提供一站式協(xié)同辦公體驗，一個鏈接即可完成交付，內(nèi)容修改實時同步。
響應(yīng)式網(wǎng)頁設(shè)計：
優(yōu)點：
17素材網(wǎng)主要收集jQuery網(wǎng)頁特效、jQuery網(wǎng)頁代碼、網(wǎng)站模板、網(wǎng)頁模板、企業(yè)模板、商城模板、圖標(biāo)等素材，為html網(wǎng)站模板開發(fā)人員提供高效率的工作方式。
部分素材需要積分才能下載。
jQuery插件庫是一組由開發(fā)者編寫的、可重復(fù)使用的jQuery插件集合，為Web開發(fā)人員提供了多種常用功能的封裝。這些插件可以快速實現(xiàn)諸如表單驗證、圖片輪播、下拉菜單、模態(tài)框等功能，使得Web開發(fā)人員能夠更快地完成開發(fā)任務(wù)，減少代碼重復(fù)性工作。
它快速、輕量并且簡化了我們?yōu)g覽 HTML 文檔和操作頁面元素的方式。因為它還具有高度可擴展性，所以在框架之上構(gòu)建了許多jQuery 插件來為網(wǎng)站添加功能。從 UI 組件和元素到布局和網(wǎng)格，有一個jQuery 插件可以滿足您網(wǎng)站所需的幾乎所有功能。
詳情頁還可以查看詳細(xì)代碼。
凡科建站提供自助建站、做網(wǎng)站、快速建站等營銷推廣服務(wù)，凡科建站平臺提供網(wǎng)站模板資源，擁有2000萬+流量入口，精選優(yōu)質(zhì)服務(wù)商，7*8在線服務(wù)；四大搜索覆蓋，快速上線，全網(wǎng)曝光，助力商家完成營銷目標(biāo)。
網(wǎng)站模板圖片素材定期更新，簡單易操作，小白也會使用；而且擁有SEO框架布局，首頁、欄目產(chǎn)品及文章頁均可獨立設(shè)置標(biāo)題/關(guān)鍵詞/描述；后臺直接修改聯(lián)系方式、傳真、郵箱、地址等，修改更加方便；同一個后臺管理，四網(wǎng)合一，用戶體驗好！
優(yōu)點：
網(wǎng)站模板庫提供大量精選高質(zhì)量并永久免費的(網(wǎng)站模版、網(wǎng)頁模板、手機模板、企業(yè)網(wǎng)站模板、網(wǎng)站模版)，包括html模板、后臺管理模板、博客模板及各行業(yè)類型等上千種模版。
模板素材眾多。
優(yōu)點：
提供海量精美免費網(wǎng)站模板、企業(yè)網(wǎng)站模板、html模板網(wǎng)站、公司網(wǎng)站模板、手機網(wǎng)站模板、自適應(yīng)網(wǎng)站模板等免下載使用。
該網(wǎng)站收集了大量優(yōu)質(zhì)網(wǎng)站設(shè)計作品，適用于多個專業(yè)的 WordPress 主題模板、HTML5模板、CSS Menu等實用資源。
特色：
AB模板網(wǎng)專注企業(yè)網(wǎng)站模板制作，包括企業(yè)pbootcms網(wǎng)站模板，靜態(tài)網(wǎng)頁模板，網(wǎng)站源碼下載，HTML網(wǎng)站模板等等。
這個網(wǎng)站專門提供織夢的網(wǎng)頁模板，性質(zhì)和上面一樣，也是上傳到服務(wù)器上。
特點：
織夢貓是一個網(wǎng)站模板分享交流平臺，網(wǎng)站以織夢模板、建站資訊、織夢教程為主要內(nèi)容，以“共享創(chuàng)造價值”為理念，以“尊重原創(chuàng)”為準(zhǔn)則。滿足用戶不同的網(wǎng)站模板需求。
同樣也提供dedecms的網(wǎng)頁模板。
模板安裝方法：
1）進(jìn)入dede后臺，找到“系統(tǒng)”-“數(shù)據(jù)庫備份/還原”
2）在屏幕右上角點擊“數(shù)據(jù)還原”
3）點擊屏幕下方的'開始還原'按鈕
1）點擊“系統(tǒng)”---系統(tǒng)基本參數(shù)
2）將“站點根網(wǎng)址”改為您的網(wǎng)址，如http://www.xxx.com/（本地安裝請保持http://127.0.0.1。）
3）點擊“確定”按鈕
這些網(wǎng)頁模板網(wǎng)站提供了多樣化的選擇，從專業(yè)的商業(yè)網(wǎng)站到個人博客，從免費的模板到付費的高級模板，滿足了不同用戶的需求。無論您是有設(shè)計經(jīng)驗的專業(yè)人士還是初學(xué)者，這些網(wǎng)站都能幫助您快速搭建一個具有吸引力和功能性的網(wǎng)站。
如果你還有更好的方式或工具推薦，記得在評論區(qū)互動討論！
分享6款免費項目管理工具，讓你的工作效率暴增！
想提高工作效率？快來看看這6個辦公神器！
用HTML、CSS和JavaScript構(gòu)建響應(yīng)式企業(yè)官網(wǎng)，web網(wǎng)頁設(shè)計與制作-html+css+js實現(xiàn)企業(yè)官網(wǎng)展示。
頁面效果展示
pc端和移動端
動態(tài)演示
assets文件夾：靜態(tài)資源目錄，主要存放css、fonts、images、js等靜態(tài)資源文件；
favicon.ico文件：網(wǎng)站圖標(biāo)；
index.html文件：首頁html，主要的頁面結(jié)構(gòu)與布局；
適用于期末HTML大作業(yè)、課設(shè)項目、畢設(shè)項目等，更適用于商用，企業(yè)官網(wǎng)展示等。
頁面結(jié)構(gòu)代碼
頁面結(jié)構(gòu)清晰，布局合理，純原生實現(xiàn)響應(yīng)式布局
<!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, 木番薯, 電子商務(wù), 微信商城">
<meta name="description" content="關(guān)于您所想所悟我們知道您一直想付諸實現(xiàn)，木番薯服務(wù)不止于單純的信息服務(wù)，我們將全程與您一同創(chuàng)建打造。
依托于木番薯服務(wù)與技術(shù)團(tuán)隊超過十年的經(jīng)驗積累，我們有能力成為您細(xì)細(xì)專業(yè)領(lǐng)域的左膀右臂。">
<title>木番薯網(wǎng)絡(luò)科技</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>
<!-- 導(dǎo)航欄 -->
<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">電子商務(wù)微信商城</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="weixin-dev">個性化100%開發(fā)</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="procurement-distribution">采購分銷平臺訂制</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="about-us">關(guān)于我們</a>
</li>
<li>
<a href="javascript：void(0);" data-maodian="quick-contact">聯(lián)系我們</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end 導(dǎo)航欄 -->
<!-- banner -->
<div class="jumbotron">
<img class="banner-pic" src="./assets/dist/images/index/banner.jpg" alt="">
<div class="banner-txt">
<h2>有好的想法付諸實現(xiàn)</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 -->
<!-- 關(guān)于 -->
<div class="about-chat" id="about-chat">
<div class="container">
<h3>關(guān)于木番薯</h3>
<p>關(guān)于您所想所悟我們知道您一直想付諸實現(xiàn)，木番薯服務(wù)不止于單純的信息服務(wù)，我們將全程與您一同創(chuàng)建打造。</p>
<p>依托于木番薯服務(wù)與技術(shù)團(tuán)隊超過十年的經(jīng)驗積累，我們有能力成為您細(xì)細(xì)專業(yè)領(lǐng)域的左膀右臂。</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云服務(wù)</h4>
<p>所有簽約客戶均可獲贈</p>
<p>一年期阿里云服務(wù)</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>產(chǎn)品梳理能力</h4>
<p>我們?yōu)榭蛻艚桓陡弑Ｕ嬖?lt;/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>開發(fā)技術(shù)核心</h4>
<p>開發(fā)團(tuán)隊為您挑選</p>
<p>一線資深技術(shù)工程師</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>保質(zhì)保量按時交付</p>
<p>是我們的最低標(biāo)準(zhǔn)</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 關(guān)于 -->
<!-- 基于 -->
<div class="based-on" id="based-on">
<div class="container">
<h3>基于微信平臺的移動電子商務(wù)整合</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="">
豐富電子商務(wù)過往開發(fā)經(jīng)驗
</h4>
<p>從PC端到移動端，從網(wǎng)上一般貿(mào)易到跨境電商，都是我們的主戰(zhàn)場</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="">
從基礎(chǔ)模塊到定制開發(fā)
</h4>
<p>多年積累基礎(chǔ)模塊涵蓋商品、促銷優(yōu)惠、購物車、會員、積分、訂單、支付，同時也仍然保留了較大的空間為您定制</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="">
注重交互設(shè)計客戶體驗
</h4>
<p>好的產(chǎn)品總是從第一面開始，死磕細(xì)節(jié)，我們不會忘記客戶永遠(yuǎn)是第一位的</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>網(wǎng)絡(luò)安全數(shù)據(jù)安全一直是我們努力進(jìn)步完善的方向。布局Linux平臺，啟用SSL，配置安全策略，加密算法可以全部都有</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 基于 -->
<!-- 微信訂制開發(fā) -->
<div class="weixin-dev" id="weixin-dev">
<div class="container">
<h3>微信訂制開發(fā)</h3>
<p>如果目前市面上眾多的標(biāo)準(zhǔn)產(chǎn)品已無法滿足您的需求，</p>
<p>不妨考慮我們的100%真訂制開發(fā)</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>老板說首先應(yīng)當(dāng)談需求而不是談錢，梳理您的需求，為您將需求轉(zhuǎn)換為直觀可靠的原型產(chǎn)品才是正經(jīng)</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-right">02</span>
了解您的應(yīng)用場景
</h4>
<p>在我們看來，系統(tǒng)不是一個鼓勵的個體，而應(yīng)當(dāng)是一個生態(tài)。好的企業(yè)生態(tài)使客戶滿意，使員工滿足</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-right">03</span>
開始量身訂制
</h4>
<p>開發(fā)訂制過程中，我們?nèi)匀粚⒈３峙c客戶進(jìn)行必要的溝通、反饋。已簽約項目將會與匹配一位產(chǎn)品經(jīng)理</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>
適當(dāng)調(diào)整適應(yīng)變化
</h4>
<p>我們知道唯有變化為不變，所以在項目開發(fā)啟動后，我們?nèi)匀唤邮芸蛻暨M(jìn)行適當(dāng)必要的需求變更</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-left">05</span>
邀請客戶參與內(nèi)測
</h4>
<p>當(dāng)項目具備整體測試條件，我們將會邀請客戶一同參與內(nèi)測完善項目產(chǎn)品，以期望達(dá)成完美目標(biāo)</p>
</div>
<div class="f-dev">
<h4>
<span class="i-num at-left">06</span>
交付產(chǎn)品與源代碼
</h4>
<p>除了交付項目產(chǎn)品，我們亦可有償交付項目源代碼，以便于您交付自身開發(fā)團(tuán)隊進(jìn)行維護(hù)、迭代、升級、改造</p>
</div>
</div>
</div>
</div>
</div>
<!-- end 微信訂制開發(fā) -->
<!-- 采購分銷平臺訂制 -->
<div class="procurement-distribution" id="procurement-distribution">
<div class="container">
<h3>采購分銷平臺訂制</h3>
<p>集中一站式采購／多樣化層級分銷／統(tǒng)一管理售后</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>
批量采購導(dǎo)入
</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">公司企業(yè)個人層級劃分</span>
<ul>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
商品設(shè)置可見
</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>
返點月度結(jié)算
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-procurement">
<h4>
統(tǒng)一管理售后
</h4>
<span class="f-btn">對接內(nèi)部ERP打通關(guān)鍵</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>
報表統(tǒng)計分析
</li>
<li>
<span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
權(quán)限賬戶限定
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end 采購分銷平臺訂制 -->
<!-- 快速聯(lián)系我們 -->
<div class="quick-contact" id="quick-contact">
<div class="container">
<h3>快速聯(lián)系我們</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">發(fā)送郵件</a>
</div>
</div>
</div>
</div>
</div>
<!-- end 快速聯(lián)系我們 -->
<!-- 關(guān)于我們 -->
<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>木番薯，您身邊的微信小程序?qū)＜?lt;/p>
<p>聯(lián)系郵箱：mengchatchat@qq.com</p>
<p>公眾號：木番薯科技</p>
<p>木番薯地址：廣東省廣州市海珠區(qū)</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="f-about">
<h4 class="us-txt">
關(guān)于我們
</h4>
<p class="desc-txt">
一群熱愛互聯(lián)網(wǎng)的80后90后，運用我們的專業(yè)為您出謀劃策。在微信運用越來越廣的今天，也希望有我們助您走的更遠(yuǎn)！
</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">
掃描二維碼，關(guān)注我們
</p>
</div>
</div>
</div>
<div class="bottom-desc">
<p>? 2023 木番薯科技 版權(quán)所有 粵ICP備16024352-1</p>
<p>廣州愛范電子商務(wù)有限公司</p>
</div>
</div>
</div>
<!-- end 關(guān)于我們 -->
<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、圖片等資源文件、源碼文件，可.關(guān).~注↓公.Z.號 獲取。
[木番薯科技]
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
