界面设计
前言首页登录页面注册页面搜索页购物车页面后台管理页面
前言
接上一个博客
首页
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>首页
</title
>
<link rel
="stylesheet" type
="text/css" href
="static/css/bootstrap.min.css" />
<link rel
="stylesheet" type
="text/css" href
="static/css/fg.css" />
</head
>
<body
>
<div
class="container">
<!-- 横幅
-->
<div
class="row">
<div
class="col-sm-4">
您好，欢迎来到网上书城！
</div
>
<div
class="col-sm-4 col-sm-offset-4">
<a href
="#">登录
</a
> | <a href
="#">注册
</a
> | <b
>我的购物车
</b
> | <i
>网站首页
</i
>
</div
>
</div
>
<!-- 搜索栏
-->
<div
class="row">
<div
class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的
-->
<div
class="search"></div
>
<input type
="text" id
="book_name" name
="name" value
="" />
<button type
="button" class="btn btn-primary">搜索
</button
>
</div
>
</div
>
<!-- 主内容区
-->
<div
class="row content">
<div
class="col-sm-3 l-content">
<ul
class="list-group c-category ">
<li
class="list-group-item" style
="color: white;">书籍分类
</li
>
<li
class="list-group-item">现代言情
</li
>
<li
class="list-group-item">古代言情
</li
>
<li
class="list-group-item">幻想仙侠
</li
>
<li
class="list-group-item">玄幻
</li
>
<li
class="list-group-item">都市
</li
>
<li
class="list-group-item">奇幻
</li
>
<li
class="list-group-item">军事
</li
>
<li
class="list-group-item">科幻
</li
>
<li
class="list-group-item">武侠
</li
>
<li
class="list-group-item">青春
</li
>
<li
class="list-group-item">竞技
</li
>
<li
class="list-group-item">历史
</li
>
<li
class="list-group-item">游戏
</li
>
<li
class="list-group-item">其他
</li
>
</ul
>
</div
>
<div
class="col-sm-9 r-content">
<!-- 广告
-->
<div
class="guangao">
<img src
="static/img/banner.png" class="img-thumbnail" alt
="...">
</div
>
<!-- 新书上架
-->
<div
class="news container">
<div
class="tip row">
<img src
="static/img/title_bj.png" />
<h5 style
="color: white;">新书上架
</h5
>
</div
>
<div
class="row book">
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
</div
>
</div
>
<!-- 热销
-->
<div
class="hots container">
<div
class="tip row">
<img src
="static/img/title_bj.png" />
<h5 style
="color: white;">热销图书
</h5
>
</div
>
<div
class="row book">
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-3">
<img src
="static/img/1.png" />
<p
>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
</div
>
</div
>
</div
>
</div
>
<!-- 底部版权
-->
<div
class="row">
<div
class="col-sm-12 text-center">
Copyright
2020 教育，版权所有
</div
>
</div
>
</div
>
<script src
="staticjs/jquery-3.3.1.js"></script
>
<script src
="staticjs/bootstrap.min.js"></script
>
<script type
="text/javascript">
$
(function() {
$
(".c-category li").eq(0).addClass('bg-color1');
$
(".c-category li:gt(0)").addClass('bg-color2');
$
(".c-category li:gt(0)").hover(function() {
$
(this).addClass('bg-opacity');
}, function() {
$
(this).removeClass('bg-opacity');
});
})
</script
>
</body
>
</html
>
登录页面
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>登录界面
</title
>
<link rel
="stylesheet" type
="text/css" href
="static/css/bootstrap.min.css" />
<style
>
.form
-signin
{
position
: relative
;
width
: 400px
;
top
: 100px
;
left
: 50%;
margin
-left
: -200px
;
}
</style
>
</head
>
<body
>
<form
class="form-signin" action
="" method
="post">
<div
class="text-center mb-4">
<img
class="mb-4" src
="/docs/assets/brand/bootstrap-solid.svg" alt
="" width
="72" height
="72">
<h1
class="h3 mb-3 font-weight-normal">用户登录
</h1
>
</div
>
<div
class="form-label-group">
<input type
="text" id
="name" name
="name" class="form-control" placeholder
="请输入用户名..." required autofocus
>
</div
>
<br
/>
<div
class="form-label-group">
<input type
="password" id
="pwd" name
="pwd" class="form-control" placeholder
="请输入密码..." required
>
</div
>
<div
class="checkbox mb-3">
<label
>
<input type
="checkbox" value
="remember-me"> Remember me
</label
>
</div
>
<button
class="btn btn-lg btn-primary btn-block" type
="submit">登录
</button
>
<p
class="mt-5 mb-3 text-muted text-center">©
; 2017-2020</p
>
</form
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
注册页面
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>注册界面
</title
>
<link rel
="stylesheet" type
="text/css" href
="static/css/bootstrap.min.css" />
<style
>
.form
-signin
{
position
: relative
;
width
: 400px
;
top
: 100px
;
left
: 50%;
margin
-left
: -200px
;
}
</style
>
</head
>
<body
>
<form
class="form-signin" action
="" method
="post">
<div
class="text-center mb-4">
<img
class="mb-4" src
="/docs/assets/brand/bootstrap-solid.svg" alt
="" width
="72" height
="72">
<h1
class="h3 mb-3 font-weight-normal">用户注册
</h1
>
</div
>
<div
class="form-label-group">
<input type
="text" id
="name" name
="name" class="form-control" placeholder
="请输入用户名..." required autofocus
>
</div
>
<br
/>
<div
class="form-label-group">
<input type
="password" id
="pwd" name
="pwd" class="form-control" placeholder
="请输入密码..." required
>
</div
>
<div
class="checkbox mb-3">
<label
>
<input type
="checkbox" value
="remember-me"> Remember me
</label
>
</div
>
<button
class="btn btn-lg btn-primary btn-block" type
="submit">注册
</button
>
<p
class="mt-5 mb-3 text-muted text-center">©
; 2017-2020</p
>
</form
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
搜索页
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>搜索页
</title
>
<link rel
="stylesheet" type
="text/css" href
="static/css/bootstrap.min.css" />
<link rel
="stylesheet" type
="text/css" href
="static/css/fg.css" />
</head
>
<body
>
<div
class="container">
<!-- 横幅
-->
<div
class="row">
<div
class="col-sm-4">
您好，欢迎来到网上书城！
</div
>
<div
class="col-sm-4 col-sm-offset-4">
<a href
="#">登录
</a
> | <a href
="#">注册
</a
> | <b
>我的购物车
</b
> | <i
>网站首页
</i
>
</div
>
</div
>
<!-- 搜索栏
-->
<div
class="row">
<div
class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的
-->
<div
class="search"></div
>
<input type
="text" id
="book_name" name
="name" value
="" />
<button type
="button" class="btn btn-primary">搜索
</button
>
</div
>
</div
>
<!-- 主内容区
-->
<div
class="row content">
<div
class="col-sm-3 l-content">
<ul
class="list-group c-category ">
<li
class="list-group-item" style
="color: white;">书籍分类
</li
>
<li
class="list-group-item">现代言情
</li
>
<li
class="list-group-item">古代言情
</li
>
<li
class="list-group-item">幻想仙侠
</li
>
<li
class="list-group-item">玄幻
</li
>
<li
class="list-group-item">都市
</li
>
<li
class="list-group-item">奇幻
</li
>
<li
class="list-group-item">军事
</li
>
<li
class="list-group-item">科幻
</li
>
<li
class="list-group-item">武侠
</li
>
<li
class="list-group-item">青春
</li
>
<li
class="list-group-item">竞技
</li
>
<li
class="list-group-item">历史
</li
>
<li
class="list-group-item">游戏
</li
>
<li
class="list-group-item">其他
</li
>
</ul
>
</div
>
<div
class="col-sm-9">
<div
class="media">
<img src
="img/2.png" class="align-self-center mr-3" alt
="...">
<div
class="media-body">
<p
>第一商会
</p
>
<p
>作者：
</p
>
<p
>价格：￥
24</p
>
<p
>出版社：丛恒文学
</p
>
<p
>简介：三天更一章
</p
>
<p
>
<button
class="btn btn-danger" style
="width: 150px;">加入购物车
</button
>
<button
class="btn btn-danger" style
="width: 150px;">去结算
</button
>
</p
>
</div
>
</div
>
<div
class="media">
<img src
="img/2.png" class="align-self-center mr-3" alt
="...">
<div
class="media-body">
<p
>第一商会
</p
>
<p
>作者：
</p
>
<p
>价格：￥
24</p
>
<p
>出版社：丛恒文学
</p
>
<p
>简介：三天更一章
</p
>
<p
>
<button
class="btn btn-danger" style
="width: 150px;">加入购物车
</button
>
<button
class="btn btn-danger" style
="width: 150px;">去结算
</button
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- 底部版权
-->
<div
class="row">
<div
class="col-sm-12 text-center">
Copyright
2020 教育，版权所有
</div
>
</div
>
</div
>
<script src
="js/jquery-3.3.1.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
<script type
="text/javascript">
$
(function() {
$
(".c-category li").eq(0).addClass('bg-color1');
$
(".c-category li:gt(0)").addClass('bg-color2');
$
(".c-category li:gt(0)").hover(function() {
$
(this).addClass('bg-opacity');
}, function() {
$
(this).removeClass('bg-opacity');
});
})
</script
>
</body
>
</html
>
购物车页面
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
>购物车
</title
>
<link rel
="stylesheet" type
="text/css" href
="static/css/bootstrap.min.css" />
<link rel
="stylesheet" type
="text/css" href
="static/css/fg.css" />
</head
>
<body
>
<div
class="container">
<!-- 横幅
-->
<div
class="row">
<div
class="col-sm-4">
您好，欢迎来到网上书城！
</div
>
<div
class="col-sm-4 col-sm-offset-4">
<a href
="#">登录
</a
> | <a href
="#">注册
</a
> | <b
>我的购物车
</b
> | <i
>网站首页
</i
>
</div
>
</div
>
<!-- 搜索栏
-->
<div
class="row">
<div
class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的
-->
<div
class="search"></div
>
<input type
="text" id
="book_name" name
="name" value
="" />
<button type
="button" class="btn btn-primary">搜索
</button
>
</div
>
</div
>
<!-- 主内容区
-->
<div
class="row content">
<div
class="col-sm-3 l-content">
<ul
class="list-group c-category ">
<li
class="list-group-item" style
="color: white;">书籍分类
</li
>
<li
class="list-group-item">现代言情
</li
>
<li
class="list-group-item">古代言情
</li
>
<li
class="list-group-item">幻想仙侠
</li
>
<li
class="list-group-item">玄幻
</li
>
<li
class="list-group-item">都市
</li
>
<li
class="list-group-item">奇幻
</li
>
<li
class="list-group-item">军事
</li
>
<li
class="list-group-item">科幻
</li
>
<li
class="list-group-item">武侠
</li
>
<li
class="list-group-item">青春
</li
>
<li
class="list-group-item">竞技
</li
>
<li
class="list-group-item">历史
</li
>
<li
class="list-group-item">游戏
</li
>
<li
class="list-group-item">其他
</li
>
</ul
>
</div
>
<div
class="col-sm-9">
<table
class="table">
<thead
class="thead-dark">
<tr style
="background-color: papayawhip;">
<th scope
="col">书名
</th
>
<th scope
="col">单价
</th
>
<th scope
="col">数量
</th
>
<th scope
="col">小计
</th
>
<th scope
="col">操作
</th
>
</tr
>
</thead
>
<tbody
>
<tr
>
<td
>Mark
</td
>
<td
>Otto
</td
>
<td
>@mdo
</td
>
<td
>Mark
</td
>
<td
>
<a href
="#">删除
</a
> 
; 
;
<a href
="#">更新
</a
>
</td
>
</tr
>
<tr
>
<td
>Mark
</td
>
<td
>Otto
</td
>
<td
>@mdo
</td
>
<td
>Mark
</td
>
<td
>
<a href
="#">删除
</a
> 
; 
;
<a href
="#">更新
</a
>
</td
>
</tr
>
<tr
>
<td colspan
="5">
<div
class="btn btn-danger" style
="width: 200px;">清空购物车
</div
>
<div
class="btn btn-danger shop-table-tab" style
="width: 200px;">继续购物
</div
>
<div
class="btn btn-danger" style
="width: 200px;">去结算
</div
>
</td
>
</tr
>
</tbody
>
</table
>
</div
>
</div
>
<!-- 底部版权
-->
<div
class="row">
<div
class="col-sm-12 text-center">
Copyright
2020 教育，版权所有
</div
>
</div
>
</div
>
<script src
="js/jquery-3.3.1.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
<script type
="text/javascript">
$
(function() {
$
(".c-category li").eq(0).addClass('bg-color1');
$
(".c-category li:gt(0)").addClass('bg-color2');
$
(".c-category li:gt(0)").hover(function() {
$
(this).addClass('bg-opacity');
}, function() {
$
(this).removeClass('bg-opacity');
});
})
</script
>
</body
>
</html
>
后台管理页面
<%@ page language
="java" contentType
="text/html; charset=UTF-8"
pageEncoding
="UTF-8"%>
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<!-- 全局样式
-->
<link rel
="stylesheet" type
="text/css" href
="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标
-->
<link rel
="stylesheet" type
="text/css" href
="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type
="text/javascript" src
="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script
>
<!-- 组件库源码的js文件
-->
<script type
="text/javascript" src
="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script
>
<script type
="text/javascript" src
="${pageContext.request.contextPath }/static/js/index.js"></script
>
<title
>登录后的主界面
</title
>
</head
>
<body
class="easyui-layout">
<input type
="hidden" id
="ss" value
="${pageContext.request.contextPath }" />
<div data
-options
="region:'north',border:false"
style
="height:60px;background:#B3DFDA;padding:10px">
xxxxx
</div
>
<div data
-options
="region:'west',split:true,title:'West'"
style
="width:150px;padding:10px;">
<ul id
="tt"></ul
>
</div
>
<div data
-options
="region:'east',split:true,collapsed:true,title:'East'"
style
="width:100px;padding:10px;">
east region
</div
>
<div data
-options
="region:'south',border:false"
style
="height:50px;background:#A9FACD;padding:10px;">
xxxxx
</div
>
<div data
-options
="region:'center',title:'Center'">
<div id
="bookTabs" class="easyui-tabs" style
="width:100%;height:100%;">
<div title
="首页" style
="padding:20px;display:none;">
首页
</div
>
</div
>
</div
>
</body
>
</html
>
今天就分享到这了，下次分享实现登陆、注册功能
