当前位置：首页 > article >正文

模仿淘宝htmlcss源码_仿淘宝商城源码html

article 2025/9/8 9:12:41

						<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">立即抢购&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>

</body>

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{