HTML淘宝购物车页面的实现
一、实验目的和要求
本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下:
- 以纯文本格式保存为*.html文件
- 使用表格标签、div标签、span标签、图像标签等实现效果设计
- 启用浏览器,打开该文件或在地址栏中直接输入存放该文件的地址
二、 实验原理
- 首先通过IE/Firefox/Chrome浏览器输入:https://www.taobao.com/进入到淘宝网页,添加几个商品到购物车。
- 查看购物车,进入到购物车界面,并分析购物车界面的布局组成。
- 使用div标签,将整个页面划分为上中下相应的几个模块。
- 使用高级标签,包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾,对表格进行横向分组,将淘宝购物车分成相应的几部分。
- 列出几个小标题,比如单价、数量、金额、操作等。
- 根据个人确定的列,使用相应的图像标签、超链接、表单域等列出对应的内容。
- 最后用<tfoot>结尾,将最后的合计这一项跨列合为一项。(插入一个超链接,即点击结算即可跳转到付账的页面,也可以用一个按钮实现相应的功能操作)
三、 主要仪器设备、试剂或材料
Windows10操作系统、WebStorm
四、 实验方法与步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝购物车</title>
</head>
<body>
<div id="logo" style="float:left;" >
<img height="60" width="160" padding="10" src="images/taobao_logo.png" alt="logo">
</div>
<div id="grabble" style="height: 80px;width: 500px;float: right; ">
<br>
<form width="400px" height="60px" id="sousuo" action="http://www.taobao.com" method="get" name="搜索功能">
<input width="400px" height="60px" type="text" name="sousuo"/><input type="submit" value="搜索">
</form>
</div>
<div id="fudong" style="height:80px;width:400px;">
</div>
<div id="content">
<table width="95%" border="0">
<caption >
<p align="left">购物车(全部3)</p></caption>
<thead height="70">
<th>
<input id="allCheckBox" type="checkbox" value="全选"/>全选
</th>
<th width="25%" > 商品信息</th>
<th width="20%"> </th>
<th width="10%">单价</th>
<th width="10%">数量</th>
<th width="10%">金额</th>
<th width="10%">操作</th>
</thead>
<tbody >
<tr height="50">
<td >店铺:<a href="https://stylenanda3ce.tmall.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.77.7b207484vHbnNJ&user_number_id=4260076097"> 3CE官方旗舰店</a></td>
<td colspan="6">优惠券</td>
</tr>
<tr bgcolor="D3D3D3" height="150">
<td>
<input id="checkbox1" type="checkbox" value="选择"/>
<img src="images/3ce1.png" width="100px">
</td>
<td>
<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.80.7b207484vHbnNJ&id=631873305236&sku_properties=122276315:3289490"> 【直播节热卖】3CE丝绒唇釉唇泥 雾面显白保湿哑光慕斯口红玳瑁色 </a>
</td>
<td>
颜色分类:【热卖色】丝绒唇釉#DAFFODIL 「豆沙红」
款式:基本款
</td>
<td>¥110.00</td>
<td>1</td>
<td>
<input id="num1" type="text" value="110.00" readonly/>
</td>
<td><a href="#">移入收藏夹</a><br>
<a href="#">删除</a></td>
</tr>
</tbody>
<tbody >
<tr height="50">
<td >店铺:<a href="https://chioture.tmall.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.363.7b207484vHbnNJ&user_number_id=776151038"> 稚优泉化妆品旗舰店</a></td>
<td colspan="6">优惠券</td>
</tr>
<tr bgcolor="D3D3D3" height="150">
<td>
<input id="checkbox2" type="checkbox" value="选择"/>
<img src="images/zhiyouquan.png" width="100px">
</td>
<td>
<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.366.7b207484vHbnNJ&id=566736402567"> 稚优泉卸妆水眼唇脸三合一卸妆乳油膏敏感肌专用脸部温和清洁正品</a>
</td>
<td>
净含量:300ml
</td>
<td>¥59.90</td>
<td>2</td>
<td>
<input id="num2" type="text" value="119.80" readonly/>
</td>
<td><a href="#">移入收藏夹</a><br>
<a href="#">删除</a></td>
</tr>
</tbody>
<tbody >
<tr height="50">
<td >店铺:<a href="https://shop141214248.taobao.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.1.7b207484p2WKyN&user_number_id=2708019236"> 文文包袋厂</a></td>
<td colspan="6">优惠券</td>
</tr>
<tr bgcolor="D3D3D3" height="150">
<td >
<input id="checkbox3" type="checkbox" value="选择"/>
<img src="images/bag.png" width="100px">
</td>
<td>
<a href="https://item.taobao.com/item.htm?spm=a1z0d.6639537.1997196601.4.7b207484p2WKyN&id=595241703012"> 【新势力周】大容量书包女韩版高中森系可爱简约日系双肩包女学生ins校园原宿 </a>
</td>
<td>
颜色分类:灰色小号 不带蛙哥 放14寸电脑
</td>
<td>¥49.00</td>
<td>1</td>
<td>
<input id="num1" type="text" value="49.00" readonly/>
</td>
<td><a href="#">移入收藏夹</a><br>
<a href="#">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td height="130" colspan="2" align="left">
<input id="allCheck" type="checkbox" value="全选"/>全选
<a href="#">移入收藏夹</a>   <a href="#">删除</a></td>
</td>
<td colspan="5" align="right">
已选商品
<input type="text" value="0" readonly>件
合计(不含运费):<input type="text" value="0.00" readonly> 元
<a href="https://buy.tmall.com/order/confirm_order.htm?spm=a1z0d.6639537.0.0.undefined">结算</a>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="list">
<p align="center">关于淘宝 帮助中心 开放平台 诚聘英才 联系我们 网站合作 法律声明 隐私权政策 知识产权 廉正举报 规则意见征集</p>
<p align="center">阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 万网 | 高德 | UC | 友盟 | 虾米 | 钉钉 | 支付宝</p>
<p align="center">增值电信业务经营许可证: 浙B2-20110446</p>
<p align="center">网络文化经营许可证:浙网文[2015]0295-065号</p>
<p align="center">12318举报</p>
<p align="center">出版物网络交易平台服务经营备案证: 新出发浙备字第001号</p>
<p align="center">互联网违法和不良信息举报电话:0571-81683755 blxxjb@alibaba-inc.com</p>
<p align="center">互联网药品信息服务资质证书编号:浙-(经营性)-2017-0005</p>
<p align="center">浙公网安备 33010002000120号</p>
<p align="center">(浙)网械平台备字[2018]第00002号</p>
<p align="center"> 2003-2019 TMALL.COM 版权所有</p>
</div>
</body>
</html>
五、 实验数据记录、处理及结果分析
实验截图:
六、注意
1.注意浮动方面的问题,以及清除浮动的方式。网上也有很全的方法,不用局限于一种。
2.由于实现的页面简单,很多功能无法实现,有的链接也没有实现可跳转的页面,所以可以设置空连接。
3.仅采用html的基础代码,不包含CSS和JS,很简单,但也缺乏很对功能。需要后期完善补充。
4.涉及到一些文字、图像、超链接、<div>、表格,表单,布局等一系列知识。有便于巩固基础。
七、写在最后
有问题可评论区或私信联系,欢迎交流
HTML淘宝购物车页面的实现相关推荐
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 淘宝购物车页面测试用例
淘宝购物车的功能测试点有很多,这里我只写一部分,如图: 欢迎补充!!!!!!!!
- 淘宝购物车的测试点有什么?
1.界面测试 打开淘宝购物车页面后,页面的布局是否合理,是否完整. 不同卖家的商品在不同的table区域显示,区分明显. 页面的功能按钮可以正常显示. 商品的最下方显示失效宝贝. 页面的最低端显示&q ...
- 软件测试如何测试淘宝购物车
首先思考一下这个购物车实现了什么样的功能:以下图为例 分析测试点过程: 1.首先要梳理产品的核心业务流程,也就是明白这是个什么项目,实现了什么业务,以及是怎么实现的.这个步骤一般会参考公司的需求文档, ...
- vue实例--仿淘宝购物车
下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性:例如v-bind:class=&q ...
- 淘宝购物车分享上线第一天:630万人在用购物车社交
来源 | 电商在线(ID:dianshangmj) 作者 | 吴羚玮 编辑|斯问 当一年中最大的消费季到来,很多人开始关心,"你的购物车里有什么". 网购时代,几乎每个人都有一辆「 ...
- 测试网页版淘宝购物车
测试网页版淘宝购物车 界面测试: 1. 购物车页面布局是否合理,显示是否完整 2. 鼠标浮动在购物车图标,迷你购物车界面显示是否正常 3. 不同店铺的商品在不同的区域正确显示 4. 页面的菜单功能栏正 ...
- 仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
最新文章
- 深度学习 - 相关名词概念
- 新浪微博封装类,以及常见问题sdk修改
- 叶老师的对于数学的分析的摘抄!十分的认可!
- https 与 http
- 理财经理们都想用AI,但客户们不想用 | 福布斯报告
- 《图解深度学习》学习笔记(一)
- 学习单片机——MCS-51单片机的型号与组成
- 第八届蓝桥杯国赛 Java B组 第五题 标题:填字母游戏
- 蓝牙扫描startLeScan测试
- 计算机科学家手抄报图片,关于简洁又漂亮的科学手抄报图片
- 徒手撸了一个 API 网关,理解更透彻了,代码已上传github,自取~
- 志愿者积分兑换小程序开发制作
- 怎么调整计算机安全等级,win10电脑怎么设置安全等级_win10电脑设置安全等级的方法 - 系统家园...
- 深度学习入门笔记(三):求导和计算图
- Digilent FPGA开发板的Boards file的添加——以Eclypse-Z7为例
- 城市隧道洪涝监测预警方案
- 使用abel533大神的mybatis分页插件总结
- OSPF高级特性 —— 修改参考带宽值 + 修改优先级
- python学习笔记二——阅读MakeHuman程序源码小结
- win7计算机右键属性无法打开,win7计算机右键属性打不开怎么办