mint ui模仿淘宝手机端app登录页面h5效果代码
代码语言:html
所属分类:布局界面
代码描述:mint ui模仿淘宝手机端app登录页面h5效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css"> <!-- 引入样式 --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mintui.min.css"> <style> /* 你需要登录才能继续仿问的布局样式 */ .tipslogin { display: flex; justify-content: space-between; align-items: center; height: 52px; background: rgb(238, 238, 238); padding-left: 20px; padding-right: 20px; } /* 半闭样式 */ .closeSpan { color: rgb(153, 153, 153) } /* 图片 logo 根样式 */ .imgDiv { display: flex; justify-content: center; } /* 图片样式 */ .logo { width: 80px; height: 80px; } /* 上面的线隐藏 */ .mint-cell-wrapper { background-image: linear-gradient(180deg, #fff, #fff 0%, transparent 0%); } /* 输入框底边框样式 */ .mint-cell-wrapper { border-bottom: 1px solid #ff5000; } /* 修改按钮按钮下的默认颜色 */ .mint-button::after { background-color: transparent; } /* 操作区域的样式*/ .operateDiv { padding-left: 20px; padding-right: 20px; } /* 输入框边距 */ .myinput { margin-top: 30px; } /* 获取短信验证码字体颜色 */ .getCode { color: #ff5000; font-size: 17px; border-left: 1px solid #b5b5b5; padding-left: 7px; } /* 免费注册根样式 */ .registerDiv { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } /* 免费注册字体样式*/ .registerDiv span { color: #555; } /* 登录短信验证按钮边距 */ .mybutton { margin-top: 20px; } /* 修改默认 butoon 的样式 达到和淘宝登录一样 */ .mint-button--default { background: -webkit-linear-gradient(left,#ff9000,#ff5000) no-repeat; border-radius: 25px; color: #fff; height: 48px; } /* 同上 */ .mint-button--primary { border-radius: 25px; height: 48px; background-color: transparent; border: 1px solid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0