css布局实现移动端手机端电商秒杀页面代码-html代码-BFW代码库

css布局实现移动端手机端电商秒杀页面代码

代码语言：html

代码描述：css布局实现移动端手机端电商秒杀页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>秒杀</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
    *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
body{width: 100%;overflow-x: hidden;background-image:linear-gradient(to right bottom,#fb4471,#e1221d);background-size: 100% 3.35rem;background-repeat: no-repeat;background-color: #f3f3f3;color: #ffffff;}
img{vertical-align: middle;max-width: 100%;}
.container{width: 100%;padding: 0 .4rem;}
/*顶部标题返回*/
.top-bar{position: absolute;top: 0;left: 0;display: flex;align-items: center;width: 100%;height: 1.2rem;position: relative;padding: 0 .3rem;}
.top-bar i{display: inline-block;width: .5rem;height: 1.2rem;background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png) left center no-repeat;background-size: .37rem .40rem;position: relative;z-index: 3;}
.top-bar .title{position: absolute;height: .4rem;width: 100%;text-align: center;left: 0;font-size: .32rem;z-index: 2;}
.container{width: 100%;padding: .3rem .3rem .5rem .3rem;}
/* 时间段 */
.time-section{width: 100%;padding: 0 .1rem;}
.time-section ul{display: flex;justify-content: space-between;align-items: center;}
.time-section ul li{font-size: .34rem;display: flex;flex-direction: column;justify-content:space-between;height: .8rem;position: relative;text-align: center;}
.time-section ul li span{font-weight: bold;color: #f78998;}
.time-section ul li span.status{font-size: .24rem;font-weight: normal;}
.time-section ul li span:last-child{margin-top: .05rem;}
.time-section ul li.active span{color: #fff;}
/* 推荐 */
.recommend{width: 100%;margin-top: .5rem;margin-bottom: .15rem;background: #ffffff;border-radius: .25rem;padding: .3rem .25rem .35rem .25rem;}
.recommend h2{display: flex; align-items: center;color: #333333;padding-bottom: .25rem;display: flex;justify-content: space-between;}
.recommend h2 span{font-size: .28rem;color: #000;padding-left: .05rem;font-weight: bold;}
.recommend h2 a{font-size: .24rem;color: #e1221d;padding-right: .1rem;}
.group{width: 100%;}
.group.recommend .item{padding-top: 0;margin-bottom: 0rem;}
.group.recommend .item ul{display: flex;justify-content: space-between;}
.group.recommend .item ul li a{display: block;margin: 0 .03rem;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.group.recommend .item ul li img{width: 100%;padding-bottom: .15rem;}
.group.recommend .item ul li span{font-size: .32rem;color: #e1221d;display: flex;align-items: baseline;}
.group.........完整代码请登录后点击上方下载按钮下载查看