1.使用bootstrap构建页面
2.使用jQuery来写页面效果

//禁止form 表单自动提交
$('.btn').click(function(){
    let uName = document.querySelector('.uName')
    let uPass = document.querySelector('.uPass')
 // 使用ajax验证数据
    $.ajax({
        url:'/lo',
        type:'post',
        dataType:'json',
        data:{uName:uName.value,uPass:uPass.value},
        success:function(res){
            if(res.code ==1){
                location.href = 'index.html'
            }else{
                alert('用户名或密码错误！')
            }
        }
    })
})

使用Swiper做轮播图

  var mySwiper = new Swiper ('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
          delay: 1000
        },
        effect: 'cube',

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        // },
      })

使用模板字符串渲染二级导航栏

getList()

    function getList() {
      $.ajax({
        url: '../lib/nav_top.json',
        dataType: 'json',
        success: function (res) {
          console.log(res)

          //准备一个空字符串
          let str = ''

          // 渲染一级的 li
          res.forEach(item => {
            str += `<li>${ item.name }</li>`
          })

          // 填充到 nav_top 里面的 ul 里面
          $('.nav_top > ul')
            .html(str)
            .on({
              mouseenter: () => $('.nav_box').stop().slideDown(),
              mouseleave: () => $('.nav_box').stop().slideUp()
            })
            .children('li') // 找到所有的一级菜单下的 li
            .on('mouseover', function () {
              //知道移入的时哪一个 li
              const index = $(this).index()
              // 找到要渲染的数组
              const list = res[index].list
              //数组把 nav_box 位置渲染了就可以了
              let str = ''

              //进行组装
              list.forEach(item => {
                str += `
                  <li>
                    <div>
                      <img src="${ item.list_url }" alt="">
                    </div>
                    <p class="title">${ item.list_name }</p>
                    <span class="price">${ item.list_price }</span>
                  </li>
                `
              })

              //填充到页面里面
              $('.nav_box > ul').html(str)
            })

          // 给 nav_box 添加一个移入移出事件
          $('.nav_box')
            .on({
              mouseover: function () { $(this).finish().show() },
              mouseout: function () { $(this).finish().slideUp() }
            })
        }
      })
    }