html---网上书城案例
2024-05-15 20:36:17
web前端入门之html（11）
网上书城案例简单实现
1.前期准备：
- 划分图片结构，分成7个部分，然后一个模块一个模块实现
- 查看网页上的图标，哪些是需要自己准备的（推荐阿里巴巴矢量库）
- 图标的大小，格式，路径，颜色等都要注意
- 网页上的图片和html的文件路径最好放在一个文件夹下
- 颜色搭配，可以用ps，axture等软件复制原来的图片颜色
2.代码：
<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/sublime%E7%BB%83%E4%B9%A0/csdn%E7%BB%83%E4%B9%A0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title>
</head>
<body>
<div id="page"><div id="top"><!-- table标签指定宽度 --><table width="100%"><tr><td width="70%"><img src="1.png" width="199" height="46"></td><td align="right"><img alt="" src="购物车.png" width="25" height="25" align="center"><a>购物车</a>|<a>帮助中心</a>|<a>我的帐户</a>|<a>新用户注册</a></td></tr></table></div><div id="menu"><table width="100%" bgcolor="#D52C27"><tr align="center"><td><a><font size=4 color="white">文化</font></a></td><td><a><font size=4 color="white">生活</font></a></td><td><a><font size=4 color="white">计算机</font></a></td><td><a><font size=4 color="white">外语</font></a></td><td><a><font size=4 color="white">经营</font></a></td><td><a><font size=4 color="white">励志</font></a></td><td><a><font size=4 color="white">社科</font></a></td><td><a><font size=4 color="white">学术</font></a></td><td><a><font size=4 color="white">少儿</font></a></td><td><a><font size=4 color="white">艺术</font></a></td><td><a><font size=4 color="white">原版</font></a></td><td><a><font size=4 color="white">科技</font></a></td><td><a><font size=4 color="white">考试</font></a></td><td><a><font size=4 color="white">全部商品</font></a></td></tr></table>
</div><div id="search"><table width="100%" bgcolor="#B4B486"><tr><td align="right">sesrch <input type="text"><input type="button" value="搜索"> </td></tr></table></div>
<div id="content"><div><h1>商品目录</h1><hr/><h1>计算机类</h1><h5>共**几种商品</h6><hr/></div><div><table width="100%" bgcolor="#C4BD90"><tr align="left"><td><font size=10 color="white">PRODUCT LIST</font></td></tr></table></div><div><table width="100%"><tr width="100%"><td align="center"><div ><img width=212 hight=257 src="杀死一只知更鸟.jpg"></div><span>书名：《杀死一只知更鸟》</span><br><span>价格：23.66元</span></td><td align="center"><div><img width=212 hight=257 src="飘.jpg"></div><span>书名：《飘》</span><br><span>价格：47.00元</span></td><td align="center"><div ><img width=212 hight=257 src="呼啸山庄.jpg"></div><span>书名：《呼啸山庄》</span><br><span>价格：32.50元</span></td><td align="center"><div ><img width=212 hight=257 src="安娜·卡列尼娜.jpg"></div><span>书名：《安娜·卡列尼娜》</span><br><span>价格：27.90元</span></td> </tr><tr width="100%"><td align="center"><div><img width=212 hight=257 src="茶花女.jpg"></div><span>书名：《茶花女》</span><br><span>价格：22.00元</span></td><td align="center"><div><img width=212 hight=257 src="简·爱.jpg"></div><span>书名：《简·爱》</span><br><span>价格：18.88元</span></td><td align="center"><div ><img width=212 hight=257 src="红与黑.jpg"></div><span>书名：《红与黑》</span><br><span>价格：23.00元</span></td><td align="center"><div ><img width=212 hight=257 src="包法利夫人.jpg"></div><span>书名：《包法利夫人》</span><br><span>价格：34.50元</span></td></tr></table></div><div id="foot"><table bgcolor="#EFEEDC" width="100%"><tr><td rowspan="2" width="50%" align="center"><img align="center" src="1.png"></td><td>联系我们</td></tr><tr><td>copyright 2008 @ BookStore ALL Right</td></tr></table></div></div></div>
</body>
</html>
3.截图对比
电脑长截图：ctrl+m，然后把文件后缀名改成图片格式
拉到ps里对比大小，颜色等
html---网上书城案例相关推荐
- JavaWeb之网上书城案例低保真
JavaWeb之网上书城案例低保真(本低保真目前适用于chrome) 首页页面: 注册页面: 登陆页面: 购物车页面: 付款页面: 成功页面: 失败页面:
- 【案例】全国知名网上书城——基于企业中台构建智慧悦读体验
"本项目案例由 端点科技 投递并参与由数据猿&上海大数据联盟联合推出的"行业盘点季之数智化转型升级"大型主题策划活动之<2021中国企业数智化转型升级创新服 ...
- 基于ssm整合的网上书城
基于ssm整合的网上书城 采用当前最流行的框架Spring-SpringMVC-MyBatis设计,分为前后台,前台用户可以购买书籍,后台管理员可以对书籍进行分类,增删改查 注意:本系统不支持jdk1 ...
- SSM+网上书城系统 毕业设计-附源码180919
目 录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...
- 【基于Web的网上书城——开题报告 分享（仅供参考呀）】
目录 一.选题的依据及意义 二.国内外研究现状及发展趋势 三.本课题研究内容 四.研究目标.主要特色及工作进度 五.参考文献 一.选题的依据及意义 网上购书的优势在于选择面大.价格便宜.交易方便.节省 ...
- 网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)
网上书城项目总结 1 项目大纲设计: 需求分析 系统设计 详细设计 权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...
- 大项目之网上书城（八）——数据库大改添加图书
目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...
- HTML期末作业-网上书城网上书店
HTML期末作业-网上书城网上书店,HTML+css+JavaScript,7个页面! 部分源码 <!DOCTYPE HTML> <html> <head> < ...
- 大项目之网上书城（十二）——完成啦
目录 大项目之网上书城(十二)--完成啦 主要改动 新增代码 1.addCategory.jsp 效果图 2.bookManager.jsp 效果图 3.userManager.jsp 效果图 4.e ...
最新文章
- 嵌入式多媒体设计7--QDockWidget大小调整及隐藏标题
- PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
- 学计算机专业的毕业证,对于计算机专业的同学来说，学历真的那么重要吗？
- 如何在 Janus 中获取 WebRTC 的流
- 你必须知道的Docker镜像仓库的搭建
- sqlalchemy与mysql区别_sqlite3和sqlalchemy有什么区别？
- 解决bash: mysql: command not found 的方法【linux mysql命令 】
- 程序员如何理解Gmail“撤销发送”功能
- 白鹭引擎写入文字图层方法实例
- 云应用性能管理哪家强？性能魔方mmTrix自动测评、检测与加速
- AndroidStudio_安卓原生开发_sharedpreferences清空---Android原生开发工作笔记150
- python从入门到精通需要多久-python从入门到精通需要多久？你需要先明白这两个点...
- python爬虫进程和线程的区别_Python爬虫 | 多线程、多进程、协程
- pandas数据归一化方法
- linux命令ftps,Linux下ftp+ssl实现ftps
- stata15中文乱码_Stata14打开13数据乱码处理办法
- 正睿OI DAY14 (ks=null)
- 18讲项目实战签证详细页
- 四年级计算机考试反思,四年级期中考试反思
- react Hook useState()