大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（车之家）完整教程：从入门到实战部署

上个月帮同事解决了一个相关问题，发现这个知识点很多人都不太清楚，特此整理成文章分享。

HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

• 文章目录
• 一、 网站题目
• 二、 网站描述
• 三、 网站介绍
• 四、 网站效果
• 五、️ 网站代码
• 六、️‍ 如何学习进步
• 七、‍☠️ 更多干货

文章目录

一、 网站题目

购物商城 车之家 精美设计 适配移动端 35页 含登录注册

二、 网站描述

总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、 网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

最佳实践：

经过多个项目的验证，我总结了几个关键点：1) 做好异常处理 2) 添加详细日志 3) 单元测试覆盖核心逻辑。 这些看似简单，但能避免很多生产环境问题。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1） html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等。

四、 网站效果

五、️ 网站代码

<!DOCTYPE html>
  <html class="no-js" lang="zxx">
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Gallery :: Lukas - Car Parts Store eCommerce HTML Template</title>
              <!--== Favicon ==-->
                <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
                  <!--== Google Fonts ==-->
                    <link
                    href="https://fonts.googleapis.com/css?family=Oswald:400,500,600,700%7CPoppins:400,400i,500,600&display=swap"
                    rel="stylesheet">
                    <!-- build:css assets/css/app.min.css -->
                      <!--== Leaflet Min CSS ==-->
                        <link href="assets/css/leaflet.min.css" rel="stylesheet" />
                          <!--== Nice Select Min CSS ==-->
                            <link href="assets/css/nice-select.min.css" rel="stylesheet" />
                              <!--== Slick Slider Min CSS ==-->
                                <link href="assets/css/slick.min.css" rel="stylesheet" />
                                  <!--== Magnific Popup Min CSS ==-->
                                    <link href="assets/css/magnific-popup.min.css" rel="stylesheet" />
                                      <!--== Slicknav Min CSS ==-->
                                        <link href="assets/css/slicknav.min.css" rel="stylesheet" />
                                          <!--== Animate Min CSS ==-->
                                            <link href="assets/css/animate.min.css" rel="stylesheet" />
                                              <!--== Ionicons Min CSS ==-->
                                                <link href="assets/css/ionicons.min.css" rel="stylesheet" />
                                                  <!--== Font-Awesome Min CSS ==-->
                                                    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
                                                      <!--== Bootstrap Min CSS ==-->
                                                        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
                                                          <!--== Main Style CSS ==-->
                                                            <link href="assets/css/style.css" rel="stylesheet" />
                                                              <!--== Helper Min CSS ==-->
                                                                <link href="assets/css/helper.min.css" rel="stylesheet" />
                                                                  <!-- endbuild -->
                                                                    <!--[if lt IE 9]>
                                                                      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                                                                        <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                                                                          <![endif]-->
                                                                            </head>
                                                                              <style type="text/css">
                                                                                .header-area {
                                                                                padding: 10px 0;
                                                                                font-size: 30px;
                                                                                }
                                                                                .header-area .nav li a {
                                                                                font-size: 18px;
                                                                                }
                                                                                .site-action .login-reg-nav li:after {
                                                                                content: '';
                                                                                }
                                                                                .sm-top {
                                                                                margin-top: 36px;
                                                                                }
                                                                                </style>
                                                                                  <body>
                                                                                    <!--== Start Header Area ==-->
                                                                                      <header class="header-area">
                                                                                        <div class="container container-wide">
                                                                                          <div class="row align-items-center">
                                                                                            <div class="col-sm-4 col-lg-2">
                                                                                              <div class="site-logo text-center text-sm-left">
                                                                                                <a href="index.html"><img src="assets/img/logo.png" alt="Logo" /></a>
                                                                                                  </div>
                                                                                                    </div>
                                                                                                      <div class="col-lg-7 d-none d-lg-block">
                                                                                                        <div class="site-navigation">
                                                                                                          <ul class="main-menu nav">
                                                                                                            <li class="has-submenu"><a href="index.html">主页</a>
                                                                                                              <ul class="sub-menu">
                                                                                                                <li><a href="index.html">购物中心</a></li>
                                                                                                                  <li><a href="index-2.html">我的首页</a></li>
                                                                                                                    </ul>
                                                                                                                      </li>
                                                                                                                        <li class="has-submenu"><a href="shop.html">商店</a>
                                                                                                                          <ul class="sub-menu">
                                                                                                                            <li><a href="shop-left-sidebar.html">商品列表</a></li>
                                                                                                                              <li><a href="shop-right-sidebar.html">商品详情</a></li>
                                                                                                                                <li><a href="single-product.html">商品展示</a></li>
                                                                                                                                  </ul>
                                                                                                                                    </li>
                                                                                                                                      <li class="has-submenu"><a href="blog.html">博客</a>
                                                                                                                                        <ul class="sub-menu">
                                                                                                                                          <li><a href="blog-left-sidebar.html">博客左侧</a></li>
                                                                                                                                            <li><a href="blog.html">博客右侧</a></li>
                                                                                                                                              <li><a href="blog-details.html">单一博客</a></li>
                                                                                                                                                </ul>
                                                                                                                                                  </li>
                                                                                                                                                    <li class="has-submenu"><a href="gallery.html">展示</a>
                                                                                                                                                      <ul class="sub-menu">
                                                                                                                                                        <li><a href="gallery.html">商品展示</a></li>
                                                                                                                                                          <li><a href="saichezhanshi.html">赛车展示</a></li>
                                                                                                                                                            </ul>
                                                                                                                                                              </li>
                                                                                                                                                                <li><a href="contact.html">联系</a></li>
                                                                                                                                                                  <li><a href="about2.html">关于</a></li>
                                                                                                                                                                    </ul>
                                                                                                                                                                      </div>
                                                                                                                                                                        </div>
                                                                                                                                                                          <div class="col-sm-8 col-lg-3">
                                                                                                                                                                            <div
                                                                                                                                                                            class="site-action d-flex justify-content-center justify-content-sm-end align-items-center">
                                                                                                                                                                            <ul class="login-reg-nav nav">
                                                                                                                                                                              <li><a href="login.html">登录</a></li>
                                                                                                                                                                                <li><a href="reg.html">注册</a></li>
                                                                                                                                                                                  </ul>
                                                                                                                                                                                    <div class="mini-cart-wrap">
                                                                                                                                                                                      <a href="cart.html" class="btn-mini-cart">
                                                                                                                                                                                        <i class="ion-bag"></i>
                                                                                                                                                                                          </a>
                                                                                                                                                                                            </div>
                                                                                                                                                                                              <div class="responsive-menu d-lg-none">
                                                                                                                                                                                                <button class="btn-menu">
                                                                                                                                                                                                  <i class="fa fa-bars"></i>
                                                                                                                                                                                                    </button>
                                                                                                                                                                                                      </div>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                          </div>
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                </header>
                                                                                                                                                                                                                  <!--== End Header Area ==-->
                                                                                                                                                                                                                    <!--== Start Page Header Area ==-->
                                                                                                                                                                                                                      <div class="page-header-wrap bg-img" data-bg="assets/img/bg/page-header-bg.jpg">
                                                                                                                                                                                                                        <div class="container">
                                                                                                                                                                                                                          <div class="row">
                                                                                                                                                                                                                            <div class="col-12 text-center">
                                                                                                                                                                                                                              <div class="page-header-content">
                                                                                                                                                                                                                                <div class="page-header-content-inner">
                                                                                                                                                                                                                                  <h1>展示</h1>
                                                                                                                                                                                                                                    <ul class="breadcrumb">
                                                                                                                                                                                                                                      <li><a href="index.html">主页</a></li>
                                                                                                                                                                                                                                        <li class="current"><a href="#">展示</a></li>
                                                                                                                                                                                                                                          </ul>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                        <!--== End Page Header Area ==-->
                                                                                                                                                                                                                                                          <!--== Start Page Content Wrapper ==-->
                                                                                                                                                                                                                                                            <div class="page-content-wrapper sp-y">
                                                                                                                                                                                                                                                              <div class="gallery-page-content">
                                                                                                                                                                                                                                                                <div class="container container-wide">
                                                                                                                                                                                                                                                                  <div class="row mtn-30 image-gallery">
                                                                                                                                                                                                                                                                    <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                      <img src="assets/img/saichezhanshi/1.png" />
                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                          <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                            <img src="assets/img/saichezhanshi/2.png" />
                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                  <img src="assets/img/saichezhanshi/3.png" />
                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                      <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                        <img src="assets/img/saichezhanshi/4.png" />
                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                            <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                              <img src="assets/img/saichezhanshi/5.png" />
                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                  <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                    <img src="assets/img/saichezhanshi/6.png" />
                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                        <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                          <img src="assets/img/saichezhanshi/7.png" />
                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                              <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                <img src="assets/img/saichezhanshi/8.png" />
                                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                                    <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                      <img src="assets/img/saichezhanshi/9.png" />
                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                          <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                            <img src="assets/img/saichezhanshi/10.png" />
                                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                                                <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                  <img src="assets/img/saichezhanshi/11.png" />
                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                      <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                        <img src="assets/img/saichezhanshi/12.png" />
                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                            <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                              <img src="assets/img/saichezhanshi/13.png" />
                                                                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                                                                  <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                                    <img src="assets/img/saichezhanshi/14.png" />
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                        <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                                          <img src="assets/img/saichezhanshi/15.png" />
                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                              <div class="col-sm-6 col-lg-6" style="margin-bottom: 10px;">
                                                                                                                                                                                                                                                                                                                                                                <img src="assets/img/saichezhanshi/16.png" />
                                                                                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                            <aside class="off-canvas-wrapper off-canvas-menu">
                                                                                                                                                                                                                                                                                                                                                                              <div class="off-canvas-overlay"></div>
                                                                                                                                                                                                                                                                                                                                                                                <div class="off-canvas-inner">
                                                                                                                                                                                                                                                                                                                                                                                  <!-- Start Off Canvas Content -->
                                                                                                                                                                                                                                                                                                                                                                                    <div class="off-canvas-content">
                                                                                                                                                                                                                                                                                                                                                                                      <div class="off-canvas-header">
                                                                                                                                                                                                                                                                                                                                                                                        <div class="logo">
                                                                                                                                                                                                                                                                                                                                                                                          <a href="index.html"><img src="assets/img/logo.png" alt="Logo"></a>
                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                              <div class="close-btn">
                                                                                                                                                                                                                                                                                                                                                                                                <button class="btn-close"><i class="ion-android-close"></i></button>
                                                                                                                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                                                                                      <!-- Content Auto Generate Form Main Menu Here -->
                                                                                                                                                                                                                                                                                                                                                                                                        <div class="res-mobile-menu mobile-menu">
                                                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                                                                                                                                </aside>
                                                                                                                                                                                                                                                                                                                                                                                                                  <!--== End Responsive Menu Wrapper ==-->
                                                                                                                                                                                                                                                                                                                                                                                                                    <!--=======================Javascript============================-->
                                                                                                                                                                                                                                                                                                                                                                                                                      <!-- build:js assets/js/app.min.js -->
                                                                                                                                                                                                                                                                                                                                                                                                                        <!--=== Modernizr Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                          <script src="assets/js/modernizr-3.6.0.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                            <!--=== jQuery Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                              <script src="assets/js/jquery-3.3.1.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                <!--=== jQuery Migration Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                  <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                    <!--=== Popper Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                      <script src="assets/js/popper.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                        <!--=== Bootstrap Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                          <script src="assets/js/bootstrap.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                            <!--=== Slicknav Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                              <script src="assets/js/jquery.slicknav.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                <!--=== Magnific Popup Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                  <script src="assets/js/jquery.magnific-popup.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                    <!--=== Slick Slider Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                      <script src="assets/js/slick.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                        <!--=== Nice Select Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                          <script src="assets/js/jquery.nice-select.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <!--=== Leaflet Min Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                              <script src="assets/js/leaflet.min.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                <!--=== Countdown Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <script src="assets/js/countdown.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <!--=== Active Js ===-->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <script src="assets/js/active.js"></script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <!-- endbuild -->
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </html>

六、️‍ 如何学习进步

1. 看书、看博客、学课程或者看视频等
2. 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
3. 思考学习别人思路后，脱离书本和博客，完全自己实现功能
4. 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
5. 在别人的框架和要求下，写代码实现业务
6. 自己负责别人设计的模块的实现
7. 独立设计业务模块并开发实现
8. 负责大项目框架设计和拆分，带领别人进行开发
9. 其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、‍☠️ 更多干货

关注我 学习更多知识~

支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~

有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

更多主题网页设计模板