- 1.下载网页模板(我只是网页的搬运工，代码是自己写的
- ——不喜勿喷)。
最终效果：
Tomcat—MySQL登录
登录页面
链接：https://pan.baidu.com/s/1_X-2crExl3dyo_zxf0qLQA
提取码：AAAA
主页面
链接：https://pan.baidu.com/s/1csUICPCm32WBNwib6wYGHA
提取码：BBBB
mysql-connector-java.jar驱动jar包
链接：https://pan.baidu.com/s/1NEiQuSz-10zTOHPQZWN0OA
提取码：CCCC
Tomcat 8.5.45
链接：https://pan.baidu.com/s/1tEEpiqQjkW_2vpesDu46xw
提取码：DDDD
- 2.创建自己的数据库
/*
Navicat Premium Data Transfer
Source Server : mysql
Source Server Type : MySQL
Source Server Version : 50554
Source Host : localhost:3306
Source Schema : test
Target Server Type : MySQL
Target Server Version : 50554
File Encoding : 65001
Date: 04/03/2021 18:43:29
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for t_user
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
`username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户名',
`password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户密码',
`telephone` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '联系电话',
`register_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '注册时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of t_user
-- ----------------------------
INSERT INTO `t_user` VALUES (1, '李刚', '123', '15888781123', '2012-05-21 09:26:10');
INSERT INTO `t_user` VALUES (2, '王霞', '123244', '13990901140', '2012-06-08 12:49:27');
INSERT INTO `t_user` VALUES (3, '段誉', '123', '12345678907', '2012-06-08 12:50:23');
INSERT INTO `t_user` VALUES (4, 'admin', 'admin', '13989891123', '2021-02-24 16:09:10');
INSERT INTO `t_user` VALUES (5, '李红', '222222', '15888781123', '2012-06-08 16:53:17');
INSERT INTO `t_user` VALUES (6, 'browser', '11111', '13853452232', '2012-06-11 12:55:46');
INSERT INTO `t_user` VALUES (7, 'operater', '22222', '1234567890', '2012-06-11 12:55:36');
INSERT INTO `t_user` VALUES (8, '王平', '33333', '1234500000', '2012-06-21 12:57:54');
INSERT INTO `t_user` VALUES (9, 'wxy', 'wxy', '54345345', '2021-03-25 11:54:07');
SET FOREIGN_KEY_CHECKS = 1;
- 3.创建JAVA_Web项目,直接点完成
- 4.在WEB-INF里面创建lib文件夹，并把mysql-connection.jar包托进去-添加为库（步骤-右键mysql-connection.jar包-添加到库（add
to the library））
- 5.将下载的模板放入到web文件夹下（登录页和主页一起放进去），注意看有无重名的文件。
6.创建：
do_login.jsp
index.jsp
login.jsp
success.jsp文件
代码如下：
login.jsp------------------修改你自己的数据库名、账户、密码
<%@ page import="java.sql.*" %>
<%@ page import="java.net.URLEncoder" %>
<%
// 设置请求对象字符编码
request.setCharacterEncoding("utf-8");
// 获取表单提交的数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 设置连接数据库的参数值
final String DRIVER = "com.mysql.jdbc.Driver";
final String URL = "jdbc:mysql://localhost:3306/test";
final String USER = "root";
final String PASSWORD = "root";
try {
// 安装数据库驱动程序
Class.forName(DRIVER);
// 获取数据库连接
Connection conn = DriverManager.getConnection(URL + "?useUnicode=true&characterEncoding=utf8", USER, PASSWORD);
// 定义SQL字符串
String strSQL = "select * from t_user where username = ? and password = ?";
// 创建预备语句对象
PreparedStatement pstmt = conn.prepareStatement(strSQL);
// 设置占位符的值
pstmt.setString(1, username);
pstmt.setString(2, password);
// 执行SQL查询，返回结果集
ResultSet rs = pstmt.executeQuery();
// 判断结果集是否有记录
if (rs.next()) {
// 清除session里可能存在的属性值
if (session.getAttribute("errMsg") != null) {
session.removeAttribute("errMsg");
}
// 采用重定向，跳转到登录成功页面
response.sendRedirect("success.jsp?username=" + URLEncoder.encode(username, "utf-8"));
} else {
// 设置session属性值
session.setAttribute("errMsg", "用户名或密码错误，请重新登录");
// 采用重定向，跳转到登录页面
response.sendRedirect("login.jsp");
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
%>
index.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/3/4
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 24 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 24 })
});
});
</script>
<div class="main">
<div class="header">
<div class="header-center fl">
<div class="header-title">
登录界面
</div>
<div class="header-img"></div>
</div>
<div class="header-bottom fl"></div>
</div>
<div class="content">
<div class="content-left">
<!--<img src="images/d.png" alt="">-->
</div>
<div class="content-right">
<div class="right-infp">
<form action="do_login.jsp" method="post">
<div class="right-infp-name">
<input type="text" name="username" placeholder="请输入用户名" maxlength="12" required="" value="" autocomplete="off">
</div>
<div class="right-infp-name">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off">
</div>
<div class="right-infp-btn">
<input class="btn" type="submit" value="登录"/>
</div>
</form>
</div>
</div>
</div>
</div>
<%
String errMsg = (String) session.getAttribute("errMsg");
if (errMsg != null) {
out.println("<p style='text-align: center; color: red'>" + new String(errMsg.getBytes("ISO-8859-1"), "utf-8") + "</p>");
}
%>
</body>
</html>
success.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/3/4
Time: 17:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper制作小米官网幻灯片/轮播图演示</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/stylee.css">
</head>
<body>
<h1 style="margin: 50px 0; text-align: center;">Swiper制作小米官网幻灯片/轮播图演示</h1>
<div class="dwo-wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:">
<img src="images/01.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:">
<img src="images/02.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:">
<img src="images/03.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:">
<img src="images/04.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:">
<img src="images/05.jpg" alt="">
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="nav-wrapper">
<ul class="nav">
<li class="nav-item">
<a class="nav-item-link" href="javascript:">手机 电话卡</a>
<div class="children children-col-4" style="display: block1;">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img1.png" alt="">
<span>Redmi 9</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img2.jpg" alt="">
<span>Redmi 10X 4G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img3.jpg" alt="">
<span>Redmi 10X 5G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img4.png" alt="">
<span>小米10 青春版</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img5.jpg" alt="">
<span>Redmi K30 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img6.jpg" alt="">
<span>Redmi K30 Pro 变焦版</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img7.png" alt="">
<span>腾讯黑鲨游戏手机3</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img8.png" alt="">
<span>腾讯黑鲨游戏手机3 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img9.png" alt="">
<span>小米10 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img10.png" alt="">
<span>小米10</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img11.jpg" alt="">
<span>Redmi K30 4G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img12.jpg" alt="">
<span>Redmi K30 5G</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img13.png" alt="">
<span>Redmi 8A</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img14.png" alt="">
<span>Redmi 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img15.png" alt="">
<span>小米MIX Alpha</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img16.png" alt="">
<span>Redmi Note 8 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img17.png" alt="">
<span>Redmi Note 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img18.jpg" alt="">
<span>Redmi 7A</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img19.jpg" alt="">
<span>移动4G+专区</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img20.jpg" alt="">
<span>小米移动 电话卡</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img21.png" alt="">
<span>手机上门维修</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img22.jpg" alt="">
<span>云服务空间月卡</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img23.jpg" alt="">
<span>中国电信</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">电视 盒子</a>
<div class="children children-col-4">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img24.png" alt="">
<span>小米电视 大师 65英寸OLED</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img25.png" alt="">
<span>Redmi 智能电视 X65</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img25.png" alt="">
<span>Redmi 智能电视 X55</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img26.jpg" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img27.png" alt="">
<span>小米电视5 55英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img28.png" alt="">
<span>小米电视5 65英寸</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img29.png" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img30.png" alt="">
<span>小米电视5 Pro 55英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img31.png" alt="">
<span>小米电视5 Pro 65英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img32.png" alt="">
<span>小米电视5 Pro 75英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img33.jpg" alt="">
<span>Redmi 红米电视 70英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img34.jpg" alt="">
<span>全面屏电视Pro 65英寸</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img35.jpg" alt="">
<span>全面屏电视Pro 55英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img36.jpg" alt="">
<span>小米壁画电视 65英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img37.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img38.png" alt="">
<span>小米电视4A 32英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img39.png" alt="">
<span>小米电视4A 50英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img40.png" alt="">
<span>小米电视4A 55英寸</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img41.png" alt="">
<span>小米电视4A 58英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img42.png" alt="">
<span>小米电视4A 65英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img43.png" alt="">
<span>小米电视4C 32英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img44.jpg" alt="">
<span>小米电视4C 40英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img45.png" alt="">
<span>小米电视4C 43英寸</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img46.png" alt="">
<span>小米电视4C 50英寸</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">笔记本 显示器</a>
<div class="children children-col-2">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img47.jpg" alt="">
<span>RedmiBook 13</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img48.png" alt="">
<span>小米笔记本 15.6"</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img49.png" alt="">
<span>小米笔记本 13.3"</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img50.jpg" alt="">
<span>小米笔记本 12.5"</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img51.png" alt="">
<span>RedmiBook 14</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img52.jpg" alt="">
<span>小米游戏本</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img53.png" alt="">
<span>显示器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img54.png" alt="">
<span>键鼠套装</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img55.png" alt="">
<span>鼠标</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img56.png" alt="">
<span>转接器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img57.jpg" alt="">
<span>平板配件</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">家电 插线板</a>
<div class="children children-col-4">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img58.jpg" alt="">
<span>冰箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img59.png" alt="">
<span>立式空调</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img60.png" alt="">
<span>壁挂空调</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img61.png" alt="">
<span>滚筒洗衣机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img62.jpg" alt="">
<span>Redmi全自动波轮洗衣机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img63.jpg" alt="">
<span>净水器</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img64.jpg" alt="">
<span>微波炉</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img65.jpg" alt="">
<span>电烤箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img66.jpg" alt="">
<span>扫地机器人</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img67.jpg" alt="">
<span>吸尘器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img68.jpg" alt="">
<span>空气净化器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img69.jpg" alt="">
<span>电饭煲</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img70.jpg" alt="">
<span>电磁炉</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img71.jpg" alt="">
<span>电水壶</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img72.jpg" alt="">
<span>滤水壶</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img73.png" alt="">
<span>落地风扇</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img74.png" alt="">
<span>投影仪</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img75.jpg" alt="">
<span>灯具</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img76.jpg" alt="">
<span>插线板</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img77.jpg" alt="">
<span>新风机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img78.jpg" alt="">
<span>电暖器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img79.jpg" alt="">
<span>电压力锅</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img80.jpg" alt="">
<span>料理机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img81.jpg" alt="">
<span>电煮壶</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">出行 穿戴</a>
<div class="children children-col-3">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img82.png" alt="">
<span>手环5NFC</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img83.png" alt="">
<span>手环5</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img84.png" alt="">
<span>小米手表</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img85.png" alt="">
<span>手环手表</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img86.jpg" alt="">
<span>VR</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img87.jpg" alt="">
<span>平衡车</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img88.jpg" alt="">
<span>滑板车</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img89.png" alt="">
<span>自行车</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img90.jpg" alt="">
<span>车载充电器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img91.jpg" alt="">
<span>平衡车配件</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img92.jpg" alt="">
<span>智能后视镜</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img93.jpg" alt="">
<span>智能记录仪</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img94.jpg" alt="">
<span>无线车充</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img95.jpg" alt="">
<span>充气宝</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img96.jpg" alt="">
<span>石英表</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">智能 路由器</a>
<div class="children children-col-3">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img97.jpg" alt="">
<span>打印机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img98.png" alt="">
<span>喷墨打印机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img99.png" alt="">
<span>喷墨打印机墨水</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img100.png" alt="">
<span>小米路由器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img101.jpg" alt="">
<span>智能家庭</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img102.jpg" alt="">
<span>对讲机</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img103.jpg" alt="">
<span>摄像机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img104.jpg" alt="">
<span>照相机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img105.jpg" alt="">
<span>智能门锁</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img106.jpg" alt="">
<span>视频门铃</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img107.png" alt="">
<span>小爱老师</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img108.png" alt="">
<span>Redmi路由器</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img109.jpg" alt="">
<span>小爱音箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img110.png" alt="">
<span>云服务空间年卡</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img110.png" alt="">
<span>云服务空间月卡</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">电源 配件</a>
<div class="children children-col-2">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img111.png" alt="">
<span>移动电源</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img112.jpg" alt="">
<span>数据线</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img113.jpg" alt="">
<span>车充</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img114.png" alt="">
<span>充电器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img115.jpg" alt="">
<span>电池</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img116.jpg" alt="">
<span>自拍杆</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img117.jpg" alt="">
<span>手机壳</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img118.jpg" alt="">
<span>手机贴膜</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img119.png" alt="">
<span>无线充电器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img120.jpg" alt="">
<span>平板配件</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img121.jpg" alt="">
<span>黑鲨配件</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img122.jpg" alt="">
<span>其他配件</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">健康 儿童</a>
<div class="children children-col-3">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img123.jpg" alt="">
<span>洗手机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img124.jpg" alt="">
<span>修剪器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img125.jpg" alt="">
<span>剃须刀</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img126.jpg" alt="">
<span>牙刷</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img127.jpg" alt="">
<span>吹风机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img128.png" alt="">
<span>体重秤</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img129.jpg" alt="">
<span>体脂秤</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img130.jpg" alt="">
<span>早教启智</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img131.jpg" alt="">
<span>遥控电动</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img132.jpg" alt="">
<span>益智积木</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img133.jpg" alt="">
<span>儿童手表</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img134.jpg" alt="">
<span>儿童滑板车</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img135.jpg" alt="">
<span>婴儿推车</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img136.jpg" alt="">
<span>儿童书包</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img137.jpg" alt="">
<span>婴儿理发器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img138.png" alt="">
<span>健身车</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img139.jpg" alt="">
<span>走步机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img140.jpg" alt="">
<span>点读笔</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">耳机 音响</a>
<div class="children children-col-3">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img141.png" alt="">
<span>小爱音箱 Art</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img142.png" alt="">
<span>小爱触屏音箱Pro 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img143.png" alt="">
<span>Redmi小爱触屏音箱 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img144.png" alt="">
<span>小米小爱音箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img145.png" alt="">
<span>音箱 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img146.jpg" alt="">
<span>小米小爱触屏音箱</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img147.png" alt="">
<span>Redmi音箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img148.jpg" alt="">
<span>小米小爱音箱 Play</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img149.jpg" alt="">
<span>线控耳机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img150.jpg" alt="">
<span>蓝牙耳机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img151.jpg" alt="">
<span>头戴耳机</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img152.jpg" alt="">
<span>品牌耳机</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img153.png" alt="">
<span>蓝牙音箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img154.jpg" alt="">
<span>小米AI音箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img155.jpg" alt="">
<span>小米小爱音箱HD</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img156.jpg" alt="">
<span>k歌耳机</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">生活 箱包</a>
<div class="children children-col-3">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img157.jpg" alt="">
<span>小背包</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img158.jpg" alt="">
<span>双肩包</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img159.jpg" alt="">
<span>胸包</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img160.jpg" alt="">
<span>旅行箱</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img161.jpg" alt="">
<span>运动鞋</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img162.jpg" alt="">
<span>眼镜</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img163.jpg" alt="">
<span>床垫</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img164.png" alt="">
<span>枕头</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img165.jpg" alt="">
<span>饰品</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img166.jpg" alt="">
<span>螺丝刀</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img167.jpg" alt="">
<span>保温杯</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img168.jpg" alt="">
<span>伞</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="images/img169.jpg" alt="">
<span>驱蚊器</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img170.jpg" alt="">
<span>毛巾/浴巾</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img171.png" alt="">
<span>米兔</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="images/img172.jpg" alt="">
<span>笔</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script src="js/swiper.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
最后：配置Tomcat：http://localhost:9999/index.jsp
大功告成
6516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
