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 ...
最新文章
- python import io_详解Python IO编程
- uboot readme 文件 (1)
- python replace函数_Python3 replace()函数使用方法
- 深入理解 Java 线程池：ThreadPoolExecutor
- DataWorks搬站方案：Azkaban作业迁移至DataWorks
- 【Intellij Idea】设置JDK
- 74HC595芯片使用说明
- python弹球小游戏程序_Python实现弹球小游戏
- Leetcode | Implement strStr()
- JAVA日期安全格式化之SimpleDateFormat和jodaTime,DateTimeFormatter
- Chrome 清除当前网站下的缓存
- Android实时直播，一千行java搞定不依赖jni，延迟0.8至3秒，强悍移动端来袭
- [转]游戏多开的原理
- js之好玩的特效黑洞粒子效果[1]
- 好消息，高清版谷歌卫星地图终于可以正常使用了
- 宝讯网捷:拼多多商家如何做好运营？
- 惠普暗影精灵8 Pro酷睿版和锐龙版的区别 哪个更值得入手
- html 复选框 不能编辑,javascript-jqGrid-复选框编辑无法编辑所选行
- Java-JSOUP(爬虫)
- 2022河南萌新联赛第（二）场