css布局手机端移动端每日签到做任务页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局手机端移动端每日签到做任务页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>签到页面</title> <meta name="description" content="Neat"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> html, body { min-height: 100%; } * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } .hide { display: none; } .lf { float: left; } .lr { float: right; } .red, .red a,.red a h5, .red a p { color: #FF0000 !important; } .h20 { height: 20px } html { background: url('//repo.bfw.wiki/bfwrepo/image/60dc6f7da82f7.png') no-repeat; background-size: 100% 100%; } .main-group { width: 100%; min-height: 100%; } .main-top { margin-top: 40px; } .integral-icon-group { margin: 0 auto; width: 160px; height: 160px; border: 10px solid rgba(255,255,255,0.7); border-radius: 50%; box-shadow: 0 0 20px 16px rgba(255,255,255,0.6); text-align: center; } .integral-icon-group .title { font-size: 14px; color: #fff; margin-top: 30px; } .integral-icon-group .day { font-weight: bold; color: #fff; font-size: 44px; text-shadow: #a53608 4px 4px 5px; } .integral-icon-group .day span { margin-left: 6px; font-size: 16px } .integral-icon-group .button-group { margin-top: 15px; } .integral-icon-group .button-group button { width: 140px; height: 40px; line-height: 40px; font-size: 18px; color: #fff; border-radius: 20px; background: #f15c12; border: 0; } .integral-note { margin-top: 10px; text-align: center; font-size: 14px; color: #4a0808; } .integral-note span { font-size: 18px; font-weight: bold; color: #f15c12; } .main-bottom { margin-top: 20px; min-height: 410px; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(50%, #fff)); background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 50%); padding: 0 10px; box-sizing: border-box; } .integral-group { display: flex; background: #fff; border-radius: 30px; height: 50px; line-height: 50px; } .integral-group .space { color: #999; font-size: 16px } .integral-group .item { width: 50%; font-size: 14px; display: flex; align-items: center; } .integral-group .item img { width: 30px; height: 30px; margin: 0 10px 0 20px; } .integral-group .today { color: #ffc607; } .integral-group .all { color: #ff6d09; } .task-group { margin-top: 20px; box-shadow: 0 10px 20px 2px #fda523; background: #fff; border-radius: 5px; padding: 20px 15px 10px; } .task-group .title { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .task-group .items li { display: flex; align-items: center; margin-top: 10px; } .task-group .items li img { width: 60px; height: 60px; margin-right: 6px; } .task-group .items li .data-group { width: 100%; border-bottom: 1px solid #cac6c6; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .task-group .items li:last-child .data-group { border-bottom: 0; } .task-group .items li .data-group h4 { font-weight: 400; font-size: 18px; line-height: 30px } .task-group .items li .data-group p { font-size: 14px; color: #cac6c6; } .task-group .items li button { border: 0; height: 30px; line-height: 30px; font-size: 14px; background: #f15c12; color: #fff; padding: 0 15px; border-radius: 30px } .alert-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; } .alert-group { width: 250px; background: #fff; margin: 0 auto; border-radius: 10px; box-sizing: border-box; text-align: center; } .alert-group .alert-icon-group { padding: 20px 0; background: #ff7a37; color: #fff; font-size: 16px; border-radius: 10px 10px 0 0; } .alert-icon-group img { width: 70px; } .alert-icon-group p { font-size: 18px } .alert-note-group { padding: 20px 0; } .alert-note-group p { font-size: 16px; padding: 3px 0; } .alert-note-group p span { font-size: 16px; color: #ff7a37; } .alert-note-group .........完整代码请登录后点击上方下载按钮下载查看
网友评论0