目录
目标注册界面登录界面主界面购物车界面
目标
结合bootstrap官网模型示例＋Hbuilder工具绘制以下原型界面： 1.用户注册 2.用户登录 3.主界面 4.购物车界面
注册界面
<!DOCTYPE html
>
<html lang
="en">
<head>
<meta charset
="UTF-8">
<title>注册界面
</title
>
<link type
="text/css" rel
="stylesheet" href
="css/style.css">
<!-- <script src
="js/jquery-1.10.2.js"></script
> -->
<script src
="js/jquery-3.3.1.min.js"></script
>
<script src
="js/img_ver.js"></script
>
<style>
.bxs
-row
{
margin
-bottom
:12px
;
}
.logo
-box
{
width
:404px
;
margin
:120px auto
;
border
:1px solid #e5e5e5
;
border
-radius
:4px
;
box
-shadow
:0 4px
18px
rgba(0,0,0,0.2);
position
:relative
;
overflow
:hidden
;
height
:360px
;
}
.login
{
position
:absolute
;
width
:320px
;left
:0;
top
:0;
padding
: 42px
42px
36px
;
transition
:all
0.8s
;
}
.username
,.password
,.btn
{
height
: 44px
;
width
: 100%;
padding
: 0 10px
;
border
: 1px solid #
9da3a6
;
background
: #fff
;
text
-overflow
: ellipsis
;
-webkit
-box
-sizing
: border
-box
;
-moz
-box
-sizing
: border
-box
;
box
-sizing
: border
-box
;
-webkit
-border
-radius
: 4px
;
-moz
-border
-radius
: 4px
;
-khtml
-border
-radius
: 4px
;
border
-radius
: 4px
;
-webkit
-box
-shadow
: none
;
-moz
-box
-shadow
: none
;
box
-shadow
: none
;
color
: #
000;
font
-size
: 1em
;
font
-family
: Helvetica
,Arial
,sans
-serif
;
font
-weight
: 400;
direction
: ltr
;
font
-size
:13px
;
}
.submit
{
background
-color
: #
0070ba
;
color
:#fff
;
border
:1px solid #
0070ba
;
}
.submit
:hover
{
background
-color
:#
005ea6
;
}
.verBox
{
position
:absolute
;
width
:100%;
text
-align
:center
;
left
:404px
;
top
:0;
opacity
:0;
transition
:all
0.8s
;
padding
-top
:55px
;
}
.err
{
margin
:12px
0 0;
line
-height
:12px
;
height
:12px
;
font
-size
:12px
;
color
:red
;
}
</style
>
</head
>
<body>
<div style
="text-align:center;">
用户注册
</div
>
<div
class="logo-box">
<div
class="login" style
="">
</div
>
<div
class="bxs-row">
<input type
="text" class="username" name
="name" placeholder
="用户名" >
<p
class=" err err-username"></p
>
</div
>
<div
class="bxs-row">
<input type
="password" class="password" name
="pwd" placeholder
="密码">
<p
class="err err-password"></p
>
</div
>
<div
class="bxs-row">
<input type
="submit" class="submit btn" value
="注册">
</div
>
</div
>
<div
class="verBox">
<div id
="imgVer" style
="display:inline-block;"></div
>
</div
>
</div
>
<script>
登录界面
<!DOCTYPE html
>
<html lang
="en">
<head>
<meta charset
="UTF-8">
<title>登录界面
</title
>
<link type
="text/css" rel
="stylesheet" href
="css/style.css">
<!-- <script src
="js/jquery-1.10.2.js"></script
> -->
<script src
="js/jquery-3.3.1.min.js"></script
>
<script src
="js/img_ver.js"></script
>
<style>
.bxs
-row
{
margin
-bottom
:12px
;
}
.logo
-box
{
width
:404px
;
margin
:120px auto
;
border
:1px solid #e5e5e5
;
border
-radius
:4px
;
box
-shadow
:0 4px
18px
rgba(0,0,0,0.2);
position
:relative
;
overflow
:hidden
;
height
:360px
;
}
.login
{
position
:absolute
;
width
:320px
;left
:0;
top
:0;
padding
: 42px
42px
36px
;
transition
:all
0.8s
;
}
.username
,.password
,.btn
{
height
: 44px
;
width
: 100%;
padding
: 0 10px
;
border
: 1px solid #
9da3a6
;
background
: #fff
;
text
-overflow
: ellipsis
;
-webkit
-box
-sizing
: border
-box
;
-moz
-box
-sizing
: border
-box
;
box
-sizing
: border
-box
;
-webkit
-border
-radius
: 4px
;
-moz
-border
-radius
: 4px
;
-khtml
-border
-radius
: 4px
;
border
-radius
: 4px
;
-webkit
-box
-shadow
: none
;
-moz
-box
-shadow
: none
;
box
-shadow
: none
;
color
: #
000;
font
-size
: 1em
;
font
-family
: Helvetica
,Arial
,sans
-serif
;
font
-weight
: 400;
direction
: ltr
;
font
-size
:13px
;
}
.submit
{
background
-color
: #
0070ba
;
color
:#fff
;
border
:1px solid #
0070ba
;
}
.submit
:hover
{
background
-color
:#
005ea6
;
}
.verBox
{
position
:absolute
;
width
:100%;
text
-align
:center
;
left
:404px
;
top
:0;
opacity
:0;
transition
:all
0.8s
;
padding
-top
:55px
;
}
.err
{
margin
:12px
0 0;
line
-height
:12px
;
height
:12px
;
font
-size
:12px
;
color
:red
;
}
</style
>
</head
>
<body>
<div style
="text-align:center;">
用户登录
</div
>
<div
class="logo-box">
<div
class="login" style
="">
</div
>
<div
class="bxs-row">
<input type
="text" class="username" name
="name" placeholder
="用户名" >
<p
class=" err err-username"></p
>
</div
>
<div
class="bxs-row">
<input type
="password" class="password" name
="pwd" placeholder
="密码">
<p
class="err err-password"></p
>
</div
>
<div
class="bxs-row">
<input type
="submit" class="submit btn" value
="注册">
</div
>
</div
>
<div
class="verBox">
<div id
="imgVer" style
="display:inline-block;"></div
>
</div
>
</div
>
<script>
主界面
<!DOCTYPE html
>
<html>
<head>
<meta charset
="utf-8">
<title>首页
</title
>
<link rel
="stylesheet" type
="text/css" href
="css/bootstrap.min.css" />
<link rel
="stylesheet" type
="text/css" href
="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">
<!-- 广告
-->
<img src
="img/banner.png" class="img-thumbnail" style
="width: 1000px;height: 300px;" alt
="...">
<!-- 新书上架
-->
<div
class="news container">
<div
class="tip row">
<img src
="img/title_bj.png" />
<h5 style
="color: white;">新书上架
</h5
>
</div
>
<div
class="row book">
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
</div
>
</div
>
<!-- 热销
-->
<div
class="hots container">
<div
class="tip row">
<img src
="img/title_bj.png" />
<h5 style
="color: white;">热销图书
</h5
>
</div
>
<div
class="row book">
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="img/1.png" />
<p>冷间谍
</p
>
<b style
="color: red;">￥
12</b
>
</div
>
<div
class="col-sm-2">
<img src
="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
="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
>
购物车界面
<!DOCTYPE html
>
<html>
<head>
<meta charset
="utf-8">
<title>购物车
</title
>
<link rel
="stylesheet" type
="text/css" href
="css/bootstrap.min.css" />
<link rel
="stylesheet" type
="text/css" href
="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
>
结尾： 接下一篇将界面进行绑定数据后台.
