手机端电商购物车增减数量页面效果代码
代码语言:html
所属分类:电商
代码描述:手机端电商购物车页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <script> function setRem(){ var html=document.querySelector("html"); var width=html.getBoundingClientRect().width; html.style.fontSize=width/20+"px"; } setRem(); window.addEventListener("orientationchange",setRem); window.addEventListener("resize",setRem); </script> <style> *{margin: 0;padding: 0;} body{color: #444;background:white;} .header{ position: relative; width:100%; height: 2.25rem; font-size: 1rem; line-height: 2.25rem; color:#333; text-align: center; } .icon-zuojiantou{ position: absolute; left: 0.7rem; font-size: 1.5rem; } .icon-fenxiang{ position: absolute; right: 0.7rem; font-size: 1.5rem; } .one{ width: 100%; height:8.8rem; border-bottom:1px solid #000; position:relative; color: #fff; padding: 0.3rem; } .one .beijing img{ width:100%; height:8.8rem; } .one .login{ position: absolute; top:0; left:0; width:100%; height: 100%; background:rgba(0,0,0,0.5); } .one1{ width:25%; display: inline-block; vertical-align: top; } p{margin: 0;padding: 0;} .one1 img{ width:3rem; height: 3rem; border-radius: 15px; background: #000; margin-left: 0.8rem; margin-bottom: 0.5rem; margin-top: 1.25rem; } .one1 span{ font-size: 0.7rem; } .one1 .icon-jinakangbaoicons12{ font-size: 1rem; margin-left: 0.6rem; color:rgb(173,173,171); color: #fff; } .one2{ width:53%; display: inline-block; vertical-align: top; margin-top: 1.1rem; margin-left: -0.7rem; font-size: 0.7rem; line-height: 1.3rem; } .one2 .icon-dianhua{ font-size: 0.8rem; color:rgb(173,173,171); color: #fff; } .one2 .icon-weizhi{ font-size: 0.8rem; color:rgb(173,173,171); color: #fff; } .one2 .p1{ font-size: 1.1rem; margin-bottom: 0.2rem; } .one2 .s1{ margin-left: 1rem; margin-right: 2rem; } .one3{ width:18%; display: inline-block; vertical-align: top; text-align: center; margin-top: 2.2rem; margin-left: 0.5rem; } .one3 .i1{ display: inline-block; width: 1.7rem; height: 1.7rem; background: rgb(55,199,184); text-align: center; line-height: 1.7rem; border-radius: 1.7rem; margin-bottom: 1rem; } .one3 .icon-dianhua{ font-size: 0.9rem; } .one3 .icon-youjiantou{ font-size: 0.7rem; } .one4{ border-top:4px dashed #fff; width:90%; margin-left: 0.9rem; margin-top: 0.5rem; display: inline-block; font-size: 0.6rem; line-height: 2.2rem; } .one4 img{ width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; } .one4 span{ margin-right: 0.5rem; } .one4 .icon-youjiantou{ font-size: 0.8rem; margin-left: 1rem; } .two{ width:90%; height: 1.8rem; margin-left: 0.7rem; margin-top: 0.7rem; border-bottom: 2px solid #ccc; } .two li{ list-style:none; float: left; font-size: 1rem; margin-left: 4.5rem; } .two li:last-child{ width:3rem; text-align: center; margin-left: 4rem; border-bottom: 4px solid rgb(55,199,184); padding-bottom: 0.45rem; } .three{ display: inline-block; width: 90%; height: 5rem; margin-left: 0.7rem; border-bottom:1px solid #ccc; } .three .three1{ width:23%; display: inline-block; vertical-align: top; text-align: center; } .three .three1 img{ width:3.8rem; height: 3.8rem; margin-top: 0.5rem; } .three .three2{ width: 35%; display: inline-block; vertical-align: top; margin-top: 0.4rem; margin-left: 0.5rem; line-height: 1.2rem; } .three2 .p2{ font-size: 0.9rem; } .three2 .p3{ font-size: 0.6rem; color: #999; } .three2 .p3 span{ margin-left: 0.3rem; } .three2 .p4{ font-size: 0.9rem; color:red; } .three2 .p4 span:last-child{ font-size: 0.6rem; } .three .three3{ width: 30%; display: inline-block; vertical-align: top; line-height: 4.5rem; text-align: right; } .three .jia{ display: inline-block; vertical-align: top; } .three .icon-jiahao{ font-size:1rem; color: rgb(55,199,184); } .three .jian{ display: inline-block; vertical-align: top; } .three .icon-jianhao{ font-size:1rem; color: rgb(55,199,184); } .four{ width:100%; position: fixed; bottom: 0; } .four .top{ width: 3.5rem; height: 3.5rem; border-radius: 3.5rem; border:2px solid #999; margin-bottom:0.5rem; margin-left: 2rem; } .four .bottom{ position: absolute; left: 0; bottom:0; width:100%; height:3rem; border-top: 2px solid #999; background: #fff; } .bottom .last{ width: 0.8rem; height: 0.8rem; border-radius: 50%; background: red; color: #fff; margin-top: -3rem; margin-left: 2rem; font-size: 0.8rem; line-height: 0.8rem; } .four .four1{ float: left; width:3rem; height: 3rem; border-radius: 3rem; border:0.2rem solid #fff; margin-left: 2.1rem; margin-top: -1rem; background: #ccc; text-align: center; line-height: 3rem; } .four .icon-unie62d{ font-size: 1.5rem; font-weight: bold; color: #fff; } .four .four2{ float: left; font-size: 0.8rem; margin-top: 0.3rem; margin-left: 1rem; line-height: 1.2rem; } .four2 .p6 span{ color: red; font-size: 1rem; } .four2 .p5{ font-size: 0.7rem; } .four .four3{ float: left; width:5rem; height: 3rem; background: #ccc; position: fixed; right: 0; font-size: 1.2rem; color: #fff ; text-align: center; line-height: 3rem; } .loge{visibility: hidden;} .last{visibility: hidden;} </style> </head> <body> <div class="header"> <i class="fa fa-lg fa-angle-left" style="position: absolute;left: 0.7rem;top:0.6rem;"></i> <span>靓丽女装店</span> <i class="fa fa-lg fa-share-square-o" style="position: absolute;right: 0.7rem;top:0.6rem;"></i> </div> <div class="one"> <div class="beijing"> <img src="//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt=""> </div> <div class="login"> <div class="one1"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt=""> <i class="fa fa-heart-o" style="margin-left: 0.9rem;"></i> <span>收藏</span> </div> <div class="one2"> <p class="p1">魅丽图书专营店</p> <p> <span>电话:13888888888</span> </p> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0