web ，商城主页，增加

最新推荐文章于 2022-12-19 09:45:44 发布

赤诚&

最新推荐文章于 2022-12-19 09:45:44 发布

阅读量190

点赞数 3

本文链接：https://blog.csdn.net/weixin_67150631/article/details/124593099

版权

哈喽，今天给大家带来了这个商城的主页，还有一个增加商品的界面，让我们一起来看吧

一，商城主页的搭建

在这里的主页搭建使用的框架是bootstrap框架，需要去下载bootstrap的api插件，还有，使用了jQuery5，以及jstl的jar包等等。
在这里只有界面带码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">  
    <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
    <style>
        .carousel-item img{
   
            height: 350px;
        }
    </style>
</head>
<body>
<jsp:include page="component/top.jsp">
    <jsp:param name="type" value="index"/>
</jsp:include>
<%--容器--%>
<div class="container">
    <%--轮播图--%>
    <div id="myCarousel" class="carousel slide mb-3" data-bs-ride="carousel" data-bs-interval="2500">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/p1.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>华美商城</h5>
                    <p>带您进入购物的天堂，只有你想不到，没有你买不到</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/p2.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>华美商城</h5>
                    <p>带您进入购物的天堂，只有你想不到，没有你买不到</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/p3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                   <h5>华美商城</h5>
                    <p>带您进入购物的天堂，只有你想不到，没有你买不到</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs