一伪淘宝html网页
2024-05-10 19:36:57
<1>基于html、css、JavaScript编写的伪淘宝html网页
注：仅为前端代码还未利用Django框架连接后台数据进行交互。项目后续会连接python的Django框架实现更多功能！
效果展示：
网页代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a1 {background-color: #dddddd;height: 38px;line-height: 38px;}.a2 {background-color: #ff9000;height: 38px;line-height: 38px;}.a3{color: black;width: 5px;font-size: small}.a4{float: left;width: 90px;text-align: center}</style>
</head>
<body style="margin: 0">
<!--头部-->
<div class="a1"><div style="margin: 0 auto;width: 1200px"><div style="float: left">收藏本站</div><div style="float: right"><a href="float_.html" target="_blank">登陆</a><a href="float_.html" target="_blank">注册</a><a href="float_.html" target="_blank">我的订单</a><a href="float_.html" target="_blank">我的收藏</a><a href="float_.html" target="_blank">VIP会员俱乐部</a><form style="float: right"><select><option>客服服务</option><option>自助服务</option></select></form><a href="float_.html" target="_blank">手机端</a></div></div>
</div>
<!--第二部分-->
<div><div style="margin: 0 auto;width: 1200px"><div style="float: left;"><img src="taobao.png" style="height: 70px"></div><div style="float: right;margin-top: 5px"><span style="font-size: small"><a href="http://www.taobao.com" style="color: #FF4200">天猫</a><a href="http://www.taobao.com" style="color: #FF4200">店铺</a></span><br/><input type="text" style="height: 20px;width: 300px;"><input style="height: 25px" type="submit" value="搜索"><form style="background-color: #dddddd;width: 50px;height: 20px;display: inline"><select><option>购物车2件</option><option>购物车3件</option></select></form><div><span style="font-size: small">热门搜索:</span><span style="font-size: small"><a href="http://www.taobao.com" style="color: #FF4200">iPhone</a><a href="http://www.taobao.com">小米</a><a href="http://www.taobao.com" style="color: #FF4200">T-shirt</a><a href="http://www.taobao.com">连衣裙</a><a href="http://www.taobao.com" style="color: #FF4200">追风筝的人</a></span></div></div><div style="clear: both"></div></div>
</div>
<!--第三部分-->
<div class="a2"><div style="margin: 0 auto;width: 1200px"><div style="float: left"><div style="width: 190px;background-color: #FF4200;text-align: center;color: white">全部商品分类</div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">天猫</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">聚划算</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">天猫超市</a></div></div><div style="float: left"><div style="width: 10px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">|</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">淘抢购</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">电器城</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">司法拍卖</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">中国制造</a></div></div><div style="float: left"><div style="width: 10px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">|</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">飞猪旅行</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">智能生活</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">苏宁易购</a></div></div><div style="float: left"><div style="width: 80px;color: white;text-align: center;color: white"><a href="选择器.html" style="color: white">云栖大会</a></div></div><div style="float: left"></div></div>
</div>
<!--第四部分-->
<div style="margin: 0 auto;width: 1200px"><!--左面板块--><div style="float: left;"><div style="width: 188px;height: 1000px;text-align: center;border: 1px solid #ff9000"><a href="选择器.html" class="a3">女装</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">男装</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">外套</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">鞋靴</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">箱包</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">配件</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">家电</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">数码</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">手机</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">美妆</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">洗护</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">保健</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">珠宝</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">眼镜</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">手表</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">运动</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">户外</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">乐器</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">游戏</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">动漫</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">影视</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">美食</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">生鲜</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">零食</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">鲜花</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">宠物</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">农资</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">工具</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">装修</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">建材</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div></div><a href="选择器.html" class="a3">家具</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">家饰</a><a style="color: black;width: 5px">/</a><a href="选择器.html" class="a3">家纺</a><a href="选择器.html" class="a3" style="width: 20px;float: right"> ></a><div style="background-color: white;height: 30px"></div><div style="background-color: #ff9000;color: white;text-align: center">热销排行榜</div><div><a href="选择器.html" style="color: red;font-size: small">No1:Apple/苹果 iPhone X</a></div><div><img src="苹果x.jpg" style="width: 180px;height: 180px"></div><div><a href="选择器.html" style="color: red;font-size: small">No2:纪梵希口红小羊皮 半哑光唇膏豆沙色正品滋润304 306</a></div><div><img src="纪梵希3.png" style="width: 180px;height: 180px"></div></div></div><!--右面板块图--><div ><img src="纪梵希2.png" style="height:150px;width: 900px"></div><div style="height: 25px;background-color: white"></div><div style="font-size: small">所有分类></div><div style="height: 10px;background-color: white"></div><!--右面品牌框--><div style="border: 1px solid #d5d2d2;height: 140px;float: left;width: 900px"><div style="float: left;width: 70px;text-align: center;height: 42px"><span style="width: 70px;height: 42px">品牌：</span></div><div class="a4"><span ><a href="选择器.html" style="color: black">纪梵希</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">MAC</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">圣罗兰</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">迪奥</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">卡姿兰</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">欧莱雅</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">美康粉黛</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">Chanel</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">阿玛尼</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">美宝莲</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">雅诗兰黛</a></span></div><div style="background-color: white;height: 50px"></div><div style="float: left;width: 70px;text-align: center;height: 42px"><span style="width: 70px;height: 42px">选购：</span></div><div class="a4"><span ><a href="选择器.html" style="color: black">哑光</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">咬唇妆</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">不脱色</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">滋润唇膏</a></span></div><div style="background-color: white;height: 50px"></div><div style="float: left;width: 70px;text-align: center;height: 42px"><span style="width: 70px;height: 42px">产地：</span></div><div class="a4"><span ><a href="选择器.html" style="color: black">法国</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">咬加拿大</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">美国</a></span></div><div class="a4"><span ><a href="选择器.html" style="color: black">中国</a></span></div></div><!--右面商品选择--><div style="height: 150px;background-color: white"></div><div style="font-size: small">商品选择：</div><div style="height: 10px;background-color: white"></div><!--每个商品--><div style="float: left"><div style="border: 1px solid red;height: 290px;width: 200px;"><div><a href="选择器.html"><img src="纪梵希4.png" style="height: 180px;width: 200px"></a></div><div style="float: left;font-size: small;color: #ff9000;font-weight: bold">¥355.00</div><div style="float: right;font-size: small">30038人付款</div><div style="float: left;font-size: small;text-align: center"><a href="选择器.html"> 【官方正品】纪梵希口红小羊皮 半哑光唇膏豆沙色正品滋润304 306</a></div><!--<div style="color: #ff9000;float: left">☰</div>--><div style="height: 20px;background-color: white"></div><div style="float: left;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">☰GIVENCHY纪梵希官方旗舰店</a></div><div style="float: right;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">上海</a></div><div style="clear: both"></div><!--<div style="height: 2px;background-color: white"></div>--><div style="float: left"><img src="天猫.png" ></div><div style="float: right"><img src="聊天.png " style="width: 35px;height: 30px"></div><div style="clear: both"></div></div></div><!--间隔--><div style="height:280px;width:20px;background-color: white ;float: left "></div><!--2个--><div style="float: left"><div style="border: 1px solid red;height: 290px;width: 200px"><div><a href="选择器.html"><img src="迪奥.png" style="height: 180px;width: 200px"></a></div><div style="float: left;font-size: small;color: #ff9000;font-weight: bold">¥228.00</div><div style="float: right;font-size: small">30038人付款</div><div style="float: left;font-size: small;text-align: center"><a href="选择器.html"> Dior/迪奥烈艳蓝金唇膏3.5g哑光滋润旗舰口红520/999正品专营店</a></div><!--<div style="color: #ff9000;float: left">☰</div>--><div style="height: 20px;background-color: white"></div><div style="float: left;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">迪奥官方旗舰店</a></div><div style="float: right;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">北京</a></div><div style="clear: both"></div><!--<div style="height: 20px;background-color: red;float: left"></div>--><div style="float: left"><img src="天猫.png" ></div><div style="float: right"><img src="聊天.png " style="width: 35px;height: 30px"></div><div style="clear: both"></div></div></div><!--间隔--><div style="height:280px;width:20px;background-color: white ;float: left "></div><!--3个--><div style="float: left"><div style="border: 1px solid red;height: 290px;width: 200px"><div><a href="选择器.html"><img src="圣罗兰.png" style="height: 180px;width: 200px"></a></div><div style="float: left;font-size: small;color: #ff9000;font-weight: bold">¥228.00</div><div style="float: right;font-size: small">30038人付款</div><div style="float: left;font-size: small;text-align: center"><a href="选择器.html"> Dior/迪奥烈艳蓝金唇膏3.5g哑光滋润旗舰口红520/999正品专营店</a></div><!--<div style="color: #ff9000;float: left">☰</div>--><div style="height: 20px;background-color: white"></div><div style="float: left;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">迪奥官方旗舰店</a></div><div style="float: right;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">北京</a></div><div style="clear: both"></div><!--<div style="height: 20px;background-color: red;float: left"></div>--><div style="float: left"><img src="天猫.png" ></div><div style="float: right"><img src="聊天.png " style="width: 35px;height: 30px"></div><div style="clear: both"></div></div></div><!--间隔--><div style="height:280px;width:20px;background-color: white ;float: left "></div><!--4个--><div style="float: left"><div style="border: 1px solid red;height: 290px;width: 200px"><div><a href="选择器.html"><img src="雅诗兰黛.png" style="height: 180px;width: 200px"></a></div><div style="float: left;font-size: small;color: #ff9000;font-weight: bold">¥228.00</div><div style="float: right;font-size: small">30038人付款</div><div style="float: left;font-size: small;text-align: center"><a href="选择器.html"> Dior/迪奥烈艳蓝金唇膏3.5g哑光滋润旗舰口红520/999正品专营店</a></div><!--<div style="color: #ff9000;float: left">☰</div>--><div style="height: 20px;background-color: white"></div><div style="float: left;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">迪奥官方旗舰店</a></div><div style="float: right;color: #ff9000;font-size: smaller"><a href="选择器.html" style="color: #ff9000;font-size: smaller">北京</a></div><div style="clear: both"></div><!--<div style="height: 20px;background-color: red;float: left"></div>--><div style="float: left"><img src="天猫.png" ></div><div style="float: right"><img src="聊天.png " style="width: 35px;height: 30px"></div><div style="clear: both"></div></div></div></div></body>
</html>淘宝页面
转载于:https://www.cnblogs.com/shikaishikai/p/9698997.html
一伪淘宝html网页相关推荐
- 通过仿淘宝静态网页我的总结
学习了html和css,自己试着动手做了淘宝静态网页,(因为我觉得动手很重要)在动手完成的时候,脑子也同时会在思考. 问1.什么是网页布局? 网页布局是网页制作的基础: div+css布局网页 问2. ...
- 一个静态淘宝购物车网页练习
一个静态淘宝购物车网页练习 话不多说,直接上代码! <!DOCTYPE html> <html><head><meta charset="utf-8 ...
- html+css淘宝静态网页
引言 暑假自学了HTML和CSS,找了个淘宝首页来验证自己的学习成果. 项目源码百度网盘链接:https://pan.baidu.com/s/1Lwoddqk6YwfjSa9W-P_f4g 提取码:f ...
- QQ.阿里旺旺.淘宝.在线网页链接代码及详解
让他人在网页中可直接跟你的QQ或旺旺进行联系. 你可直接到官网去生成代码.简单.方便.相信都能上网的你了对这不会有难度的.认识字的就行.赶紧去吧. 1>阿里旺旺官网.http://alitalk ...
- web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
- 实现从淘宝（天猫）定时抓取订单数据、打印电子面单并保存到ERP表中
实现从淘宝(天猫)定时抓取订单数据.打印电子面单并保存到ERP表中 前言 实现思路 代码片段参考 前言 最近有厂商提出想把天猫店铺的数据拿到后台ERP管理系统中,并能实现线下打印电子面单功能.接手这个 ...
- 用Python爬取淘宝2000款套套，我发现了一个重要秘密
点击上方"码农突围",马上关注,每天早上8:50准时推送 真爱,请置顶或星标 一.淘宝商品信息爬取 这篇文章主要是讲解如何爬取数据,数据的分析放在下一篇.之所以分开是因为爬取淘宝遇 ...
- 用Python打造一个智能搜索淘宝商品，生成操作日志的系统
/1 前言/ 随着网购的兴起,使得很多传统店铺转型做线上生意,电子商务的产生极大便利了我们的生活. /2 项目目标/ 通过Python程序一键搜索并直达目的地,爬取淘宝商品链接,商品名称,及商品的图片 ...
- 实现从淘宝定时抓取订单数据、打印电子面单并保存到ERP表中！
前言 最近有厂商提出想把天猫店铺的数据拿到后台ERP管理系统中,并能实现线下打印电子面单功能.接手这个需求按照度娘给的指引,申请天猫开发者帐号,但是...大厂把订单传送接口关了,只对厂商自研软件开放, ...
最新文章
- Harmonic Number(调和级数+欧拉常数)
- Shiny平台构建与R包开发（四）——按钮与响应事件
- python描述器 触发事件_Python面向对象 - 描述器
- android根据项目把文件编译到文件系统中
- 官网上下载tomcat的linux版本
- leetcode 35. 搜索插入位置 思考分析
- QT的foreach用法
- [运动][组合]睡前运动
- python中的__new__、__init__和__del__
- 最受欢迎Java数据库访问框架大比拼，你独爱哪一款？
- Oracle10g expdp impdp
- 联想网络同传的工作日志
- 计算机知识博大精深,如何学好计算机之忠言逆耳
- 火星坐标系转百度php,PHP版本实现火星，高德地图和百度地图坐标转换
- php - 解决百万级全站用户消息推送问题
- 优化器介绍—SGD、Adam、Adagrad
- rabbitmq的安装与命令行管理工具rabbitmqadmin的使用
- SimpleITK笔记本中ITK细分(Segmentation)介绍
- Kubernetes安装系列之coredns安装
- 卷积神经网络的应用（人脸识别）