思路：登录成功保存登录时Cookie以及Session，下次打开网站通过过滤器拦截查看Session是否存在用户（考虑用户没有关闭浏览器的情况），如果Session中有用户数据，放行，从Cookie中查找用户数据如果没有数据，放行。
具体思路：
/**
* 判断session中是否有用户的信息:
* * session中如果有:放行.
* * session中没有:
* * 从Cookie中获取:
* * Cookie中没有:放行.
* * Cookie中有:
* * 获取Cookie中存的用户名和密码到数据库查询.
* * 没有查询到:放行.
* * 查询到:将用户信息存入到session . 放行.
*/代码实现：
*jar包
*sql
create database web_16;
use web_16;
create table user(
id int primary key auto_increment,
username varchar(20),
password varchar(20),
nickname varchar(20),
type varchar(10)
);
*工具类
c3p0jdbcUtils.java(C3P0连接池工具类)
package com.itheima.utils;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.sql.DataSource;
import com.mchange.v2.c3p0.ComboPooledDataSource;
/**
* jdbc c3p0工具类
*
* @author 侯青华
*
*/
public class c3p0jdbcUtils {
// 私有构造
private c3p0jdbcUtils() {
}
// c3p0数据源
private static final ComboPooledDataSource DATA_SOURCE = new ComboPooledDataSource();
/**
* 获得连接
*/
public static Connection getConnection() {
Connection conn = null;
try {
conn = DATA_SOURCE.getConnection();
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
public static DataSource getDataSource() {
return DATA_SOURCE;
}
/**
* 释放资源
*/
/**
* 释放资源的方法
*/
public static void release(ResultSet rs, Statement pst, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
// 垃圾回收尽快回收对象.
rs = null;
}
if (pst != null) {
try {
pst.close();
} catch (SQLException e) {
e.printStackTrace();
}
// 垃圾回收尽快回收对象.
pst = null;
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
// 垃圾回收尽快回收对象.
conn = null;
}
}
public static void release(Statement pst, Connection conn) {
if (pst != null) {
try {
pst.close();
} catch (SQLException e) {
e.printStackTrace();
}
// 垃圾回收尽快回收对象.
pst = null;
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
// 垃圾回收尽快回收对象.
conn = null;
}
}
}
c3p0-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<!-- 默认配置 -->
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql:///web_16</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="initialPoolSize">5</property>
<property name="maxPoolSize">20</property>
</default-config>
</c3p0-config>CookieUtils.java(Cookie工具类)
package com.itheima.utils;
/**
* Cookie的工具类
* @author 侯青华
*
*/
import javax.servlet.http.Cookie;
public class CookieUtils {
public static Cookie findCookie(Cookie[] cookies, String name) {
if(cookies == null) {
return null;
}else {
for (Cookie cookie : cookies) {
if(name.equals(cookie.getName())) {
return cookie;
}
}
}
return null;
}
}
Userlogin.java(登录Servlet)
package com.itheima.autologin.web.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
import java.util.Map;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.BeanUtils;
import com.itheima.autologin.domain.User;
import com.itheima.autologin.service.LoginService;
/**
* @author 侯青华
* @version 创建时间：2018年3月21日 下午1:34:19
*/
public class Userlogin extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 解决页面输出中文乱码
response.setContentType("text/html;charset=utf-8");
// POST请求中文乱码处理
request.setCharacterEncoding("utf-8");
try {
String username = request.getParameter("username");
String password = request.getParameter("passowrd");
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 调用业务层处理数据
LoginService loginService = new LoginService();
User exitUser = loginService.login(user);
if (exitUser == null) {
// 登录失败
request.setAttribute("msg", "登录失败");
request.getRequestDispatcher("/login.jsp").forward(request, response); // 转发
} else {
// 登录成功
// 记住密码
String ss = request.getParameter("autoLogin");
System.out.println("ss:"+ss);
if ("true".equalsIgnoreCase(ss)) {
Cookie cookie = new Cookie("autoLogin", exitUser.getUsername() + "#" + exitUser.getPassword());
cookie.setPath(request.getContextPath());
cookie.setMaxAge(60 * 60 * 24 * 7);// 一周
response.addCookie(cookie);
}
// 使用session记录用户信息
request.getSession().setAttribute("exitUser", exitUser);
response.sendRedirect(request.getContextPath() + "/index.jsp");
}
} catch (Exception e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}AutoLoginFilter.java(登录过滤器)
package com.itheima.autologin.web.filter;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import com.itheima.autologin.domain.User;
import com.itheima.autologin.service.LoginService;
import com.itheima.utils.CookieUtils;
/**
* Servlet Filter implementation class AutoLoginFilter
*/
public class AutoLoginFilter implements Filter {
public void destroy() {
}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
/**
* 判断session中是否有用户的信息:
* * session中如果有:放行.
* * session中没有:
* * 从Cookie中获取:
* * Cookie中没有:放行.
* * Cookie中有:
* * 获取Cookie中存的用户名和密码到数据库查询.
* * 没有查询到:放行.
* * 查询到:将用户信息存入到session . 放行.
*/
// 判断session中是否有用户的信息
HttpServletRequest req = (HttpServletRequest) request; //
User u = (User) req.getSession().getAttribute("exitUser");
if (u != null) {
// 有用户信息,放行
chain.doFilter(req, response);
} else {
// Session中没有用户信息,从Cookie中获取
Cookie[] cookies = req.getCookies();
Cookie cookie = CookieUtils.findCookie(cookies, "autoLogin");
// System.out.println(cookie.getValue());
// 查看cookie中是否有用户信息
if (cookie == null) {
chain.doFilter(req, response); // 放行
} else {
// 获取cookie中用户信息到数据库中进行查询
// 没有查到，放行
// 查到，将用户信息存入到session中，放行
String username = cookie.getValue().split("#")[0];
System.out.println(username);
String password = cookie.getValue().split("#")[1];
System.out.println(password);
// 封装，去数据库查询数据
User user = new User();
user.setUsername(username);
user.setPassword(password);
LoginService loginService = new LoginService();
try {
User exitU = loginService.login(user);
if (exitU == null) {
// 密码跟账户是被串改的。
chain.doFilter(req, response);
} else {
// 将用户信息存入session中，放行
req.getSession().setAttribute("exitUser", exitU);
chain.doFilter(req, response);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
public void init(FilterConfig fConfig) throws ServletException {
}
}
LoginService.java
package com.itheima.autologin.service;
import java.sql.SQLException;
import com.itheima.autologin.dao.LoginDao;
import com.itheima.autologin.domain.User;
public class LoginService {
public User login(User user) throws SQLException {
LoginDao loginDao = new LoginDao();
return loginDao.login(user);
}
}
User.java(javaBean)
package com.itheima.autologin.domain;
public class User {
private int id;
private String username;
private String password;
private String nickname;
private String type;
public User() {
super();
// TODO Auto-generated constructor stub
}
public User(int id, String username, String password, String nickname, String type) {
super();
this.id = id;
this.username = username;
this.password = password;
this.nickname = nickname;
this.type = type;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
LoginDao.java(登录DAO)
package com.itheima.autologin.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import com.itheima.autologin.domain.User;
import com.itheima.utils.c3p0jdbcUtils;
public class LoginDao {
public User login(User user) throws SQLException {
QueryRunner qr = new QueryRunner(c3p0jdbcUtils.getDataSource());
String sql = "select *from user where username=? and password=?";
User u = qr.query(sql, new BeanHandler<>(User.class), user.getUsername(),user.getPassword());
return u;
}
}
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<style>
body{
margin-top:20px;
margin:0 auto;
}
.carousel-inner .item img{
width:100%;
height:300px;
}
.container .row div{
/* position:relative;
float:left; */
}
font {
color: #666;
font-size: 22px;
font-weight: normal;
padding-right:17px;
}
</style>
</head>
<body>
<!--
时间：2015-12-30
描述：菜单栏
-->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" />
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.htm">注册</a></li>
<li><a href="cart.htm">购物车</a></li>
</ol>
</div>
</div>
<!--
时间：2015-12-30
描述：导航条
-->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container" style="width:100%;height:460px;background:#FF2C4C url('images/loginbg.jpg') no-repeat;">
<div class="row">
<div class="col-md-7">
<!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
</div>
<div class="col-md-5">
<div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
<font>会员登录</font>USER LOGIN
<br />
${ msg }
<div> </div>
<form class="form-horizontal" action="/guolvqi/Userlogin" method="post">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" name="passowrd" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码">
</div>
<div class="col-sm-3">
<img src="./image/captcha.jhtml"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="autoLogin" value="true"> 自动登录
</label>
<label>
<input type="checkbox" > 记住用户名
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" width="100" value="登录" name="submit" border="0"
style="background: url('./images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height:35px;width:100px;color:white;">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div style="margin-top:50px;">
<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
</div>
<div style="text-align: center;margin-top: 5px;">
<ul class="list-inline">
<li><a>关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a target="_blank">支付方式</a></li>
<li><a target="_blank">配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
Copyright © 2005-2016 传智商城 版权所有
</div>
</body></html>index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEB01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<!--
时间：2015-12-30
描述：菜单栏
-->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" />
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top: 20px">
<ol class="list-inline">
<c:if test="${empty exitUser }">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.htm">注册</a></li>
<li><a href="cart.htm">购物车</a></li>
</c:if>
<c:if test="${not empty exitUser }">
<li>您好！${exitUser.nickname }</li>
<li><a href="cart.htm">购物车</a></li>
<li><a href="#">退出</a></li>
</c:if>
</ol>
</div>
</div>
<!--
时间：2015-12-30
描述：导航条
-->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="product_list.htm">手机数码<span
class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!--
作者：ci2713@163.com
时间：2015-12-30
描述：轮播条
-->
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/2.jpg">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/3.jpg">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--
作者：ci2713@163.com
时间：2015-12-30
描述：商品显示
-->
<div class="container-fluid">
<div class="col-md-12">
<h2>
热门商品 <img src="img/title2.jpg" />
</h2>
</div>
<div class="col-md-2"
style="border: 1px solid #E7E7E7; border-right: 0; padding: 0;">
<img src="products/hao/big01.jpg" width="205" height="404"
style="display: inline-block;" />
</div>
<div class="col-md-10">
<div class="col-md-6"
style="text-align: center; height: 200px; padding: 0px;">
<a href="product_info.htm"> <img
src="products/hao/middle01.jpg" width="516px" height="200px"
style="display: inline-block;">
</a>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2 yes-right-border"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2 yes-right-border"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
</div>
</div>
<!--
作者：ci2713@163.com
时间：2015-12-30
描述：广告部分
-->
<div class="container-fluid">
<img src="products/hao/ad.jpg" width="100%" />
</div>
<!--
作者：ci2713@163.com
时间：2015-12-30
描述：商品显示
-->
<div class="container-fluid">
<div class="col-md-12">
<h2>
热门商品 <img src="img/title2.jpg" />
</h2>
</div>
<div class="col-md-2"
style="border: 1px solid #E7E7E7; border-right: 0; padding: 0;">
<img src="products/hao/big01.jpg" width="205" height="404"
style="display: inline-block;" />
</div>
<div class="col-md-10">
<div class="col-md-6"
style="text-align: center; height: 200px; padding: 0px;">
<a href="product_info.htm"> <img
src="products/hao/middle01.jpg" width="516px" height="200px"
style="display: inline-block;">
</a>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2 yes-right-border"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2 yes-right-border"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small03.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small04.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
<div class="col-md-2 yes-right-border"
style="text-align: center; height: 200px; padding: 10px 0px;">
<a href="product_info.htm"> <img src="products/hao/small05.jpg"
width="130" height="130" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: #666'>冬瓜</a>
</p>
<p>
<font color="#E4393C" style="font-size: 16px">¥299.00</font>
</p>
</div>
</div>
</div>
<!--
作者：ci2713@163.com
时间：2015-12-30
描述：页脚部分
-->
<div class="container-fluid">
<div style="margin-top: 50px;">
<img src="img/footer.jpg" width="100%" height="78" alt="我们的优势"
title="我们的优势" />
</div>
<div style="text-align: center; margin-top: 5px;">
<ul class="list-inline">
<li><a href="info.html">关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a>支付方式</a></li>
<li><a>配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div
style="text-align: center; margin-top: 5px; margin-bottom: 20px;">
Copyright © 2005-2016 传智商城 版权所有</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
