模仿淘宝htmlcss源码
2024-05-09 17:23:21
HTML
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>淘宝</title><link href="./theme.css" rel="stylesheet" /><style></style></head><body><div class="main"><div class="search-bar-top"><img class="icon icon-location" src="imgs/icon/sao1sao.png" ><span class="place">青岛</span><img class="icon icon-arrow-down" src="imgs/icon/icon_arrow_down.svg" ></div><div class="search-bar-button"><div class="btn-search"><img class="icon-search" src="./imgs/icon/icon_search.svg"/><span class="placeholder">搜索淘宝店铺，商品名称</span></div></div><!--第二层--><div class="searchbar-menu"><ul class="sesrchbar-2"><li><a><i class="searchbar-menu1 "></i><div>首页</div></a></li><li><a><i class="searchbar-menu2 "></i><div>百货</div></a></li><li><a><i class="searchbar-menu3 "></i><div>手机</div></a></li><li><a><i class="searchbar-menu4 "></i><div>男装</div></a></li><li><a><i class="searchbar-menu5 "></i><div>零食</div></a></li><li><a><i class="searchbar-menu6 "></i><div>生鲜</div></a></li><li><a><i class="searchbar-menu7 "></i><div>数码</div></a></li><li><a><i class="searchbar-menu8 "></i><div>更多</div></a></li></ul><div class="container"><div class="quick-nav"><div class="row"><a href="https://www.tmall.com/"><img src="imgs/icon/button1s.png"/><div>天猫</div></a><a href="vue.html"><img src="imgs/icon/button2s.png"/><div>聚划算</div></a><a href="#"><img src="imgs/icon/button3.png"/><div>淘金币</div></a><a href="#"><img src="imgs/icon/button4.png"/><div>饿了么</div></a><a href="#"><img src="imgs/icon/button5s.png"/><div>充值中心</div></a></div><div class="row"><a href="#"><img src="imgs/icon/button6.png"/><div>签到</div></a><a href="#"><img src="imgs/icon/button7s.png"/><div>VIP</div></a><a href="#"><img src="imgs/icon/button8s.png"/><div>旅行</div></a><a href="#"><img src="imgs/icon/button9s.png"/><div>口碑</div></a><a href="#"><img src="imgs/icon/button10.png"/><div>客服</div></a></div></div><div class="banner-first"><div class="left"><div class="title">好货推荐</div><div class="desc">限量秒杀</div><div class="btn-buy">立即抢购 ></div></div><img class="right" src="imgs/icon/haixin1.jpg" class="right" /></div><div class="banner-scroll"><img id="img" class="item" src="imgs/icon/lunbo1.jpg"/><div class="tips">直通车</div></div></div><div class="shops"><div class="title-bar"><span>推荐商品</span></div><div class="filter-bar"><div class="item"><span>综合排序</span><img class="icon icon-arrow-down" src="imgs/icon/icon_arrow_down_gray.svg" /></div><div class="item">销量排序</div><div class="item">好评最多</div><div class="item"><span>筛选</span><img class="icon icon-filter" src="imgs/icon/icon_filter.svg" /></div></div><div class="shop-list-container"><div class="not-found-result"><img class="img-not-found" src="./imgs/icon/weizhaodao.png"/><div class="title">没有结果</div><div class="desc">登录后查看更多商家</div><div class="btn-login">登录</div></div></div></div><div class="btn-top"><img class="icon icon-top" src="./imgs/icon/top.svg"/></div></div><div class="footer"><ul class="tab-menu"><li class="active"><a><i class="icon icon-home"></i><div>首页</div></a></li><li><a><i class="icon icon-found"></i><div>微淘</div></a></li><li><a><i class="icon icon-order"></i><div>消息</div></a></li><li><a><i class="icon icon-buycar"></i><div>购物车</div></a></li><li><a><i class="icon icon-me"></i><div>我的</div></a></li></ul></div>
<script>
var number=1; //图片的标号
function fun(){
number++;
if(number>3){ //只设置三张图片轮换
number=1}
var img=document.getElementById("img");
img.src="imgs/icon/lunbo"+number+".jpg";
}
setInterval(fun,3000); //三秒轮换，重复性
</script></body>
</html>
CSS
body{margin: 0;
}.footer{border-top:solid 1px rgb(236, 236, 236);height: 62px;background-color: white;position: fixed;bottom: 0;left:0;right:0;}
.footer .tab-menu{margin: 0;padding:0;list-style: none;display: flex;justify-content:space-around;
}
.footer .tab-menu li{flex:1;
}
.footer .tab-menu li a{text-align: center;display: block;padding:10px 0;color:#8e8e93;font-size: 14px;
}
.footer .tab-menu li a .icon{width:23px;height:23px;display: block;margin: 0 auto 2px auto;background-size: contain;
}
.footer .tab-menu li a .icon.icon-home{background-image: url("./imgs/icon/tab_item_home.svg");
}
.footer .tab-menu li a .icon.icon-found{background-image: url("./imgs/icon/tab_item_found.svg");
}
.footer .tab-menu li a .icon.icon-order{background-image: url("./imgs/icon/tab_item_order.svg");
}
.footer .tab-menu li a .icon.icon-me{background-image: url("./imgs/icon/tab_item_me.svg");
}.footer .tab-menu li a .icon.icon-buycar{background-image: url("imgs/icon/buycars.png");
}
.footer .tab-menu li.active a{color:#0085ff;
}.footer .tab-menu li.active a .icon.icon-home{background-image: url("imgs/icon/taobaofoot.png");
}
.footer .tab-menu li.active a .icon.icon-found{background-image: url("./imgs/icon/tab_item_found_active.svg");
}
.footer .tab-menu li.active a .icon.icon-order{background-image: url("./imgs/icon/tab_item_order_active.svg");
}
.footer .tab-menu li.active a .icon.icon-me{background-image: url("./imgs/icon/tab_item_me_active.svg");
}.main{margin-bottom: 64px;
}
.main .btn-top{position: fixed;right: 10px;bottom:84px;width:52px;height:52px;background-color: white;border-radius: 50%;border:solid 1px #999;display: flex;justify-content: center;align-items: center;
}
.main .btn-top .icon{width:24px;height:24px;
}
.main .btn-top .icon-top{}
.search-bar-top{height: 55px;background-image: linear-gradient(90deg,#FF9900,#F7F709);display: flex;align-items: center;padding:0 20px;
}
.search-bar-top .icon-location {width: 16px;height:20px;vertical-align: middle;
}
.search-bar-top .place{font-size: 23px;color:white;font-weight: bold;vertical-align: middle;margin:0 5px;
}
.search-bar-top .icon-arrow-down{width:8px;height:5px;vertical-align: middle;
}
.search-bar-button{height: 63px;background-image: linear-gradient(90deg,#FF9900,#F7F709);display: flex;align-items: center;
}.search-bar-button .btn-search{flex:1;height:44px;margin:0 20px;background-color:white;border-radius: 2px; display: flex;align-items: center;justify-content: center;
}
.search-bar-button .icon-search{width:18px;height:18px;vertical-align: middle;
}.search-bar-button .placeholder{font-size:18px;color:#999;font-weight: 100;vertical-align: middle;margin-left: 5px;
}.quick-nav{padding-bottom: 34px;}.quick-nav .row{display: flex;justify-content: space-around;padding:6px 0;}.quick-nav a{display: block;text-decoration: none;color: #666;font-size: 15px;text-align: center;}.quick-nav a img{height: 55px;width: 55px;}.quick-nav a div{}/* Banner 区域定义 */.container{padding:0 10px;
}
.banner-first{box-sizing: border-box;height:135px;margin-bottom: 5px; background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);padding:14px 18px;
}
.banner-first .left{float: left;}
.banner-first .left .title{font-size:23px;font-weight: bold;
}
.banner-first .left .desc{font-size: 17px;color: #777;margin:3px 0;
}
.banner-first .left .btn-buy{font-size: 15px;font-weight: 700;color: #af8260;
}
.banner-first .right{float:right;
}
.banner-first .right{width:173px;height:115px;
}
.banner-scroll{box-sizing: border-box;height:300px;overflow: hidden;position: relative;
}
.banner-scroll .item{width:100%;height: 100%;background-size: contain;
}
.banner-scroll .tips{position: absolute;right:5px;bottom: 0;width: 67px;height: 23px;border-radius: 11.5px;background-color: rgba(0,0,0,0.5);color:white;font-size: 12px;text-align: center;line-height: 23px;
}/* 商家 */.shops{
}
.title-bar{margin:10px 10px;height:44px;font-size: 18px;line-height: 44px;text-align: center;
}
.title-bar::before{display: inline-block;content: "";width:25px;height:1px;background-color: black;vertical-align: middle;margin-right: 10px;
}
.title-bar::after{display: inline-block;content: "";width:25px;height:1px;background-color: black;vertical-align: middle;margin-left: 10px;
}
.filter-bar{display: flex;align-items: center;padding:0 10px;margin-bottom: 10px;
}
.filter-bar .item{flex-grow:1;color: #666;
}
.filter-bar .item span{vertical-align: middle;
}
.filter-bar .item .icon{vertical-align: middle;
}
.filter-bar .item .icon.icon-arrow-down{width:7px;height:4px;
}.filter-bar .item .icon.icon-filter{width:14px;height:14px;
}
.filter-bar .item{text-align: center;
}
.filter-bar .item:first-child{text-align: left;
}
.filter-bar .item:last-child{text-align: right;
}.shop-list-container{
}/* 没有搜索结果 */
.not-found-result{text-align: center;padding-bottom: 15px;
}
.shop-list-container .not-found-result .img-not-found{width:127px;height:127px;background-size: contain;
}.shop-list-container .not-found-result .title{color: #6a6a6a;font-weight: 400;font-size: 20px;line-height: 24px;
}.shop-list-container .not-found-result .desc{color: #999;font-weight: 400;font-size: 12px;line-height: 40px;
}.shop-list-container .not-found-result .btn-login{width:147px;height:43px;color:white;background-color: #56d176;border-radius: 3px;line-height: 43px;font-size: 14px;display: inline-block;
}.searchbar-menu{border: solid 1px yellow;height: 40px;background-image: linear-gradient(90deg,#FF9900,#F7F709);}
.searchbar-menu .sesrchbar-2{margin: 0;padding: 0;list-style: none;display: flex;justify-content: space-around; }
.searchbar-menu .sesrchbar-2 li{flex: 1;}
.searchbar-menu .sesrchbar-2 li a{text-align: center;display: block;padding: 10px 0 ;}
整体效果
模仿淘宝htmlcss源码相关推荐
- 吱口令代付|淘宝天猫教程|找人代付|淘宝代付源码
吱口令代付|淘宝天猫教程|找人代付|淘宝代付源码 转载于:https://github.com/apppay/dfpay
- 闲鱼代付|淘宝天猫订单监控|找人代付|淘宝代付源码/协议监控源码
闲鱼代付|淘宝天猫订单监控|找人代付|淘宝代付源码/协议监控源码 <head><meta charset="utf-8"> <title> 淘宝 ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
- 模仿淘宝web扫码登录
项目中使用到了类似支付宝扫描二维码登录web淘宝业务,整体思路整理了一下. 1.点击事件触发二维码登录切换. 2.切换样式,进入扫码登录页.请求服务端接口,获取唯一二维码code,UUID. 3.服务 ...
- C#实现的两个淘宝插件源码
淘宝账户看门狗C#源码: http://download.csdn.net/source/1969369 淘宝账户看门狗C#源码:http://download.csdn.net/source/196 ...
- 高级UI- 属性动画炫酷动画案例+淘宝动画+源码解析+策略模式使用
文章目录 属性动画源码: 案例1 案例2 最终效果 思路 : 代码 TODU 案例3 加载的炫酷动画. 以及策略模式的使用 效果图 思路 动画分析 先实现小圆的旋转动画, 开始在ondraw里面写动画 ...
- python模拟登录淘宝_Python模拟登陆淘宝示例源码
[实例简介] [实例截图] [核心代码] # -*- coding: utf-8 -*- import requests import re class TaoBao: def __init__(se ...
- 非凡网络 最新钓鱼程序 最新钓鱼源码 QQ空间钓鱼源码 淘宝钓鱼源码 ff999.cn
欢迎访问我的网站http:// ff999.cn 里面有 最新各种钓鱼程序源码 提供下载 QQ空间钓鱼 YY钓鱼程序源码 QQ安全中心 等等精品源码 请记住我们的永久域名 ff999.cn 非凡网络
- 前端学习（927）：淘宝flexiblejs源码分析之pageshow原理
最新文章
- 源路由 就是指定数据传输经过这个路由服务器
- linux下nginx部署以及配置详解
- CVE-2021-35211： SolarWinds Serv-U SSH 漏洞分析
- Docker将镜像上传至私有仓库
- linux禁止修 5在线阅读,linux – 如何在不重新编译内核的情况下禁用CentOS 5.3中的nf_conntrack内核模块...
- Discuz素材资源下载官网门户+自带论坛 整站源码+带后台+带数据库
- getchar吸收回车
- 计算机网络是几级学科,教育部更新学科目录 “网络空间安全”增设为一级学科...
- ERStudio 安装
- 在超市使用室内地图的5个好处
- 微信开发工具(小程序)
- yum执行出错，There are no enabled repos
- 计算机中图形和图像这两个概念的异同,图形图象处理
- 校园实践-校园二手交易项目组-墨刀原型
- UDP是全双工通信的吗
- windows10安装更新很慢ndows,Windows 10升级太慢了？这里有俩窍门
- python多维数组分位数的求取
- Android 9 (P)之init进程启动源码分析指南之三
- 使用zinnia制作android手写输入功能(上)-------------------编译zinnia
- 快速打开控制面板中的功能项