网上书城需求分析界面设计总结：这些只是前段样式，后续会把后面的实现代码显示出来需求分析界面设计登录界面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <link rel="stylesheet" type="text/css" href="bootstrap-4.4.1/css/bootstrap.min.c
需求分析
界面设计
登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<link rel="stylesheet" type="text/css" href="bootstrap-4.4.1/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>
<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="bootstrap-4.4.1/css/bootstrap.min.js"></script>
</body>
</html>
注册界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="bootstrap-4.4.1/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>
<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="bootstrap-4.4.1/css/bootstrap.min.js"></script>
</body>
</html>
主界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>飞凡网上书店</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<!--top-->
<div id="top_div">
<p class="left">您好，欢迎来到飞凡网上书店 ！</p>
<p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p>
<div class="fixed"></div>
</div>
<div id="header_div">
<div id="search">
<!--下面form标签的id属性不能修改，因为在css中使用了一个id选择器-->
<form id="form">
<table width="413" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" name="" value="" id="input">
</td>
<td>
<input type="image" name="imageField" src="images/btn_search.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--nav-->
<div id="nav">
<ul id="menu"></ul>
</div>
<!--end nav-->
<!--end top-->
<!--con-->
<div class="w960 mt10">
<div class="side left">
<h3>图书分类</h3>
<ul class="classify bgf7e4e4 bdf7e4e4">
<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>
<li> <a href="#">期刊</a></li>
<div class="fixed"></div>
</ul>
</div>
<div class="w740 right">
<div class="main_div">
<div class="banner left"><img src="images/banner.png" /></div>
<div class="fixed"></div>
</div>
<div class="main_div mt10">
<h2>
<cite class="left">新书上架</cite>
<div class="fixed"></div>
</h2>
<ul class="arivals">
<li>
<a href="#"><img src="imgs/9.png" /></a><p>爱的样子</p><p class="red">￥23.60</p>
</li>
<li>
<a href="#"><img src="imgs/8.png" /></a><p>时光走了你还在</p><p class="red">￥18.50</p>
</li>
<li>
<a href="#"><img src="imgs/7.png" /></a><p>AutoCAD入门到精通</p><p class="red">￥27.92</p>
</li>
<li>
<a href="#"><img src="imgs/6.png" /></a><p>Java从入门到精通</p><p class="red">￥29.90</p>
</li>
<li>
<a href="#"><img src="imgs/5.png" /></a><p>Python自动化运维</p><p class="red">￥58.60</p>
</li>
<div class="fixed"></div>
</ul>
</div>
<div class="main_div mt10">
<h2>
<cite class="left">热销图书</cite>
<div class="fixed"></div>
</h2>
<ul class="arivals">
<li>
<a href="#"><img src="imgs/1.png" /></a><p>冷间谍</p><p class="red">￥28.50</p>
</li>
<li>
<a href="#"><img src="imgs/2.png" /></a><p>第一商会</p><p class="red">￥24.80</p>
</li>
<li>
<a href="#"><img src="imgs/3.png" /></a><p>狂人摄影日记</p><p class="red">￥115.30</p>
</li>
<li>
<a href="#"><img src="imgs/4.png" /></a><p>伊文思与纪录电影</p><p class="red">￥39.60</p>
</li>
<li>
<a href="#"><img src="imgs/5.png" /></a><p>Python自动化运维</p><p class="red">￥58.60</p>
</li>
<div class="fixed"></div>
</ul>
</div>
</div>
<div class="fixed"></div>
</div>
<!--end con-->
<!--footer-->
<div id="footer_wrap">
<p>Copyright ©2014 飞凡教育，版权所有</p>
</div>
<!--end footer-->
</body>
</html>
搜索界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>飞凡网上书店</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<!--top-->
<div id="top_div">
<p class="left">您好，欢迎来到飞凡网上书店 ！</p>
<p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p>
<div class="fixed"></div>
</div>
<div id="header_div">
<div id="search">
<!--下面form标签的id属性不能修改，因为在css中使用了一个id选择器-->
<form id="form">
<table width="413" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" name="" value="" id="input">
</td>
<td>
<input type="image" name="imageField" src="images/btn_search.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--nav-->
<div id="nav">
<ul id="menu"></ul>
</div>
<!--end nav-->
<!--end top-->
<!--con-->
<div class="w960 mt10">
<div class="side left">
<h3>图书分类</h3>
<ul class="classify bgf7e4e4 bdf7e4e4">
<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>
<li> <a href="#">期刊</a></li>
<div class="fixed"></div>
</ul>
</div>
<div class="w740 right">
<div class="order02 pb10">
<dl class="findbook">
<dt class="left"><img src="imgs/1.png" /></dt>
<dd class="right">
<h4>冷间谍</h4>
<p><strong>作者：</strong>亨宁曼凯尔</p>
<p><strong>价格：</strong>￥28.50</p>
<p><strong>出版社：</strong>江苏文艺出版社</p>
<p><strong>书籍简介：</strong>东野圭吾最钦佩的欧洲犯罪小说大师力作。把“哈利波特”拉下畅销榜榜首的侦探小说。最匪夷所思的历史真相、最错综复杂的政治斗争、最神秘莫测的间谍形象，最完美的罪犯与最完美的犯罪，结局你永远猜不到</p>
<p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
</dd>
<div class="fixed"></div>
</dl>
<dl class="findbook">
<dt class="left"><img src="imgs/2.png" /></dt>
<dd class="right">
<h4>第一商会</h4>
<p><strong>作者：</strong>寒川子</p>
<p><strong>价格：</strong>￥24.80</p>
<p><strong>出版社：</strong>北京联合出版公司</p>
<p><strong>书籍简介：</strong>超级畅销书作家寒川子创作历时三年全新力作！讲述财富与权力“离不开，靠不住”的明暗法则</p>
<p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
</dd>
<div class="fixed"></div>
</dl>
<dl class="findbook">
<dt class="left"><img src="imgs/3.png" /></dt>
<dd class="right">
<h4>狂人摄影日记</h4>
<p><strong>作者：</strong>阿刘</p>
<p><strong>价格：</strong>￥115.30</p>
<p><strong>出版社：</strong>电子工业出版社</p>
<p><strong>书籍简介：</strong>风光大师段岳衡作序，凯斯.沃克尔、罗伊.莱姆赛、大卫.迪尔邦、佐尔坦.坎威尔、云漫、吴海辰、范朝亮、张焰八位中外摄影名家联名推荐</p>
<p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
</dd>
<div class="fixed"></div>
</dl>
<dl class="findbook">
<dt class="left"><img src="imgs/4.png" /></dt>
<dd class="right">
<h4>伊文思与纪录电影</h4>
<p><strong>作者：</strong>孙红云(译)</p>
<p><strong>价格：</strong>￥39.60</p>
<p><strong>出版社：</strong>吉林出版集团有限责任公司</p>
<p><strong>书籍简介：</strong>本书收录了世界各国著名学者（如比尔·尼克斯等）和伊文思研究专家（如吴沃·托马斯等）从社会、审美等方面研究伊文思纪录电影的15篇文章。文章的研究范围从伊文思创作的第一阶段“电影诗人”时期的《桥》、《雨》一直到封镜之作《风的故事》。书中还收入伊文思1931—1963年间写作的9篇文章，这些论文在欧洲也属于首次整理发表。本书还附录了伊文思的生平与创作年表等资料</p>
<p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
</dd>
<div class="fixed"></div>
</dl>
<dl class="findbook">
<dt class="left"><img src="imgs/5.png" /></dt>
<dd class="right">
<h4>Python自动化运维</h4>
<p><strong>作者：</strong>刘天斯</p>
<p><strong>价格：</strong>￥58.60</p>
<p><strong>出版社：</strong>刘天斯</p>
<p><strong>书籍简介：</strong>中国运维领域偶像级专家、腾讯高级系统工程师在天涯社区和腾讯近10年运维实践的经验和智慧结晶不仅详尽介绍了服务监控、数据报表、系统安全等基础模块，而且深入讲解了自动化操作、系统管理、配置管理、集群管理及大数据应用等高级功能，包含4个完整的综合案例</p>
<p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
</dd>
<div class="fixed"></div>
</dl>
</div>
<!-- page -->
<div style="text-align: right;">
每页 5 行 共 9 行 第 1 页 共 2 页 <a href='javascript:gotoPage(1)'>首页</a> <a href='javascript:gotoPage(1)'>上一页</a> <a href='javascript:gotoPage(2)'>下一页</a> <a href='javascript:gotoPage(2)'>尾页</a> 页数 <input type='text' id='pageNumber' style='width:20px;' /> <a href='javascript:jumpPage()'>GO</a>
</div>
<!-- end page -->
</div>
<div class="fixed"></div>
</div>
<!--end con-->
<!--end con-->
<!--footer-->
<div id="footer_wrap">
<p>Copyright ©2014 飞凡教育，版权所有</p>
</div>
<!--end footer-->
</body>
</html>
购物车界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>飞凡网上书店</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<!--top-->
<div id="top_div">
<p class="left">您好，欢迎来到飞凡网上书店 ！</p>
<p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p>
<div class="fixed"></div>
</div>
<div id="header_div">
<div id="search">
<!--下面form标签的id属性不能修改，因为在css中使用了一个id选择器-->
<form id="form">
<table width="413" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" name="" value="" id="input">
</td>
<td>
<input type="image" name="imageField" src="images/btn_search.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--nav-->
<div id="nav">
<ul id="menu"></ul>
</div>
<!--end nav-->
<!--end top-->
<!--con-->
<div class="w960 mt10">
<div class="side left">
<h3>图书分类</h3>
<ul class="classify bgf7e4e4 bdf7e4e4">
<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>
<li> <a href="#">期刊</a></li>
<div class="fixed"></div>
</ul>
</div>
<div class="w740 right">
<div class="order02">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="20%" class="bd2">书名</th>
<th width="20%" class="bd2">单价</th>
<th width="20%" class="bd2">数量</th>
<th width="20%" class="bd2">小计</th>
<th width="20%" class="bd2">操作</th>
</tr>
<tr>
<td width="20%" class="text">冷间谍</td>
<td width="20%" class="text">28.50</td>
<td width="20%" class="text">
<input class="input" style="width: 50px;text-align: center;" type="text" id="" value="1">
</td>
<td width="20%" class="text">28.50</td>
<td width="20%" class="text">
<a href="#">删除</a>
<a href="#">更新</a>
</td>
</tr>
<tr>
<td width="20%" class="text">第一商会</td>
<td width="20%" class="text">24.80</td>
<td width="20%" class="text">
<input class="input" style="width: 50px;text-align: center;" type="text" id="" value="1">
</td>
<td width="20%" class="text">24.80</td>
<td width="20%" class="text">
<a href="#">删除</a>
<a href="#">更新</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="bd2">
<tr bgcolor="#fefcea">
<td width="80%" align="right"><strong>订单总价：</strong></td>
<td width="20%" align="left"><strong><span class="STYLE1">53.30</span></strong></td>
</tr>
</table>
<table width="738" border="0" cellspacing="0" cellpadding="0" class="mt10">
<tr>
<td width="5%" align="center" ></td>
<td width="30%" align="center" >
<a href="#"><img src="images/btn_shoppingcart.png"/></a>
</td>
<td width="30%" align="center" >
<a href="#"><img src="images/btn_jxgm.png"/></a>
</td>
<td width="30%" align="center" >
<a href="#"><img src="images/btn_accounts.png"/></a>
</td>
<td width="5%"></td>
</tr>
</table>
</div>
</div>
<div class="fixed"></div>
</div>
<!--end con-->
<!--footer-->
<div id="footer_wrap">
<p>Copyright ©2014 飞凡教育</p>
</div>
<!--end footer-->
</body>
</html>
总结：
这些只是前段样式，后续会把后面的实现代码显示出来
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
