admin管理员组

文章数量:1026989

模仿淘宝htmlcss源码

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="/"><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">立即抢购&nbsp;&gt;</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源码

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="/"><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">立即抢购&nbsp;&gt;</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源码

版权声明：本文标题：模仿淘宝htmlcss源码 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/IT/1694670956a254871.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。