文章目录

  • 前言
  • 正文
    • 登录界面
    • 注册界面
    • 前台主界面
    • 搜索书籍界面
    • 购物车界面

前言

上篇文章做了需求分析和设计数据库表（传送门），今天来设计前端界面和编码。

正文

注意，下面的这些页面全部都要引用外部css文件，在这里附上css文件源码，为了防止出现问题，引用时推荐使用绝对路径，包括图片也是。

@charset "utf-8";
/*base.css*/
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td{margin: 0;padding: 0;}
img{ border: 0 none; vertical-align: top;}
ul, li{list-style-type: none;}
h1, h2, h3, h4, h5, h6{font-size: 16px;}
body, input, select, button, textarea{font-size: 12px;font-family: "宋体";}
button{cursor: pointer;}
i, em, cite{font-style: normal;}
body{color: #333;line-height:24px;background:#fff;}
a{color:#333;cursor: pointer;text-decoration: none;}
a:hover{color:#b20c0c; text-decoration:none;}
a:focus{outline: none;}
.fixed{clear: both;}
.left{float: left;}
.right{float: right;}
.center{ text-align:center;}
.pt10{ padding-top:10px;}
.pb10{ padding-bottom:10px;}
.input{ height:20px; background:#fff; border:1px solid #e3e4e4; line-height:20px; padding:1px 1px;}
.mt10{ margin-top:10px;}
.STYLE1 {color: #005EA7}
/*首页*/
.w960{ width:960px;margin:0px auto;}
.w960.mt10{ margin-top:10px;}
.w960.mt5{ margin-top:5px;}
#top_div{ width:960px; height:29px; line-height:29px; margin:0px auto;background: #f3f3f;border-bottom:1px solid #fff;}
#top_div p a{ margin:0 5px; line-height:29px; margin:0px auto;}
#header_div{ height:94px;width:960px; background:url(../images/header_div.png) no-repeat;margin:0px auto;}
#form{ width:413px; height:61px; float:left;padding:27px 313px 0 237px;}
#input{ width:331px; height:30px; background:#fff; border-bottom:1px solid #810603; border-left:1px solid #810603; border-right: none; border-top:1px solid #810603; line-height:30px;}
#search{ width:413px;float:left;}
#menu{width:960px;margin:0px auto;height:37px; line-height:37px;background:#b20c0c;}
#menu li{ float:left; font-size:14px; font-weight:bold; color:#FFFFFF;text-align:center; width:96px;}
#menu li#current{ width:96px; background:#710503;height:37px;color:#f4d0aa;}
#menu li a{ color:#FFFFFF;}
#menu li a:hover{color:#f4d0aa; text-decoration:none;}
.side{ width:210px;}
.side h3{ background:#710503; height:33px; text-indent:10px; font-size:14px; font-weight:bold; color:#FFF; line-height:33px;}
.side h4{ background-color: #CCCCCC;border-top: 2px solid #B5B5B5;color: #FFFFFF;height: 32px;line-height: 34px; text-indent:6px; width:210px;}
.E6{ border:1px solid #E6E6E6;}
.bdf7e4e4{ border:1px solid #f7e4e4;}
.bgf7e4e4{background:#f7e4e4;}
ul.classify{  padding-bottom:10px;width:208px;}
ul.classify li{ float:left; border-bottom:1px dashed #a19494; height:30px; line-height:30px; display:inline; width:182px; padding:0 12px;}
.w740{ width:740px;}
.main_div{}
.banner{ width:740px; height:178px;}
.banner img{ width:740px; height:178px;}
.login{ width:190px; border:1px solid #e3e4e4;}
.login h3{ background:url(../images/login_bj.png) repeat-x; height:32px;width:190px; line-height:32px; text-indent:10px;font-size:14px; font-weight:bold;}
.user{ padding:8px 8px 8px;}
.w110{ width:110px;}
.w180{ width:180px;}
.w300{ width:300px;}
table tr{ line-height:32px;}
table tr span{ margin:-5px 0 0 8px;}
.main_div h2{ width:740px; height:30px; background:#f7f6f6; border:1px solid #bebebe;}
.main_div h2 cite{ width:114px; height:30px; background:url(../images/title_bj.png) no-repeat; line-height:30px; text-indent:10px; color:#fff;}
.main_div h2 p{ margin:0 8px; font-size:12px; font-weight:normal;line-height:30px;}
.arivals{ padding:10px 5px;}
.arivals li{ float:left; width:100px; margin:0 18px;}
.arivals li img{width:80px; height:110px; text-align:center;}
.arivals li p{ext-overflow:ellipsis; white-space:nowrap; width:90px; text-align:center;}
.red{ color:red;}
.breadcrumb{ height: 20px;line-height: 20px;margin-bottom: 10px;overflow: hidden;padding: 0 0 4px 6px;vertical-align: baseline;}
.breadcrumb strong{display: inline;font-family: "microsoft yahei";font-size: 18px;font-weight: 700;line-height: 20px;}
.w740 .o-mt{height: 33px; line-height: 33px;border-bottom:2px solid #C30000; border-left:1px solid #E6E6E6;border-right:1px solid #E6E6E6;border-top:1px solid #E6E6E6; width:738px;}
.w740 .o-mt h2 {color: #CC0000;float: left;padding-left: 16px;}
.w740 .order01{line-height: 25px;padding:5px 0;border-bottom:1px solid #E6E6E6; border-left:1px solid #E6E6E6;border-right:1px solid #E6E6E6;}
.order02{border:1px solid #E6E6E6;}
.order02 th {background: url(../images/tb-th.2011.gif) repeat-x scroll 0 0 #F7F7F7;color: #666666;font-weight: normal; height: 31px;}
.order02 .pl9{padding-left: 9px;}
.text{ text-align:center;}
dl.findbook{border-bottom:1px dashed #A19494; padding:10px; width:718px;}
dl.findbook dt{ width:120; margin-right:20px;}
dl.findbook dt img{width:120; height:210px;}
dl.findbook dd{ width:540px;}
dl.findbook dd h4{ font-size:14px; font-weight:bold; color:#B20C0C;}
dl.findbook dd p{width:540px; word-break:break-all; line-height:26px;}
dl.findbook dd p a{ margin:0 5px;}
#footer_wrap{ width:960px; margin:0px auto;border-top:2px solid #dfdfdf;margin-top:10px;}
#footer_wrap p{ text-align:center; line-height:28px; padding:10px 0;}
/*登录*/
.logoin_wrap{ width:960px; margin:0 auto; border:1px solid #E6E6E6; }
.mt30{margin-top:10px;}
.logoin_wrap h2{ width:960px; height:30px; background:#E6E6E6; color:#000; text-indent:15px; }
#table{ padding:30px 0;}
#w202{ width:202px; float:left; margin-bottom:10px; margin-left:4px; margin-right:8px;}
.con_side{ width:200px; border:#c19d9d solid 1px;background:#ffeff0;}
.con_side h4{background:url(../images/con_side_title.png) no-repeat; width:200px; height:34px; line-height:34px; text-align: center;}
.logoin_con{background:#f8e3d2; width:960px; margin:0 auto; border:1px solid #4c0802;}
.logoin_header{ width:960px; height:60px; background:#b20c0c; color:#FFF; margin:0 auto;}
.logoin_con h1{font-size:22px; font-family:"微软雅黑"; margin-left:10px;line-height:60px;}
.logoin_header_right{ margin-right:15px; font-size:12px; font-weight:normal; text-align:right;}
.logoin_header_right a{ color:#FFFFFF;text-decoration: none;}
.logoin_header_right a:hover{ color:#FFFFFF; text-decoration:underline;}
.con_side_list{ width:200px; margin-top:10px;}
.pd200{ padding-bottom:200px;}
.con_side_list ul li{line-height:32px;font-size:14px;height:32px; float:left; width:160px; display:block;}
.con_side_list ul li.shopping{ background:url(../images/shoppingcart.png) no-repeat left center; text-indent:25px; margin-left: 10px;}
.con_side_list ul li.server{ background:url(../images/server.gif) no-repeat left center; text-indent:25px; margin-left: 10px;}
.con_side_list ul li.manager{ background: url(../images/blog.png) no-repeat left center; text-indent:25px; margin-left: 10px;}
#main{width:738px;border:#c19d9d solid 1px; float:left; background:#ffeff0;}
#main h5{ width:738px; background:url(../images/con_side_title.png) repeat-x; height:34px; line-height:34px; text-indent:10px;}
.table{ padding:10px 6px;}
table tr td a{color: #005EA7; text-decoration:none; margin:0 5px;}
table tr td a:hover{color: #005EA7; text-decoration:underline;}
table tr { height:28px; line-height:28px;}
.bd1 { border-bottom:1px solid #E6E6E6; border-left:1px solid #E6E6E6;}
.bd2 {border-bottom:1px solid #E6E6E6;}
.bd3{border-bottom:1px solid #E6E6E6; border-left:1px solid #E6E6E6; border-right:1px solid #E6E6E6;}
.bd4{border-top:1px solid #E6E6E6;}
.footer{ background:url(../images/footer_bj.png) no-repeat; width:960px; height:28px; margin:0px auto; }
.footer p{line-height:28px; text-align: center; color: #FFFFFF;}
.page{ width:340px; margin:0 auto; margin-top:15px; margin-bottom:15px;}
.page a{ border:1px solid #dddddd; padding:4px 9px; font-size:12px; color:#444; background:#FFF;}
.page span{ background:#a35917;padding:4px 9px; color:#FFFFFF;}
.btn{background-image: url(../images/back1.jpg);height: 23px;width: 82px;border:0px;margin:0px;padding:0px;}
span.required {color:red;font-size: 12px;font-family: "宋体";
}

登录界面

<!-- 顶部导航条 -->
<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="nav"><ul id="menu"></ul></div>
<!-- 主体表单部分 -->
<div class="logoin_wrap mt30"><h2>用户登录</h2><div id="table"><form><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="30px"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14">用户名：</td><td width="56%" align="left" valign="middle"><input type="text" name="" value="" id="" class="input w180"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14">密&nbsp;&nbsp;码：</td><td width="56%" align="left" valign="middle"><input type="password" name="" value="" id="" class="input w180"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14"></td><td width="56%" align="left" valign="middle"><!-- 图片按钮，与type=submit按钮的效果是一样，也可以用来提交表单 --><input type="image" src="${pageContext.request.contextPath }/static/images/admin_dl.png" /></td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>&nbsp;</td></tr></table></form></div>
</div>
<!-- 底部版权声明 -->
<div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p></div>

注册界面

<!-- 顶部导航条 -->
<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="nav"><ul id="menu"></ul></div>
<!-- 表单部分 -->
<div class="logoin_wrap mt30"><h2>用户注册</h2><div id="table"><form><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="30px"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14">用户名：</td><td width="56%" align="left" valign="middle"><input type="text" name="" value="" id="" class="input w180"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14">密&nbsp;&nbsp;码：</td><td width="56%" align="left" valign="middle"><input type="password" name="" value="" id="" class="input w180"></td></tr></table><table width="100%" height="35" border="0" cellpadding="0" cellspacing="0"><tr><td width="44%" align="right" valign="middle" class="f14"></td><td width="56%" align="left" valign="middle"><!-- 图片按钮，与type=submit按钮的效果是一样，也可以用来提交表单 --><input type="image" src="${pageContext.request.contextPath }/static/images/admin_zc.png" /></td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>&nbsp;</td></tr></table></form></div>
</div>
<!-- 底部版权声明 -->
<div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p></div>

前台主界面

<!-- 顶部导航条 -->
<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="${pageContext.request.contextPath }/static/images/btn_search.png" /></td></tr></table></form></div>
</div>
<!-- 红条分割线 -->
<div id="nav"><ul id="menu"></ul></div>
<!-- 主体部分 -->
<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="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/imgs/9.png" /></a><p>爱的样子</p><p class="red">￥23.60</p></li>    <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/8.png" /></a><p>时光走了你还在</p><p class="red">￥18.50</p></li>   <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/7.png" /></a><p>AutoCAD入门到精通</p><p class="red">￥27.92</p></li>  <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/6.png" /></a><p>Java从入门到精通</p><p class="red">￥29.90</p></li>    <li><a href="#"><img src="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/imgs/1.png" /></a><p>冷间谍</p><p class="red">￥28.50</p></li>  <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/2.png" /></a><p>第一商会</p><p class="red">￥24.80</p></li>  <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/3.png" /></a><p>狂人摄影日记</p><p class="red">￥115.30</p></li>   <li><a href="#"><img src="${pageContext.request.contextPath }/static/imgs/4.png" /></a><p>伊文思与纪录电影</p><p class="red">￥39.60</p></li>  <li><a href="#"><img src="${pageContext.request.contextPath }/static/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>
<!-- 底部版权部分 -->
<div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p></div>

搜索书籍界面


<!-- 顶部导航条 -->
<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="${pageContext.request.contextPath }/static/images/btn_search.png" /></td></tr></table></form></div>
</div>
<!-- 红条分割 -->
<div id="nav"><ul id="menu"></ul></div>
<!-- 主体部分 -->
<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="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a> </p></dd><div class="fixed"></div></dl><dl class="findbook"><dt class="left"><img src="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a> </p></dd><div class="fixed"></div></dl><dl class="findbook"><dt class="left"><img src="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a> </p></dd><div class="fixed"></div></dl><dl class="findbook"><dt class="left"><img src="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a> </p></dd><div class="fixed"></div></dl><dl class="findbook"><dt class="left"><img src="${pageContext.request.contextPath }/static/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="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a> </p></dd><div class="fixed"></div></dl></div> <!-- 分页条 --><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></div> <div class="fixed"></div>
</div>
<!-- 底部版权 -->
<div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p></div>

购物车界面

<!-- 顶部导航条 -->
<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="${pageContext.request.contextPath }/static/images/btn_search.png" /></td></tr></table></form></div>
</div>
<!-- 红条分割线 -->
<div id="nav"><ul id="menu"></ul></div>
<!-- 主体部分 -->
<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="${pageContext.request.contextPath }/static/images/btn_shoppingcart.png"/></a></td><td width="30%" align="center" ><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_jxgm.png"/></a></td><td width="30%" align="center" ><a href="#"><img src="${pageContext.request.contextPath }/static/images/btn_accounts.png"/></a></td><td width="5%"></td></tr></table></div></div>    <div class="fixed"></div>
</div>
<!-- 底部版权部分 -->
<div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p></div>

持续更新中，欲知后事如何请听下回分解。

网上书城项目前端界面设计及编码相关推荐

  1. 007 | JavaWeb传智播客网上书城项目源码(设计以及实现论文) | 大学生毕业设计 | 极致技术工厂

    1. 网站模块   前台:     * 用户模块     * 分类模块     * 图书模块     * 购物车模块     * 订单模块   后台:     * 管理员模块     * 分类管理模块 ...

  2. 网上书城项目之后台实现书籍分类、新书上架、热销图书

    网上书城项目 前言 书籍分类 效果演示 新书上架 效果演示 热销图书 效果演示 注意要点 总结 前言 嘿,今天为大家分享的知识点呢,是后台编码实现前端页面上的书籍分类.新书上架.热销图书这三个主要功能 ...

  3. 网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）

    转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 网上书城项目的需求分析. ...

  4. 网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)

    网上书城项目总结 1 项目大纲设计: 需求分析 系统设计 详细设计 权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...

  5. 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）

    网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...

  6. 网上书城项目描述（本人原创可以借鉴经验，但请勿抄袭）

    网上书城项目描述 一.项目概述&架构 1.项目概述 最近参与了一个网上书城的项目开发,它是一个B2C模式的电商网站,我们在开发过程中采用了前后端分离的开发模式,前端采用了vue框架,后端采用了 ...

  7. java-net-php-python-springboot网上书城项目计算机毕业设计程序

    java-net-php-python-springboot网上书城项目计算机毕业设计程序 java-net-php-python-springboot网上书城项目计算机毕业设计程序 本源码技术栈: ...

  8. （附源码）springboot电商系统前端界面设计与浏览器兼容性研究 毕业设计 231058

    基于springboot电商系统前端界面设计 摘  要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除 ...

  9. spring boot电商系统前端界面设计与浏览器兼容性研究 毕业设计-附源码231058

    摘  要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除在外,随着网络技术的不断成熟,带动了电商系统前 ...

最新文章

  1. Android include 标签使用
  2. python高频面试题_2019下半年金九银十Python高频面试题（第四弹）
  3. python安装包为什么这么小-python安装后为什么找不到包
  4. mac上配置php开发环境,Mac配置PHP开发环境
  5. Map之一个Key存多个Value的MultiValueMap(一个键多个值)
  6. HTML转图片利器：wkhtmltox
  7. Win11这个界面你肯定没见过
  8. 2W+汉字转拼音JS字库（UTF-8生僻字等通用无乱码）
  9. Ubuntu18.04安装可视化软件Pyviz
  10. matlab plotyy 标注,Matlab关于plotyy 标注 legend 的问题
  11. java strlen_字符串长度函数strlen和mb_strlen的区别示例介绍
  12. 未来新一代计算机发展趋势有,未来计算机的发展趋势
  13. [Python爬虫] Selenium实现自己主动登录163邮箱和Locating Elements介绍
  14. 计算机图形学：3D坐标系及左右手坐标的转换
  15. 基于springboot的疫情防控系统
  16. win7硬盘安装Fedora 20双系统
  17. 出自ios深入浅出专栏（内购）
  18. 达梦数据库开启sql日志及配置
  19. HTML页面调用md文件显示,javascript – 如何在html文件中包含markdown(.md)文件
  20. mysql 管理数据库和管理表笔记

热门文章

  1. linux飞信机器人,安装fetion飞信机器人
  2. linux屏幕亮度调整命令,linux下调节笔记本屏幕亮度方法-涉及命令lspci, setpci （转载）...
  3. Unity3d 技巧(5) 了解VR 游戏开发 美术和资源规范
  4. 一种为MP3生成字幕文件的方法
  5. 基于ZigBee的智能家居安全监控系统设计
  6. BACKUP - Backup Files
  7. 往事如烟 - 世上无难事
  8. 「tricks」整体DP
  9. 从零开始—仿牛客网讨论社区项目（六）
  10. 影评《北京爱情故事》告诉我们一些事