devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用HTML、CSS和JavaScript构建响应式企业官网

作者：你好赵伟 | 2024-02-20 15:47:04

赞

踩

使用HTML、CSS和JavaScript构建响应式企业官网

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

页面效果展示

pc端和移动端

动态演示

文件目录

assets文件夹：静态资源目录，主要存放css、fonts、images、js等静态资源文件；

favicon.ico文件：网站图标；

index.html文件：首页html，主要的页面结构与布局；

适用于期末HTML大作业、课设项目、毕设项目等，更适用于商用，企业官网展示等。

页面结构代码

页面结构清晰，布局合理，纯原生实现响应式布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.   <meta name="keywords" content="ChatChat, Chat, 木番薯, 电子商务, 微信商城">
  8.   <meta name="description" content="关于您所想所悟我们知道您一直想付诸实现，木番薯服务不止于单纯的信息服务，我们将全程与您一同创建打造。
  9. 依托于木番薯服务与技术团队超过十年的经验积累，我们有能力成为您细细专业领域的左膀右臂。">
  10.   <title>木番薯网络科技</title>
  11.   <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  12.   <link rel="stylesheet" href="./assets/dist/css/lib.css">
  13.   <link rel="stylesheet" href="./assets/dist/css/common.css">
  14.   <link rel="stylesheet" href="./assets/dist/css/index.css">
  15. </head>
  16. <body>
  17.  
  18.   <!-- 导航栏 -->
  19.   <div class="header container-fluid" id="pc-header">
  20.     <div class="container">
  21.       <div class="navbar-header">
  22.         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
  23.           <span class="sr-only">Toggle navigation</span>
  24.           <span class="icon-bar"></span>
  25.           <span class="icon-bar"></span>
  26.           <span class="icon-bar"></span>
  27.         </button>
  28.         <a class="fl" href="#" title="ChatChat">
  29.           <img class="logo" src="./assets/dist/images/index/logo.png" alt="">
  30.         </a>
  31.       </div>
  32.  
  33.       <div id="bs-navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
  34.         <ul class="nav navbar-nav navbar-right">
  35.           <li>
  36.             <a href="javascript:void(0);" data-maodian="based-on">电子商务微信商城</a>
  37.           </li>
  38.           <li>
  39.             <a href="javascript:void(0);" data-maodian="weixin-dev">个性化100%开发</a>
  40.           </li>
  41.           <li>
  42.             <a href="javascript:void(0);" data-maodian="procurement-distribution">采购分销平台订制</a>
  43.           </li>
  44.           <li>
  45.             <a href="javascript:void(0);" data-maodian="about-us">关于我们</a>
  46.           </li>
  47.           <li>
  48.             <a href="javascript:void(0);" data-maodian="quick-contact">联系我们</a>
  49.           </li>
  50.         </ul>
  51.       </div>
  52.     </div>
  53.   </div>
  54.   <!-- end 导航栏 -->
  55.  
  56.   <!-- banner -->
  57.   <div class="jumbotron">
  58.     <img class="banner-pic" src="./assets/dist/images/index/banner.jpg" alt="">
  59.     <div class="banner-txt">
  60.       <h2>有好的想法付诸实现</h2>
  61.       <p>交给木番薯科技</p>
  62.       <p><a class="btn btn-primary btn-lg" href="javascript:void(0);" data-maodian="about-chat" role="button">了解更多</a></p>
  63.     </div>
  64.   </div>
  65.   <!-- end banner -->
  66.  
  67.   <!-- 关于 -->
  68.   <div class="about-chat" id="about-chat">
  69.     <div class="container">
  70.       <h3>关于木番薯</h3>
  71.       <p>关于您所想所悟我们知道您一直想付诸实现，木番薯服务不止于单纯的信息服务，我们将全程与您一同创建打造。</p>
  72.       <p>依托于木番薯服务与技术团队超过十年的经验积累，我们有能力成为您细细专业领域的左膀右臂。</p>
  73.  
  74.       <div class="row example-box">
  75.         <div class="col-xs-12 col-sm-6 col-md-3">
  76.           <div class="f-example">
  77.             <div class="i-box">
  78.               <img class="i-img" src="./assets/dist/images/index/icon1.png" alt="">
  79.             </div>
  80.             <h4>赠送ESC云服务</h4>
  81.             <p>所有签约客户均可获赠</p>
  82.             <p>一年期阿里云服务</p>
  83.           </div>
  84.         </div>
  85.         <div class="col-xs-12 col-sm-6 col-md-3">
  86.           <div class="f-example">
  87.             <div class="i-box">
  88.               <img class="i-img" src="./assets/dist/images/index/icon2.png" alt="">
  89.             </div>
  90.             <h4>产品梳理能力</h4>
  91.             <p>我们为客户交付高保真原型</p>
  92.             <p>确保需求梳理到位</p>
  93.           </div>
  94.         </div>
  95.         <div class="col-xs-12 col-sm-6 col-md-3">
  96.           <div class="f-example">
  97.             <div class="i-box">
  98.               <img class="i-img" src="./assets/dist/images/index/icon3.png" alt="">
  99.             </div>
  100.             <h4>开发技术核心</h4>
  101.             <p>开发团队为您挑选</p>
  102.             <p>一线资深技术工程师</p>
  103.           </div>
  104.         </div>
  105.         <div class="col-xs-12 col-sm-6 col-md-3">
  106.           <div class="f-example">
  107.             <div class="i-box">
  108.               <img class="i-img" src="./assets/dist/images/index/icon4.png" alt="">
  109.             </div>
  110.             <h4>承诺按时交付</h4>
  111.             <p>保质保量按时交付</p>
  112.             <p>是我们的最低标准</p>
  113.           </div>
  114.         </div>
  115.       </div>
  116.  
  117.     </div>
  118.   </div>
  119.   <!-- end 关于 -->
  120.  
  121.   <!-- 基于 -->
  122.   <div class="based-on" id="based-on">
  123.     <div class="container">
  124.       <h3>基于微信平台的移动电子商务整合</h3>
  125.  
  126.       <div class="row based-box">
  127.         <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
  128.           <div class="f-based">
  129.             <h4>
  130.               <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
  131.               丰富电子商务过往开发经验
  132.             </h4>
  133.             <p>从PC端到移动端，从网上一般贸易到跨境电商，都是我们的主战场</p>
  134.           </div>
  135.         </div>
  136.         <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
  137.           <div class="f-based">
  138.             <h4>
  139.               <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
  140.               从基础模块到定制开发
  141.             </h4>
  142.             <p>多年积累基础模块涵盖商品、促销优惠、购物车、会员、积分、订单、支付，同时也仍然保留了较大的空间为您定制</p>
  143.           </div>
  144.         </div>
  145.         <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5">
  146.           <div class="f-based">
  147.             <h4>
  148.               <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
  149.               注重交互设计客户体验
  150.             </h4>
  151.             <p>好的产品总是从第一面开始，死磕细节，我们不会忘记客户永远是第一位的</p>
  152.           </div>
  153.         </div>
  154.         <div class="col-xs-11 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1">
  155.           <div class="f-based">
  156.             <h4>
  157.               <img class="i-img" src="./assets/dist/images/index/goux2.png" alt="">
  158.               安全与性能已为您考虑周全
  159.             </h4>
  160.             <p>网络安全数据安全一直是我们努力进步完善的方向。布局Linux平台，启用SSL，配置安全策略，加密算法可以全部都有</p>
  161.           </div>
  162.         </div>
  163.       </div>
  164.  
  165.     </div>
  166.   </div>
  167.   <!-- end 基于 -->
  168.  
  169.   <!-- 微信订制开发 -->
  170.   <div class="weixin-dev" id="weixin-dev">
  171.     <div class="container">
  172.       <h3>微信订制开发</h3>
  173.       <p>如果目前市面上众多的标准产品已无法满足您的需求，</p>
  174.       <p>不妨考虑我们的100%真订制开发</p>
  175.  
  176.       <div class="row dev-box">
  177.         <div class="col-xs-10 col-sm-10 col-md-3">
  178.           <div class="f-dev">
  179.             <h4>
  180.               <span class="i-num at-right">01</span>
  181.               梳理您的需求
  182.             </h4>
  183.             <p>老板说首先应当谈需求而不是谈钱，梳理您的需求，为您将需求转换为直观可靠的原型产品才是正经</p>
  184.           </div>
  185.           <div class="f-dev">
  186.             <h4>
  187.               <span class="i-num at-right">02</span>
  188.               了解您的应用场景
  189.             </h4>
  190.             <p>在我们看来，系统不是一个鼓励的个体，而应当是一个生态。好的企业生态使客户满意，使员工满足</p>
  191.           </div>
  192.           <div class="f-dev">
  193.             <h4>
  194.               <span class="i-num at-right">03</span>
  195.               开始量身订制
  196.             </h4>
  197.             <p>开发订制过程中，我们仍然将保持与客户进行必要的沟通、反馈。已签约项目将会与匹配一位产品经理</p>
  198.           </div>
  199.         </div>
  200.  
  201.         <div class="col-md-4 col-md-offset-1 visible-md visible-lg">
  202.           <img class="phone-img" src="./assets/dist/images/index/phone.png" alt="">
  203.         </div>
  204.  
  205.         <div class="col-xs-10 col-xs-offset-2 col-sm-10 col-sm-offset-2 col-md-3 col-md-offset-1">
  206.           <div class="f-dev">
  207.             <h4>
  208.               <span class="i-num at-left">04</span>
  209.               适当调整适应变化
  210.             </h4>
  211.             <p>我们知道唯有变化为不变，所以在项目开发启动后，我们仍然接受客户进行适当必要的需求变更</p>
  212.           </div>
  213.           <div class="f-dev">
  214.             <h4>
  215.               <span class="i-num at-left">05</span>
  216.               邀请客户参与内测
  217.             </h4>
  218.             <p>当项目具备整体测试条件，我们将会邀请客户一同参与内测完善项目产品，以期望达成完美目标</p>
  219.           </div>
  220.           <div class="f-dev">
  221.             <h4>
  222.               <span class="i-num at-left">06</span>
  223.               交付产品与源代码
  224.             </h4>
  225.             <p>除了交付项目产品，我们亦可有偿交付项目源代码，以便于您交付自身开发团队进行维护、迭代、升级、改造</p>
  226.           </div>
  227.         </div>
  228.  
  229.       </div>
  230.  
  231.     </div>
  232.   </div>
  233.   <!-- end 微信订制开发 -->
  234.  
  235.   <!-- 采购分销平台订制 -->
  236.   <div class="procurement-distribution" id="procurement-distribution">
  237.     <div class="container">
  238.       <h3>采购分销平台订制</h3>
  239.       <p>集中一站式采购／多样化层级分销／统一管理售后</p>
  240.  
  241.       <div class="row procurement-box">
  242.         <div class="col-xs-12 col-sm-12 col-md-4">
  243.           <div class="f-procurement">
  244.             <h4>
  245.               集中一站式采购
  246.             </h4>
  247.             <span class="f-btn">账户邀请审核限定门槛</span>
  248.             <ul>
  249.               <li>
  250.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  251.                 跨类目商品
  252.               </li>
  253.               <li>
  254.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  255.                 多仓库管理
  256.               </li>
  257.               <li>
  258.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  259.                 批量采购导入
  260.               </li>
  261.               <li>
  262.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  263.                 多种支付方式
  264.               </li>
  265.             </ul>
  266.           </div>
  267.         </div>
  268.         <div class="col-xs-12 col-sm-12 col-md-4">
  269.           <div class="f-procurement">
  270.             <h4>
  271.               多样化层级分销
  272.             </h4>
  273.             <span class="f-btn">公司企业个人层级划分</span>
  274.             <ul>
  275.               <li>
  276.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  277.                 商品设置可见
  278.               </li>
  279.               <li>
  280.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  281.                 品牌折扣差异
  282.               </li>
  283.               <li>
  284.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  285.                 引入信用额度
  286.               </li>
  287.               <li>
  288.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  289.                 返点月度结算
  290.               </li>
  291.             </ul>
  292.           </div>
  293.         </div>
  294.         <div class="col-xs-12 col-sm-12 col-md-4">
  295.           <div class="f-procurement">
  296.             <h4>
  297.               统一管理售后
  298.             </h4>
  299.             <span class="f-btn">对接内部ERP打通关键</span>
  300.             <ul>
  301.               <li>
  302.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  303.                 管理后台隔离
  304.               </li>
  305.               <li>
  306.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  307.                 配置OpenAPI
  308.               </li>
  309.               <li>
  310.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  311.                 报表统计分析
  312.               </li>
  313.               <li>
  314.                 <span class="icon-ok" aria-hidden="true"><img src="./assets/dist/images/common/gou.png" alt=""></span>
  315.                 权限账户限定
  316.               </li>
  317.             </ul>
  318.           </div>
  319.         </div>
  320.       </div>
  321.  
  322.     </div>
  323.   </div>
  324.   <!-- end 采购分销平台订制 -->
  325.  
  326.   <!-- 快速联系我们 -->
  327.   <div class="quick-contact" id="quick-contact">
  328.     <div class="container">
  329.       <h3>快速联系我们</h3>
  330.  
  331.       <div class="quick-box">
  332.         <div class="f-quick">
  333.           <img class="i-img" src="./assets/dist/images/index/quick.png" alt="">
  334.  
  335.           <div class="email-box">
  336.             <a href="mailto:mengchatchat@qq.com" class="btn btn-primary btn-lg email-btn">发送邮件</a>
  337.           </div>
  338.         </div>
  339.       </div>
  340.  
  341.     </div>
  342.   </div>
  343.   <!-- end 快速联系我们 -->
  344.  
  345.   <!-- 关于我们 -->
  346.   <div class="about-us" id="about-us">
  347.     <div class="container">
  348.  
  349.       <div class="row about-box">
  350.         <div class="col-xs-12 col-sm-12 col-md-4">
  351.           <div class="f-about">
  352.             <h4>
  353.               木番薯科技
  354.             </h4>
  355.             <p>木番薯，您身边的微信小程序专家</p>
  356.             <p>联系邮箱：mengchatchat@qq.com</p>
  357.             <p>公众号：木番薯科技</p>
  358.             <p>木番薯地址：广东省广州市海珠区</p>
  359.           </div>
  360.         </div>
  361.         <div class="col-xs-12 col-sm-12 col-md-4">
  362.           <div class="f-about">
  363.             <h4 class="us-txt">
  364.               关于我们
  365.             </h4>
  366.             <p class="desc-txt">
  367.               一群热爱互联网的80后90后，运用我们的专业为您出谋划策。在微信运用越来越广的今天，也希望有我们助您走的更远！
  368.             </p>
  369.           </div>
  370.         </div>
  371.         <div class="col-xs-12 col-sm-12 col-md-4">
  372.           <div class="f-about text-center">
  373.             <img class="i-img" src="./assets/dist/images/index/erweima.jpg" alt="">
  374.             <p class="erweima-txt">
  375.               扫描二维码，关注我们
  376.             </p>
  377.           </div>
  378.         </div>
  379.       </div>
  380.  
  381.       <div class="bottom-desc">
  382.         <p>© 2023 木番薯科技 版权所有  粤ICP备16024352-1</p>
  383.         <p>广州爱范电子商务有限公司</p>
  384.       </div>
  385.     </div>
  386.   </div>
  387.   <!-- end 关于我们 -->
  388.  
  389.   <script src="./assets/dist/js/lib.js"></script>
  390.   <script src="./assets/dist/js/common.js"></script>
  391.   <script src="./assets/dist/js/index.js"></script>
  392. </body>
  393. </html>

css实现

js实现

请点赞+收藏哦。至于css、js、图片等资源文件、源码文件，可.关.~注↓公.Z.号 获取。

[木番薯科技]

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/120241?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号