利用Bootstrap、jQuery、Html、CSS等设计蛋糕商城注册页面

1.引入jquery-3.6.0.min.js        bootstrap.min.js    bootstrap.min.css 资源

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-3.6.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

2.通过css.js来修改bootstrap导航样式与鼠标滑动效果

 <style>
       .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
            color: white;
            background-color: #f07818;
        }
        .navbar-default {
            background-color: #5d4b33;
        }
        .navbar-default .navbar-nav>li>a {
            color: white;
        }
        .form-control{
          width: 500px;
          margin-bottom: 10px;
        }
        .navbar-nav li {
          border-left: 0.3px solid white;
          border-right: 0.3px solid white;
        }

        .navbar-nav li:last-child {
          border-right: none;
        } 
    </style>



<script>
        $("ul > li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active")
        })
</script>

3.注册界面设计代码：

  <div  id="register" style=" margin-top: 30px;margin-left: 30%; display:none;">
          <h2 style="margin-left: 160px;margin-top: 50px;margin-bottom: 100px; color: #f07818;"><b>注册新用户</b></h2>
          <label for="inp" class="redStar"><b>用户名</b><span style="color: red;">*</span></label>
          <input type="text" class="form-control" placeholder="请输入用户名">
          <label for="inp" class="redStar"><b>邮箱</b><span style="color: red;">*</span></label>
          <input type="email" class="form-control" placeholder="请输入邮箱">
          <label for="inp" class="redStar"><b>密码</b><span style="color: red;">*</span></label>
          <input type="password" class="form-control" placeholder="请输入密码">
          <label for="inp" ><b>收货人</b></label>
          <input type="text" class="form-control" placeholder="请输入收货名">
          <label for="inp" ><b>收货电话</b></label>
          <input type="text" class="form-control" placeholder="请输入收货电话">
          <label for="inp" ><b>收货地址</b></label>
          <input type="text" class="form-control" placeholder="请输入收货地址">
          <input style="width: 80px;margin-left:190px;border-radius: 5px;margin-top: 50px;font-size: 20px;color: white;background-color: #f07818;" class="btn-default" type="submit" value="提交">
          <div style="width: 115%;margin-left: 100px;font-size: 15px; margin-top: 100px;"><footer><b>xxx &copy; All rights Reseverd</b></footer></div>
        </div>
      </form>

4.点击导航栏的注册链接，则呈现注册界面，点击其它的链接则跳转相应的界面代码：

<script>
     function showInfo(event) {
          event.preventDefault();
          var target = event.target.getAttribute("data-target");
          var divs = document.querySelectorAll("div[id]");
          for (var i = 0; i < divs.length; i++) {
            var div = divs[i];
            if (div.id === target) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          }
        }
    </script>

5.运行效果：