2019年 12月4 日
今天完成了课程的小小答辩，我展示的是一个以图书商城为主题的Javaweb项目，可以实现用户的登陆注册。其实我本人还是比较喜欢前端的。
一、概述
在本次期末项目设计中，我选择了以图书商城为主题的Web项目。
主要运用JSP+Servlet+JDBC技术
首先是在Hbuilderx中运用html和css搭建好登陆、注册、图书商城的主页。
主要实现了用户能够登陆注册的功能，以及浏览图书的功能。
二、需求分析
在移动手机快速的发展时代，实体的书籍离我们的生活可能越来越远，一是因为实体的书籍在生活中携带不方便，二是因为实体的书籍可以在网上看盗版的之类。所以一些手机app或者网页上用于下载图书的软件、网站也越来越多。所以，这个图书商城可以满足用户对于浏览图书的需求。
三、项目设计
3.1数据库设计
（1）数据项:用户名 密码
（2) 在数据库中创建user表，用于记录用户名和密码。
3.2 数据库连接
（1）在src下创建Util包，建立DBHelper类专门负责数据库的连接
（2）在这个项目设计中，登录与注册需要反复使用数据库进行查询与插入，所
以使用单例模式，只返回一个实例。
以这里的DBHelper类中使用了单例模式，确保数据库类中只有一个实例。
//此类被用于连接数据库
public class DBHelper {// 用于连接数据库 给其他类调用
public static String driver = "com.mysql.jdbc.Driver";
public static String url = "jdbc:mysql://localhost:3306/user";
public static String username = "root";
public static String password = "root";
public static Connection con = null;
// 进行驱动加载 开始连接用的类方法 方便其他直接调用
public static Connection getConnection() {
// 加载驱动
try {
Class.forName(driver);
System.out.println("驱动成功");
} catch (Exception e) {
e.printStackTrace();
System.out.println("驱动加载异常");
}
// 加载驱动完成
if (con == null) {
try {
con = DriverManager.getConnection(url, username, password);
System.out.println("连接成功");
} catch (Exception e) {
e.printStackTrace();
}
}
return con;
}
// 连接建立完成
}
3.3 功能介绍
3.4 登陆设计
（1）简述
用户输入账号密码，如果用户名不存在或密码错误，则提示错误。
（2）详细设计
在jsp中输入账号密码后，将表单数据提交到LoginServlet中，LoginServlet调用dao中的checkLogin方法将usernmae以及password通过数据库查询进行判断是否正确。
LoginServlet类的代码：
package myservlet;
import dao.DAO;
//要引入DAO，使用DAO中的方法。因为其中的方法是static，直接调用。
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/json;charset=UTF-8");//设置编码格式
response.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");//从form中获取username
String password=request.getParameter("password");//获取password
if(DAO.checkLogin(username, password))//调用DAO 检查登录 如果结果正确
request.getRequestDispatcher("/jsp/demon.jsp").forward(request, response);//请求转发，到主页
else {
request.setAttribute("inf", "error");//将失败的消息存到 inf中
request.getRequestDispatcher("/jsp/login.jsp").forward(request, response);
调用的DAO中的checkLogin代码:
public static boolean checkLogin(String username, String password) {
con = DBHelper.getConnection();// 利用DBHelper类中的类方法直接得到Connection
String sql = "select * from dbuser where username = ?";// 占位符？ 可以在下面赋值
try {
pst = con.prepareStatement(sql);
pst.setString(1, username);// 将获取的username传入 1时指给sql语句的第一个？赋值
rs = pst.executeQuery();// 查询上述的sql语句 返回的结果是数据库里的username
/* 开始判断数据库的数据 */
if (rs.next()) {
String user = rs.getString("username");/* 获取数据库里的账号 */
String pwd = rs.getString("password");/* 获取数据库里的密码 */
if (user.equals(username)&&pwd.equals(password)) // 如果密码匹配则验证成功
return true;
else
return false;
} else
return false;
}
catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
/* 关闭rs pst */
try {
rs.close();// 关闭rs
pst.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return false;
｝
```yaml
3.5 注册设计
（1）简述：如果登陆过程中，用户名密码出现问题，则进入注册界面
（2）详细设计 在注册jsp中输入账号密码后，将表单数据提交到RegisterServlet中，RegisterServlet调用dao中的register方法将usernmae以及password通过数据库插入语句进行存储。
RegisterServlet代码：
```java
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/json;charset=UTF-8");//设置编码格式
response.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String sure_password=request.getParameter("sure_password");
if(password.equals(sure_password)) {
DAO.register(username, password);
request.getRequestDispatcher("/jsp/login.jsp").forward(request, response);
}else
request.getRequestDispatcher("/jsp/register.jsp").forward(request, response);
}
}
`
``
DAO中的register代码：
```java
public static void register(String username, String password) {
con = DBHelper.getConnection();// 通过DBHelper得到Connection
String sql = "insert into dbuser values(?,?)";// 插入语句的sql
try {
pst = con.prepareStatement(sql);
pst.setString(1, username);// 用户名赋值
pst.setString(2, password);// 密码赋值
int b = pst.executeUpdate();// 更新数据 返回受影响的行数
// 执行插入语句，并返回一个int值，大于0表示添加成功，小于0表示添加失败.
if (b > 0) {
System.out.println("数据添加成功");
} else {
System.out.println("数据添加失败");
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
/* 关闭rs pst */
try {
rs.close();// 关闭rs
pst.close();
}catch(Exception e)
{
// TODO: handle exception
e.printStackTrace();
}
}}
`
``
3.6页面设计
（1）使用了html++css 用div进行板块排版，在一些图片及文字上添加了超链接。
（2）页面如下：
登陆界面：
```c
```css
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<link rel="stylesheet" type="text/css" href="../css/login_css.css" />
</head>
<body>
<div id="frame">
<div class="login_frame">
<img src="../images/inco.png" />
<h2>欢迎登录</h2>
<form action="/uml_task/LoginServlet" method="post">
<table>
<tr><th><label>用户名</label></th>
<th><input type="text" class="login_text" maxlength="20" name="username" id="username"/></th>
</tr>
<%if(request.getAttribute("inf")!=null){ %>
<span>请输入正确的用户名和密码！</span>
<%} else{%>
<% }%>
<tr><th> <label>密  码</label></th>
<th><input type="password" class="login_text" name="password" id="password"/></th>
</tr>
</table>
<input type="submit" value="登录" class="login_btn" />
<input type="reset" value="取消" class="login_btn" />
</form>
<a href="../jsp/register.jsp">注册账号</a>
<a href="http://www.baidu.com">忘记密码</a>
</div>
</div>
</body>
</html>
``
其中的css样式
*{
margin: 0;
padding: 0;
font-size: 15px;
}
body{
background: url(../images/timg2.jpg);
background-size: cover;
}
#frame{
}
#frame .login_frame{
height: 400px;
width: 300px;
border: 1px solid #8e8e8e;
padding: 20px;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);*/
/* position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;*/
text-align: center;
margin: 8% auto;
border-radius: 10px ;
background:rgba(0,0,0,.3);
}
#frame .login_frame h2{
font-family: 'Do Hyeon', sans-serif;
font-size: 35px;
color: white;
text-align: center;
padding-bottom: 30px;
}
#frame table{
color: white;
margin: 0 auto;
line-height: 50px;
}
#frame .login_frame .login_text{
font-size: 12px;
width: 150px;
border-radius: 10px;
padding:8px;
}
#frame .login_btn{
width: 30%;
height: 40px;
border-radius: 10px;
margin-top: 10px;
background-color: cornflowerblue;
color: white;
display: block;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
#frame .login_frame a{
text-decoration: none;
font-size: 15px;
color: white;
margin-left: 20px;
}
#frame .login_frame a:hover{
color: red;
}
#frame img{
width: 70px;
}
注册界面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎注册</title>
<link rel="stylesheet" type="text/css" href="../css/register_css.css" />
</head>
<body>
<div id="frame">
<div class="register_frame">
<img src="../images/inco.png" />
<h2>欢迎注册</h2>
<form action="/uml_task/RegisterServlet" method="post">
<table>
<tr><th><label>用户名</label></th>
<th><input type="text" class="register_text" maxlength="20" name="username"/></th></tr>
<tr><th> <label>密 码</label></th>
<th><input type="password" class="register_text" name="password" /></th> </tr>
<tr><th> <label>确认密码</label></th>
<th><input type="password" name="sure_password" class="register_text"/></th> </tr>
</table>
<input type="submit" value="注册" class="register_btn" />
<input type="reset" value="取消" class="register_btn" />
</form>
<a href="login.jsp">返回登陆</a>
<a href="http://www.baidu.com">帮助</a>
</div>
</div>
</body>
</html>
注册界面的css
*{
margin: 0;
padding: 0;
font-size: 15px;
}
body{
background: url(../images/bg.jpg);
background-size: cover;
}
#frame{
}
#frame .register_frame{
height: 450px;
width: 300px;
border: 1px solid #8e8e8e;
padding: 20px;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);*/
/* position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;*/
text-align: center;
margin: 8% auto;
border-radius: 10px ;
background:rgba(0,0,0,.3);
}
#frame .register_frame h2{
font-family: 'Do Hyeon', sans-serif;
font-size: 35px;
color: white;
text-align: center;
padding-bottom: 30px;
}
#frame table{
color: white;
margin: 0 auto;
line-height: 50px;
}
#frame .register_frame .register_text{
font-size: 12px;
width: 150px;
border-radius: 10px;
padding:8px;
}
#frame .register_btn{
width: 30%;
height: 40px;
border-radius: 10px;
margin-top: 10px;
background-color: cornflowerblue;
color: white;
display: block;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
#frame .register_frame a{
text-decoration: none;
font-size: 15px;
color: white;
padding-left: 20px;
}
#frame .register_frame a:hover{
color: red;
}
#frame img{
width: 70px;
}
主页的html
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="../css/demon_css.css" />
<script src="../js/myfocus-2.0.4.min.js" type="text/javascript"></script><!DOCTYPE 引入库文件>
<script src="../js/mf-pattern/mF_fscreen_tb.js" type="text/javascript"></script> <!DOCTYPE 引入样式的css文件>
<link href="../js/mf-pattern/mF_fscreen_tb.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
myFocus.set({
id:'picBox'})
function $(id){
return document.getElementById(id);}
</script>
</head>
<body>
<div id="top">
<div class="top_content">
<ul>
<li><a href="#" οnclick="setcooect()">消息</a></li>
<li><a href="#" οnclick="setcollect()">购物车</a></li>
<li><a href="#" οnclick="sethome()">个人信息</a></li>
</ul>
</div>
</div><!DOCTYPE top结束>
<div id="bd">
<div class="bd_logo"><img src="../images/read.png" /></div><!DOCTYPE logo 结束>
<div class="bd_form">
<from>
<input type="text" class="text" placeholder="在图书系统中搜索"/>
<input type="button" value="搜索" class="collect" />
</from>
</div><!DOCTYPE bd_from结束>
</div><!DOCTYPE bd结束>
<div id="nav">
<div class="nav_ul">
<ul>
<li><a href="demon.html">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">榜单</a></li>
<li><a href="#">独家作品</a></li>
<li><a href="#">机构专区</a></li>
<li><a href="#">党史天地</a></li>
</ul>
</div><!DOCTYPE nav_ul结束>
<div class="nav_ul_right"><a href="#">我的书架</a></div>
</div><!DOCTYPE nav 结束>
<hr /><!DOCTYPE 从导航栏往下分割>
<div id="bg_color"><!DOCTYPE 背景颜色一直到 三个文本框那里>
<div id="picBox">
<div class="pic">
<ul>
<li><a href="#"><img src="../images/ad1.jpg"/></a></li>
<li><a href="#"><img src="../images/ad2.jpg"/></a></li>
<li><a href="#"><img src="../images/ad3.jpg"/></a></li>
</ul>
</div>
</div> <!DOCTYPE ad结束>
<div id="next_nav">
<h2>分类</h2>
<ul>
<li><a href="#">成功学</a></li>
<li><a href="#">投资理财</a></li>
<li><a href="#">人际处事</a></li>
<li><a href="#">计算机</a></li>
<li><a href="#">人物传记</a></li>
<li><a href="#">言情小说</a></li>
<li><a href="#">散文随笔</a></li>
<li><a href="#">悬疑推理</a></li>
<li><a href="#">市场营销</a></li>
<li><a href="#">武侠传记</a></li>
<li><a href="#">玄幻小说</a></li>
</ul>
</div><!DOCTYPE next_nav结束>
<div id="rd_img">
<ul>
<li><a href="http://yuedu.baidu.com/promotion/activity/duke?fr=xjdt"><img src="../images/lad1.jpg" /> </a></li>
<li><a href="https://yuedu.baidu.com/promotion/activity/bjzc2017?fr=xjdt"><img src="../images/lad2.jpg" /> </a></li>
<li><a href="http://yuedu.baidu.com/promotion/activity/huazhnag?fr=xjdt"><img src="../images/lad3.jpg" /> </a></li>
</ul>
</div><!DOCTYPE rd结束>
<div id="recommand">
<div class="recommand_content">
<div class="title">
<h2>公告咨询</h2>
</div><!DOCTYPE title 结束>
<div class="content">
<ul>
<li><a href="#">专访女频签约作者鸭圣婆</a> <span> 2019 8-10</span></li>
<li><a href="#">塔读文学男频当家小生【六界三道】</a> <span> 2019 8-18</span></li>
<li><a href="#">第二期首席推书官-陈楚河</a> <span> 2019 8-30</span></li>
</ul>
</div><!DOCTYPE content结束>
</div><!DOCTYPE 第一部分结束>
<div class="recommand_content">
<div class="title">
<h2>好书推荐</h2>
</div><!DOCTYPE title 结束>
<div class="content">
<ul>
<li><a href="#">一代尊皇，逆势伐仙</a> <span class="date"> 2019 10-11</span></li>
<li><a href="#">手可摘星辰，拳能灭山河 </a> <span> 2019 10-28</span></li>
<li><a href="#">帝王一怒，伏尸百万</a> <span> 2019 10-30</span></li>
</ul>
</div><!DOCTYPE content结束>
</div><!DOCTYPE 第二部分结束>
<div class="recommand_content">
<div class="title">
<h2>原创发布</h2>
</div><!DOCTYPE title 结束>
<div class="content">
<ul>
<li><a href="#">一只狗引发的故事...</a> <span class="date"> 2019 11-10</span></li>
<li><a href="#">平凡的他，曾屹立世界之巅</a> <span> 2019 11-14</span></li>
<li><a href="#">尊严不可践踏，人生需要逆袭</a> <span> 2019 11-20</span></li>
</ul>
</div><!DOCTYPE content结束>
</div><!DOCTYPE 第三部分结束>
</div><!DOCTYPE recommand结束>
</div><!DOCTYPE 颜色填充区结束!>
<div id="main">
<div class="title">
<h1>热门推荐</h1>
</div><!DOCTYPE title 结束>
<div class="row1">
<ul>
<li><a href="https://yuedu.baidu.com/ebook/aaf3e704f11dc281e53a580216fc700abb68522e?fr=index"><img src="../images/book1.jpg"/><span>致我们暖暖的小时光</span> </a></li>
<li><a href="https://yuedu.baidu.com/ebook/00e7354c48649b6648d7c1c708a1284ac85005ae?fr=index"><img src="../images/book2.jpg"/><span>他来时惊涛骇浪</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/ea624d07a36925c52cc58bd63186bceb18e8ed09?fr=index"><img src="../images/book3.jpg"/><span>都挺好</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/21200230a9956bec0975f46527d3240c8547a11a?fr=index"><img src="../images/book4.jpg"/><span>如果可以这样爱</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/d949e958f342336c1eb91a37f111f18583d00cdc?fr=index"><img src="../images/book5.jpg"/><span>我在未来等你</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/8c4a682cd0f34693daef5ef7ba0d4a7303766c7a?fr=index"><img src="../images/book6.jpg"/><span>熊镇</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/71c84d756d85ec3a87c24028915f804d2a168723?fr=index"><img src="../images/book7.jpg"/><span>蜜蜂与远雷</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/2827d868162ded630b1c59eef8c75fbfc67d9435?fr=index"><img src="../images/book8.jpg"/><span>伯娜黛特,你要去哪</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/e88950fb50e79b89680203d8ce2f0066f4336433?fr=index"><img src="../images/book9.jpg"/><span>夜行实录</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/6e0cd550d05abe23482fb4daa58da0116d171f45?fr=index"><img src="../images/book10.jpg"/><span>天谴者</span></a></li>
</ul>
</div><!DOCTYPE ul图片排列结束>
</div><!DOCTYPE main结束>
<hr />
<div id="next_main">
<div class="title">
<h1>最受好评</h1>
</div><!DOCTYPE title 结束>
<div class="row1">
<ul>
<li><a href="https://yuedu.baidu.com/ebook/a59381a3492fb4daa58da0116c175f0e7dd11918?fr=index"><img src="../images/b1.jpg"/><span>如果东京不快乐</span> </a></li>
<li><a href="https://yuedu.baidu.com/ebook/ffa76e846edb6f1afe001f2e?fr=index"><img src="../images/b2.jpg"/><span>迷茫时代的明白人</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/2a5f06aa492fb4daa58da0116c175f0e7cd119de?fr=index"><img src="../images/b3.jpg"/><span>小偷家族</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/8ad70a003868011ca300a6c30c2259010302f349?fr=index"><img src="../images/b4.jpg"/><span>无罪辩护</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/a47a08cb68dc5022aaea998fcc22bcd126ff42ad?fr=index"><img src="../images/b5.jpg"/><span>尸语者</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/49047066a4e9856a561252d380eb6294dd88222d?fr=index"><img src="../images/b6.jpg"/><span>诡案追踪之大结局</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/cb6decf25ff7ba0d4a7302768e9951e79a89694a?fr=index"><img src="../images/b7.jpg"/><span>诡案追踪</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/78bbd11304a1b0717ed5dd40?fr=index"><img src="../images/b8.jpg"/><span>D版杀人案</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/3f3970479b89680202d82545?fr=index"><img src="../images/b9.jpg"/><span>深宫谍影</span></a></li>
<li><a href="https://yuedu.baidu.com/ebook/c6eca88e690203d8ce2f0066f5335a8102d26643?fr=index"><img src="../images/b10.jpg"/><span>潜行迷踪</span></a></li>
</ul>
</div><!DOCTYPE row1 ul图片排列结束>
</div><!DOCTYPE next_main 结束>
<div id="footer">
<p>2019年11月25日完成</p>
<p>@China this is niu bi 666</p>
</div><!DOCTYPE footer结束>
</body>
</html>
主页的css
*{
margin: 0;
padding: 0;
}
body{
font-size: 15px;
}
#top .top_content{
height: 25px;
/* border-bottom: 1px solid #8E8E8E;*/
padding-right: 10%;
}
#top .top_content li{
line-height: 25px;
float: right;
padding-right: 30px;
list-style: none;
}
#top .top_content a:link,#top .top_content a:visited{
color: #101010;
text-decoration: none;
font-size: 14px;
}
#top .top_content a:hover{
color: red;
font-size: 20px;
font-weight: bold;
}
#bd{
width: 80%;
margin-left: 10%;
margin-top: 5px;
height: 100px;
/* border: 1px solid #8E8E8E;*/
}
#bd .bd_logo{
margin-left: 50px;
float: left;
}
#bd .bd_logo img{
width: 100px;
}
#bd .bd_form{
height: 50px;
float: left;
margin-left: 20px;
line-height: 100px;
padding-left: 20px;
}
#bd .text{
font-size: 15px;
width: 400px;
margin-left: 20px;
padding: 8px;
}
#bd .collect{
width: 100px;
padding:4px ;
margin-left: 10px;
font-size: 20px;
text-align: center;
border-radius: 5px ;
background-color:white ;
}
#nav{
margin-left: 10%;
height: 40px;
margin-top: 5px;
/*border: 1px solid #8E8E8E;*/
}
#nav .nav_ul {
/*border: 1px solid #8E8E8E;*/
height: 50px
width: 900px;
float: left;
}
#nav .nav_ul li{
line-height: 40px;
float: left;
list-style: none;
font-size: 20px;
width: 150px;
}
#nav .nav_ul a:link,#nav .nav_ul a:visited{
text-decoration: none;
color: black;
}
#nav .nav_ul a:hover{
font-size: 25px;
color: red;
border-bottom: 2px solid #419641;
}
#nav .nav_ul_right{
height: 40px;
width: 200px;
line-height: 40px;
float: left;
font-size: 20px;
margin-left: 122px;
text-align: center;
/* border: 1px solid #8E8E8E;*/
background-image: url(mybook.png);
background-size: 40px;
background-position: left center;
background-repeat: no-repeat;
}
#nav .nav_ul_right a:link,#nav .nav_ul_right a:visited{
text-decoration: none;
color: black;
}
#nav .nav_ul_right a:hover{
font-size: 25px;
color: red;
border-bottom: 2px solid #419641;
}
#picBox{
margin-left: 10%;
height: 300px;
width: 1200px;
overflow: hidden;
}
#bg_color{
background-color: whitesmoke;
}
#next_nav {
margin-left: 10%;
height: 50px;
margin-top: 5px;
}
#next_nav h2{
float: left;
line-height: 50px;
}
#next_nav li{
text-align: center;
list-style: none;
float: left;
width: 105px;
line-height: 50px;
}
#next_nav a:link,#next_nav a:visited{
text-decoration: none;
color: black;
}
#next_nav a:hover{
font-size: 22px;
color: red;
}
#rd_img{
margin-top: 15px ;
height: 170px;
margin-left: 12.5%;
}
#rd_img li{
float: left;
width: 405px;
list-style: none;
}
#rd_img img{
border-radius: 10px;
}
#recommand {
margin-left: 10%;
height: 160px;
padding: 10px;
}
#recommand .recommand_content{
border: 1px solid #8E8E8E;
border-radius: 10px;
height: 150px;
width: 350px;
float: left;
margin-left: 30px;
background:white ;
}
#recommand .title{
height: 45px;
line-height: 45px;
padding-left: 20px;
}
#recommand .content{
padding-left: 8px;
}
#recommand .content li{
list-style: none;
border-bottom: 1px dotted #8E8E8E;
line-height: 28px;
}
#recommand .content span{
font-size: 11px;
color: #999999;
float: right;
line-height: 25px;
margin: 2px;
}
#recommand .content a:link,.content a:visited{
text-decoration: none;
color: black;
}
#recommand .content a:hover{
color:red;
}
#main{
background-color: #DFF0D8;
height: 700px;
}
#main .title{
text-align: center;
height: 100px;
line-height: 70px;
}
#main .row1{
margin-left: 9%;
}
#main img{
border-radius: 7px;
}
#main li{
width:18%;
height: 300px;
list-style: none;
/* background-color: #DFF0D8; */
text-align: center;
float: left;
/*border: 1px solid #000000;*/
text-align: center;
}
#main span{
margin-top: 15px;
display: block;
}
#main a{
text-decoration: none;
color: #000000;
font-size: 15px;
}
#main a:hover{
color: red;
font-size: 20px;
}
#next_main{
background-color: #DFF0D8;
height: 700px;
}
#next_main .title{
text-align: center;
height: 100px;
line-height: 70px;
}
#next_main .row1{
margin-left: 9%;
}
#next_main img{
border-radius: 7px;
}
#next_main li{
width:18%;
height: 300px;
list-style: none;
/* background-color: #DFF0D8; */
text-align: center;
float: left;
/*border: 1px solid #000000;*/
text-align: center;
}
#next_main span{
margin-top: 15px;
display: block;
}
#next_main a{
text-decoration: none;
color: #000000;
font-size: 15px;
}
#next_main a:hover{
color: red;
font-size: 20px;
}
#footer{
height: 170px;
color: white;
text-align: center;
background: #888888;
padding-top: 50px;
}
#footer p{
line-height: 30px;
}
3.7运行效果
登陆
注册
主页
3.8总结
一定要注意路径问题，要用相对路径
还要引入JDBC的jar包
404就是路径不对，去研究路径对不对
出现问题多百度，百度可以解决80%的问题
接下来深入学习前端和JAVA啦
加油
6226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
