一个静态淘宝购物车网页练习
2024-05-15 07:00:48
一个静态淘宝购物车网页练习
话不多说，直接上代码！
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;width: 1903px;}body{background-image: url(img/背景.png);background-repeat: repeat-y;overflow-x: hidden;background-size: cover;font:12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;}a{text-decoration: none;}.top a:link{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #6c6c6c;}.top a:visited{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #6c6c6c;}.top a:hover{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #ff5100;}.top{height: 36px;background-color: #f5f5f5;border-bottom: 1px solid #eee;}.toplength{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #6c6c6c;margin: 0 auto;width: 1190px;height: 35px;}.top .left{width: 243.38px;height: 35px;display: inline-block;float: left;}.top .left .userli{display: inline-block;line-height: 35px;width: 85.38px;padding: 0px 6px; }.top .left li{display: inline-block;float: left;line-height: 35px;width: 79px;padding: 0px 6px;}.top .left .userbg{background-image: url(img/下.png);background-position: 67px 8px;background-repeat: no-repeat;}.top .right{width: 632.59px;height: 35px;display: inline-block;float: right;}.top .right #mytaobao{background-image: url(img/下.png);background-position: 60.5px 8px;background-repeat: no-repeat;}.top .right li{display: inline-block;float: left;line-height: 35px;width: 79px;padding: 0px 6px;}.top .right #goods{width: 72px;height: 35px;}.top .right #favorite{width: 84px;}.top .right #shop{width: 112px;}.top .right #shu{width: 14.59px;padding: 0px 5px;color: #DDDDDD;}.top .right #seller{width: 103px;}.shopcar{width: 53px;height: 35px;margin: 0px 7px 0px 0px;display: inline-block;}.shopcarlogo{width: 17px;height: 35px;background-image: url(img/购物车.png);background-position: -3px 4px;background-repeat: no-repeat;display: inline-block;vertical-align: middle;}.shopcar #car{display: inline-block;width: 36px;height: 35px;}/* Taobao logo以及搜索框的样式*/.Tbsl{background-color: #fff;height: 80px;margin: 0px 0px 24px;}.Tbsl #local{width: 1190px;height: 80px;margin: 0px auto;padding: 11px 0px;}.Tbsl #logo{display: block;width: 142px;background-image: url(img/淘宝logo.png);background-size: 142px 58px;float: left;margin: 0px 0px 0px -26px;padding: 58px 0px 0px;background-repeat: no-repeat;}.Tbsl #select{width: 424px;height: 42px;margin-top: 8px;border-radius: 21px;float: right;font-size: 12px;font-weight: 400;line-height: 18px;display: inline-block;background-color: #EBEBEB;}.Tbsl #select #ul{border-radius: 21px 0px 0px 21px;background-color: #F5F5F5;width: 106px;height: 42px;border-right: 1px solid #f5f5f5;border-left: 1px solid #f5f5f5;display: inline-block;float: left;}.Tbsl #select li{display: inline-block;width: 104px;height: 45px;}.Tbsl #select a{display: inline-block;width: 104px;height: 45px;line-height: 45px;text-align: center;}#select #floatleft{width: 320px;height: 42px;display: inline-block;position: absolute;}#floatleft #text{width: 236px;height: 42px;margin-right: 4px;display: inline-block;float: left;background-color: #EBEBEB;border: none;outline: none;}#floatleft #submitbg{background-color: #EBEBEB;}#floatleft #submit{display: inline-block;float: left;width: 81px;height: 38px;margin: 0px 0px 0px 2px;border-radius: 38px;border: none;background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;font-size: 18px;color: white;background-repeat: repeat-x;font-weight: 700;cursor: pointer;line-height: 38px;margin: 2px 0px;}.cbody{width: 1903px;height: 100%;}.cbody #bodylocal{width: 1190px;height: 100%;margin: 0px auto;border-radius: 24px;background-color: #FFFFFF;}#bodylocal #overview{padding: 0px 18px;width: 1190px;height: 73px;border-bottom: 1px solid rgb(230,230,230);}#overview #overleft{display: inline-block;color: #000;font-size: 18px;font-weight: 600;height: 72px;line-height: 72px;width: auto;}#overview #overright{display: inline-block;width: auto;height: 72px;line-height: 72px;float: right;}#overright #rightone{font-size: 14px;position: relative;top:-2px;}#overright #righttwo{font-family: Verdana,Arial;font-size: 22px;padding-left: 2px;font-weight: 500;font-style: normal;color: #FF5000;margin-right: 12px;margin-left: 4.22px;}#overright #settle{display: inline-block;width: 74px;height: 42px;line-height: 42px;background-color: #AAAAAA;border-radius: 21px;color: white;text-align: center;font-size: 16px;position: relative;top:-2px;text-decoration: none;}#listname{display: inline-block;width: 100%;height: 50px;line-height: 50px;font-size: 13px;font-weight: 700;color: #3C3C3C;}#listname #one{float: left;width: 80px;margin-right: -38px;margin-left: 8px;}#listname #two{float: left;width: 342px;padding-left: 117px;}#listname #three{float: left;width: 212px;padding-left: 10px;margin-right: 42px;}#listname #four{float: left;width: 130px;padding-left: 10px;}#listname #five{float: left;width: 120px;padding-left: 10px;}#listname #six{float: left;width: 140px;}#listname #seven{float: left;width: 102px;padding-left: 30px;}#one #all{width: 15px;height: 15px;line-height: 50px;position: relative;margin-left: 20px;vertical-align: text-bottom;margin-bottom: 1px;}#one #text{width: auto;}#commodity{height: auto;width: 1190px;}#commodity #storeone{display: inline-block;height: 38px;line-height: 38px;padding-left: 15px;}#storeone #one{display: inline-block;width: 15px;height: 15px;vertical-align: text-bottom;}#storeone #two{display: inline-block;width: 16px;height: 16px;background-image: url(img/来源标准.png);background-repeat: no-repeat;background-position: -20px -105px;margin: -6px 6px 0px 0px;vertical-align: text-bottom;}#storeone #three{color: #3C3C3C;font-size: 12px;font-weight: 400;}#storeone #four{display: inline-block;width: 20px;height: 20px;background-image: url(img/联系水滴.gif);background-repeat: no-repeat;background-position: -80px 0;vertical-align: text-bottom;margin-left: 15px;}#goodsone{display: inline-block;width: 1140px;height: auto;margin: 0px 24px;border: 1px solid #F5F5F5;border-radius: 18px;background-color: #F5F5F5;margin-bottom: 15px;}#goodsone #list{display: inline-block;width: 1140px;height: 41px;padding: 9px 0px 3px 0px;border-bottom: 1px solid #e8e8e8;color: #6C6C6C;}#list #one{display: inline-block;width: 50px;height: 24px;line-height: 41px;float: left;}#list #two{display: inline-block;width: auto;height: 22px;background-color: #e7e7e7;padding: 0px 8px;margin-right: 15px;float: left;}#list #three{display: inline-block;float: left;width: auto;height: 20px;}#three #threetext{color: #f40;width: auto;display: inline-block;font-family: verdana;line-height: 22px;}#goodsone #information{width: 1140px;}#information #goodslist{display: inline-block;float: left;padding-right: 12px;height: auto;width: auto;}#goodslist li{display: inline-block;float: left;width: auto;min-height: 119px;}#goodslist #choicediv{display: inline-block;float: left;width: 50px;height: 102px;padding-top: 20px;}#choicediv #choice{display: inline-block;width: 15px;height: 15px;float: right;margin: 1px 10px 0px 0px;}#goodslist #imagediv{display: block;width: 342px;padding-top: 20px;}#imagediv #image{display: block;width: 80px;height: 80px;background-image: url(./img/商品图标.jpg);background-repeat: no-repeat;float: left;}#goodslist #namediv{display: block;width: 239px;height: auto;margin-left: 91px;margin-top: -3px;padding-right: 12px;}#namediv #name{display: block;width: 239px;height: 40px;color: #3C3C3C;}#namediv #emp{display: block;width: 239px;height: 26px;}#namediv #serve{display: block;width: 239px;height: 26.73px;background-image: url(img/xcard.png),url(img/7天退换.png),url(img/消费者保障.png);background-repeat: no-repeat;background-position: left center,18px center,36px center;margin-bottom: 3px;}#goodslist #empdiv{display: block;width: 212px;height: 118px;padding: 16px 8px 16px 0px;border: 1px dashed transparent;}#goodslist #price{display: block;width: 130px;height: 54px;font-family: Verdana,Tahoma,arial;font-weight: 700;color: #3C3C3C;padding:20px 0px 0px 10px;}#goodslist #numbdiv{display: block;width: 120px;height: 45px;padding-top: 20px;left: 0px;}#numbdiv #button_sub{width: 19px;height: 25px;float: left;border: 1px solid #e5e5e5;border-left-color: transparent;}#numbdiv #numb{display: block;width: 41px;height: 25px;float: left;text-indent: 15px;appearance: none;border: 1px solid #AAAAAA;}#numbdiv #button_add{width: 19px;height: 25px;float: left;border: 1px solid #e5e5e5;border-left-color: transparent;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}#goodslist #amountprice{display: block;width: 140px;height: 35px;padding-top: 16px;color: #F40;font-style: normal;font-family: Verdana,Tahoma,arial;font-weight: 700;}#goodslist #aperatediv{display: block;width: 102px;height: 119px;padding-left: 30px;padding-top: 17px;float: left;}.cbody a:link{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #3C3C3C;}.cbody a:visited{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #3C3C3C;}.cbody a:hover{font-size: 12px;font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;color: #ff5100;text-decoration: underline;}#fixed_bottomdiv{position: static;display: block;width: 1190px;height: 73px;border-top: 1px solid #e6e6e6;}#local_bottomdiv{display: block;width: 1142px;height: 73px;margin: 0px auto;}#local_bottomdiv #one{display: block;width: 67px;height: 72px;padding-left: 5px;float: left;line-height: 72px;}#one #choice{display: inline-block;width: 15px;height: 15px;vertical-align: text-bottom;line-height: 72px;}#local_bottomdiv #two{display: block;width: 200px;height: 72px;float: left;}#two a{display: block;line-height: 72px;width: auto;height: 72px;margin-left: 25px;float: left;color: #3C3C3C;}#local_bottomdiv #rightdiv{display:block;height: 48px;width: auto;padding-left: 20px;float: right;}#rightdiv #three{display: block;height: 48px;width: auto;float: left;line-height: 72px;}#rightdiv #four{display: block;height: 48px;width: 29px;float: left;line-height: 72px;}#rightdiv #five{display: block;height: 48px;width: auto;float: left;line-height: 72px;}#rightdiv #six{display: inline-block;width: 74px;height: 42px;background: #B0B0B0;line-height: 42px;color: #fff;border-radius: 21px;text-align: center;font-size: 16px;font-family: 'Lantinghei SC','Microsoft Yahei';float: left;margin: 15.5px 0px;}#local_bottomdiv #numb{color: #f40;font-weight: 700;font-size: 20px;font-family: tohoma,arial;padding: 0px 5px;}.xiamian{display: block;width: 1903px;height: auto;background-color: #fff;text-align: center;margin-top: 20px;color: #6C6C6C;}.xiamian #textone{display: inline-block;width: 1190px;height: auto;padding-bottom: 8px;}</style></head><body><caption><div class="top"><!-- 这是网页顶部的盒子 --><div class="toplength"><!-- 这是包装列表的盒子 --><ul class="left"><li class="userli userbg"><a href="#">用户名</a></li><li><a href="#">手机逛淘宝</a></li><li><a href="#">网页无障碍</a></li></ul><ul class="right"><li><a href="#">淘宝网首页</a></li><li id="mytaobao"><a href="#">我的淘宝</a> </li><li id="goods"><div class="shopcar"><div class="shopcarlogo"></div><a href="#" id="car">购物车</a></div></li><li id="favorite"><a href="#"> 收藏夹</a></li><li id="shop"><a href="#">商品分类</a> <a href="#">免费开店</a></li><li id="shu">|</li><li id="seller"><a href="#">千牛卖家中心</a></li><li><a href="#">联系客服</a></li></ul></div></div></caption><thead><div class="Tbsl"><!-- Taobao和搜索的背景盒子 --><div id="local"><!-- Taobao和搜索的盒子 --><a id="logo"></a><!-- Taobao LOGO --><div id="select"><!-- 搜索框的盒子 --><ul id="ul"><!-- 搜索栏左侧 宝贝 --><li><a><span>
一个静态淘宝购物车网页练习相关推荐
- 测试网页版淘宝购物车
测试网页版淘宝购物车 界面测试: 1. 购物车页面布局是否合理,显示是否完整 2. 鼠标浮动在购物车图标,迷你购物车界面显示是否正常 3. 不同店铺的商品在不同的区域正确显示 4. 页面的菜单功能栏正 ...
- 如何使用字体图标做一个淘宝购物车案例
一:如何使用字体图标 代码如下 运行效果: 二:字体图标的线上用法 首先在阿里图标库:https://www.iconfont.cn/ 中找到自己想要的图形添加入库,在购物车中把素材添加到项目,然后在 ...
- HTML淘宝购物车页面的实现
一.实验目的和要求 本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件 使用表格标签.div标签.span标签.图像标签等实现效果设计 启用浏 ...
- 淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
- 2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
- 淘宝购物车分享上线第一天：630万人在用购物车社交
来源 | 电商在线(ID:dianshangmj) 作者 | 吴羚玮 编辑|斯问 当一年中最大的消费季到来,很多人开始关心,"你的购物车里有什么". 网购时代,几乎每个人都有一辆「 ...
- Android一点 仿淘宝购物车动画
首先看看ios上的淘宝购物车的动画效果ios淘宝购物车动画 我们实现的效果 看特效是分为两个界面,一个是主view,一个是弹出层.弹出层是用dialog实现的,只是加入了弹出的动画,这里就不分析了,我 ...
- 仿淘宝购物车demo 增加和减少商品数量
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在上一篇 ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
最新文章
- 为什么运营商玩不转物联网？
- BCH压力测试取得圆满成功，最大区块达21.3MB
- 简述可编程控制器硬件组态及网络通信的核心思想_智能硬件设计报价诚信经营...
- (技能篇)双机热备之Oracle切换故障处理
- matlab 矩阵jocobi迭代_高校MATLAB被禁用，掀起中国本土软件脆弱的冰山一角
- java手动线程池使用_Java手动配置线程池过程详解
- Java API概述及应用
- Linux基础：linux网络接口
- 容我说下windows linux macosx
- 转贴：Josephus问题
- Python-查看python版本-常用代码-VS编译器版本号
- 【Python】python中[-1]、[:-1]、[::-1]、[n::-1]使用方法；random.choice()
- 读书项目：ePub标准介绍
- 【ARMv8】异常级别的定义EL0、EL1、EL2、EL3
- PHP 在线预览文档
- do while循环语句的学习以及练习
- 树和二叉树的基本概念和相关计算
- .NetCore后台使用QrCode.Net根据网络链接生成二维码
- Android自定义view摇杆,Android 自定义摇杆控件（使用图片）
- 多核计算机是指有多个cpu,多核和多个CPU有什么区别？
热门文章