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: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/bg.jpg) top left no-repeat #3e5cd4; background-size: 100% auto; } img { vertical-align: middle; max-width: 100%; } .container { padding-top: 6.1rem; width: 6.35rem; margin: 0 auto; position: relative; } .logo { position: absolute; top: .27rem; left: 50%; transform: translateX(-50%); width: 1.02rem; height: .5rem; display: inline-block; background: url(//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png) top center no-repeat; background-size: 100% auto; } .item { width: 100%; height: auto; position: relative; margin-bottom: .3rem; } .item .top { font-size: .24rem; letter-spacing: .03rem; color: #fff; text-align: center; width: 6.35rem; height: 1.14rem; line-height: 1.24rem; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/box-bg-top.png) top center no-repeat; background-size: 100% auto; } .item .top span { position: absolute; right: .16rem; top: .18rem; font-size: .3rem; color: #fff; line-height: normal; letter-spacing: .01rem; } .item .content { font-size: .18rem; color: #5a5a5a; line-height: .45rem; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/box-bg-middle.png) top center repeat-y; background-size: 100% auto; padding: .2rem .55rem .5rem .55rem; margin-top: -.02rem; } .item .bottom { width: 6.35rem; height: .37rem; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/box-bg-bottom.png) top center no-repeat; background-size: 100% auto; margin-top: -.02rem; } .item .chain { display: flex; width: 100%; padding: 0 .52rem; justify-content: space-between; position: absolute; bottom: -0.62rem; z-index: 2; } .item .chain span { width: .23rem; height: .97rem; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/chain.png) top center no-repeat; background-size: 100% auto; } /* 表单 */ .item .content.form { padding-bottom: .2rem; } .form .form-item { display: flex; justify-content: space-between; align-items: center; font-size: .18rem; margin-bottom: .4rem; } .form .form-item label { flex-shrink: 0; padding-right: .55rem; font-size: .24rem; color: #333333; } .form .form-item input { width: 100%; height: .5rem; background: #f6f6f6; text-indent: .2rem; } .form .submit { width: 100%; padding-top: .3rem; text-align: center; } .form .submit button { display: inline-block; width: 3.95rem; height: .5rem; background: #ffac41; color: #fff; font-size: .24rem; letter-spacing: .02rem; } /* 报名须知 */ .need-know { width: 100%; height: 2.85rem; background: url(//repo.bfw.wiki/bfwrepo/images/huodong/baoming/waves.png) bottom center no-repeat; background-size: 100% auto; padding-top: .2rem; } .need-know h4 { font-size: .28rem; color: #ffffff; letter-spacing: .05rem; text-align: center; padding-bottom: .3rem; } .need-know .desc { font-size: .18rem; color: #ffffff; line-height: .4rem; padding: 0 .8rem; } </style> <script type="text/javascript".........完整代码请登录后点击上方下载按钮下载查看
网友评论0