用html跟css做的管理系统首页应用HTMLCSS和JavaScript构建响应式企业官网

页面效果展示

pc端和移动端

动态演示

用html跟css做的管理系统首页应用HTMLCSS和JavaScript构建响应式企业官网 AJAX

文件目录

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>   <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>   <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>   <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>   <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>   <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>   <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>   <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>  <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.号获取。

[木番薯科技]