整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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的网页模板。

模板安装方法：

  1. 下载最新的织梦dedecms5.7 UTF8版本。
  2. 解压下载的织梦安装包，得到docs和uploads两个文件夹，将uploads里面的所有文件和文件夹上传到你的网站根目录
  3. 安装dede系统。(如果您已经安装,请跳过本步.)直接运行：http://您的域名/install
  4. 将web文件夹内的所有文件夹上传并覆盖到织梦的安装目录;
  5. 登陆后台并还原数据库：

1）进入dede后台，找到“系统”-“数据库备份/还原”

2）在屏幕右上角点击“数据还原”

3）点击屏幕下方的'开始还原'按钮

  1. 确定网站风格（无论是否修改，都点击一下确定）：

1）点击“系统”---系统基本参数

2）将“站点根网址”改为您的网址，如http://www.xxx.com/（本地安装请保持http://127.0.0.1。）

3）点击“确定”按钮

  1. 更新整站缓存： 点击“生成”-“更新系统缓存”
  2. 更新网站： 点击“生成”-“一键更新网站”-“更新所有”-“开始更新” 点击“生成”-“更新主页html” 至此，模板安装结束

这些网页模板网站提供了多样化的选择，从专业的商业网站到个人博客，从免费的模板到付费的高级模板，满足了不同用户的需求。无论您是有设计经验的专业人士还是初学者，这些网站都能帮助您快速搭建一个具有吸引力和功能性的网站。

如果你还有更好的方式或工具推荐，记得在评论区互动讨论！

更多工具推荐

分享6款免费项目管理工具，让你的工作效率暴增！

想提高工作效率？快来看看这6个办公神器！

用HTML、CSS和JavaScript构建响应式企业官网，web网页设计与制作-html+css+js实现企业官网展示。

页面效果展示

pc端和移动端


动态演示


文件目录

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小时内与您取得联系。

推荐阅读
友情链接 富宁县 万秀区 河津 安吉县 南溪县 江门 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服