网上书城原型界面样式编写（1）
2024-05-18 13:36:25
原型界面样式编写
目录
- 原型界面样式编写
- 实现内容
- 代码块编写
- 总结
实现内容
1.用户登录注册界面编写
2.前台主界面编写
3.搜索书籍界面编写
4.购物车界面编写
代码块编写
用户登录注册界面代码
login.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><link rel="seylesheet" type="text/css" href="css/bootstrap.css"/><style>.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}@media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}}</style><style>.form-signin{position: relative;width:400px;top:200px;left:50%;margin-left:-200px;}</style></head><body class="text-center"><form class="form-signin" action="" method="post"><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 class="form-label-group"><input type="text" id="name" name="nmae" 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">© 2017-2020</p>
</form><script src="../bootstrap-4.4.1/dist/js/bootstrap.js"></script></body>
</html>register.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><link rel="seylesheet" type="text/css" href="css/bootstrap.css"/><style>.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}@media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}}</style><style>.form-signin{position: relative;width:400px;top:200px;left:50%;margin-left:-200px;}</style></head><body class="text-center"><form class="form-signin" action="" method="post"><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 class="form-label-group"><input type="text" id="name" name="nmae" 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">© 2017-2020</p>
</form><script src="../bootstrap-4.4.1/dist/js/bootstrap.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="data: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="data: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="data: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="data:images/btn_shopping.png" /></a><a href="#"><img src="data: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="data:images/btn_shopping.png" /></a><a href="#"><img src="data: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="data:images/btn_shopping.png" /></a><a href="#"><img src="data: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="data:images/btn_shopping.png" /></a><a href="#"><img src="data: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="data:images/btn_shopping.png" /></a><a href="#"><img src="data: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">您好admin，欢迎来到飞凡网上书店 ！</p><p class="right"><a href="#">后台管理</a> | <a href="#">退出系统</a> | <a href="#">网站首页</a></p><div class="fixed"></div>
</div><div id="header_div"><div id="search"><!--form的id与下面文本框的id不能修改，因为使用了id选择器定义样式--><form name="bookForm" id="form" method="post" action="#"><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="data:images/btn_search.png" /></td></tr></table></form></div>
</div><!--nav-->
<div id="nav"><ul id="menu"></ul>
</div>
<!--end nav--><!--end top--><!--content--><div class="w960 mt10"><div class="breadcrumb"></div></div><div class="w960"><div class="side left"><!--nav--><h4>书籍管理</h4> <ul class="classify E6"><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><h4>订单管理</h4> <ul class="classify E6"><li> <a href="#">未发货</a></li><li> <a href="#">已发货</a></li><li> <a href="#">已签收</a></li><div class="fixed"></div></ul><!--end nav--></div><div class="w740 right"><div class="o-mt"><h2>未上架书籍</h2></div><div class="order01"><form name="" method="post" action=""><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" ><tr><td width="15%" align="right">书名：</td><td width="15%"><input type="text" name="" value="" class="w110 input"></td><td width="15%" align="right"></td><td width="15%"><input type="image" name="imageField2" src="data:images/btn_cx.png" /></td><td width="15%" align="right"></td><td width="25%"></td></tr></table></form></div><div class="order02"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><th width="15%" class="bd2">书名</th><th width="15%" class="bd2">作者</th><th width="15%" class="bd2">价格</th><th width="25%" class="bd2">出版社</th><th width="30%" class="bd2">操作</th></tr><tr><td width="15%" class="text">冷间谍</td><td width="15%" class="text">亨宁曼凯尔</td><td width="15%" class="text">28.50</td><td width="25%" class="text">江苏文艺出版社</td><td width="30%" class="text"><a href="#">图片上传</a><a href="#">修改</a><a href="#">删除</a><a href="#">上架</a></td></tr></table></div><!-- page --><div style="text-align: right;">每页 5 行 共 1 行 第 1 页 共 1 页 <a href='javascript:gotoPage(1)'>首页</a> <a href='javascript:gotoPage(1)'>上一页</a> <a href='javascript:gotoPage(1)'>下一页</a> <a href='javascript:gotoPage(1)'>尾页</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 content--><!--footer--><div id="footer_wrap"><p>Copyright ©2014 飞凡教育，版权所有</p>
</div><!--end footer-->
</body>
</html>总结
今天的内容就这么多 每天都要加油哦！散会！
网上书城原型界面样式编写（1）相关推荐
- SSM+网上书城系统 毕业设计-附源码180919
目 录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...
- SSM+Layui网上书城系统 移动端Web开发
移动Web 与 原生应用的优劣势 一.移动 Web 的优势 跨平台: 网页应用运行在浏览器上,不会直接和系统打交道 开发成本低: Because 没有平台问题,开发者不需要掌握多种开发语言和框架 更容 ...
- 网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 网上书城项目的需求分析. ...
- 网上书城首页之书籍分类列表
网上书城首页之书籍分类列表 本章目标.实现首页书籍分类列表 一.开始编写代码 1.主界面index.jsp 2.单独写一个事件,和后台事件分开 index.js代码 3.然后在界面后面引用js 现在的 ...
- 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
- h5 -js-css的使用 -网上书城动态网站
编写程序:Visual Studio Code 大二学了html和css以后写的一个动态网站,写的不好望大家多多指正 <!DOCTYPE html> <html lang=" ...
- 网上书城的登录注册及书籍管理功能
登录注册及书籍管理功能 登录注册 实体类 dao包 web包 书籍管理 实体类 dao包 web包 mvc.xml的配置 界面代码及效果 界面代码 样式 界面效果 登录注册 登录注册所需要用的的实体类 ...
- 网上书城（功能模块三）
目录 目标 表结构(设计) 步骤 entity类 dao层 web层 页面 目标 1.使用自定义mvc编写模式+js(ajax) 2.通过编码实现页面与数据库进行数据绑定 3.书籍分类类别动态加载,新 ...
- 网上书城的门户首页功能
门户首页功能 前言 门户首页功能所需的的dao,web及辅助类 dao web 辅助类 首页界面 代码 css样式 js代码对应的界面 前言 门户首页功能是客户可以在这页面进行查看书籍 门户首页功能所 ...
最新文章
- 1-runtime的Method,IMP,Property,ivar
- jq封装post请求数据_GitHub - xiaohange/JQHttpRequest: GET／POST / PUT / DELETE 网络请求的封装...
- 浙江大学杭州国际科创中心招聘优秀青年人才（机器学习及大数据）
- CSS3动画---移动端上下固定高度，中间自适应
- HVV之WIFI蜜罐反制红队
- Android应用发布渠道汇总（更新中）
- java求二阶微积分方程特解_Scipy：实现微分方程的两种方法：两种不同的解决方案：回答...
- 三星5nm产品开发进度出问题，高通紧急向台积电求援
- 下发布可执行文件_IOS APP 发布过程中涉及相关概念
- 未找到uniwebview_UniWebView.dll
- linux系统安装firefox的flash player插件
- python社交网络图
- java界面添加动态背景图片
- 第二十四章 SQL函数 CEILING
- 安全标准ISO7498-2(Security Architecture)名词定义
- SURFRAD (Surface Radiation Budget) Network 数据下载
- RabbitMQ之集群管理
- 一些写英文简历的词汇
- 投资理财-傻姑娘香草山
- java Object类型的参数
热门文章
- php电商开源框架,Fecshop是基于php Yii2框架之上开发的一款优秀的开源电商系统
- linux屏幕亮度调整命令,linux下调节笔记本屏幕亮度方法-涉及命令lspci, setpci （转载）...
- 【个人网站搭建】GitHub pages+hexo框架下为next主题添加菜单分类页面
- codechef November Challenge 2017解题报告
- Java中如何解析SQL语句、格式化SQL语句、生成SQL语句？
- 新松机器人产业小镇_湘潭新松机器人产业园项目开工建设 点亮千亿级别产业...
- androidPN java.lang.NoClassDefFoundError: org.androidpn.client.解决方法
- Jetson TX2刷机踩坑总结
- Hot Restart Hot Reload
- POJ 1003 Hangover 水题