css布局手机端移动端健康体检类h5首页效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局手机端移动端健康体检类h5首页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>乐优健康手机app健康服务页面模板</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <style> html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } a, label, button, input, select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { border: 0; } body { background: #fff; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix {} .divHeight { width: 100%; height: 10px; background: #f5f5f5; position: relative; overflow: hidden; } .r-line { position: relative; } .r-line:after { content: ''; position: absolute; z-index: 0; top: 0; right: 0; height: 100%; border-right: 1px solid #D9D9D9; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .b-line { position: relative; } .b-line:after { content: ''; position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #e2e2e2; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 15px; position: relative; } .flex-box { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 14px; color: #333; } /* 必要布局样式css */ .flexView { width: 100%; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .scrollView { width: 100%; height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; } .navBar { height: 44px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; z-index: 1002; background: #f6f6f6; } .navBar-item { height: 44px; min-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 0.9rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 0.7rem; white-space: nowrap; overflow: hidden; color: #808080; position: relative; } .navBar-item:first-child { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-right: -25%; font-size: 0.9rem; font-weight: bold; } .navBar-item:last-child { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .center { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 44px; width: 50%; margin-left: 25%; } .center-title { text-align: center; width: 100%; white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; font-size: 0.95rem; color: #333; } .icon { width: 20px; height: 20px; display: block; border: none; float: left; background-size: 20px; background-repeat: no-repeat; } .icon-return { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACh0lEQVRoQ+3ZMW8TMRQH8PcOsTBQISExVCIRCwgWFvZ+hZYBpIrEcTYkBsTGlI2VDamL3YEBpWJoR1BJaOlXYEzyDYp0bMRGRjnJoDuWs/1e3EbKeHf55b33vzsb4YJ98IJ54RKce8XZV1gIcQ8AviDiD2vtC631pzZFYQ2WUt611p4CwM0VcqqU2soSXIN1ztdKqTfZgRuw75RSz9tg3bHsWjomlh04NpYVOAWWDbjf7z8oimLipbH7bUopJdvO7L/Hk8+wwyLiCSLe8H6cww4BwGYFTo0lbWkKLBmYCksCrsNaa99rrZ/FmFnS0GrCdrvd3mg0MqEDqu58yVKaAzZZSwshHgLAsX/rcW2csrJVtaNXeIWdIuL16qJU2OgVrsMCwEGn03mSamaThVYTtizLp+PxeJkioJKFFldslJbmjA0O5o4NCm7AHpZluUM5s1FCSwjxCAA++7ceADiczWaPJ5PJL6qAihJaUspdY8w+Il7xLsASG6SlhRA/EfGa91BxNJ/Pd7hVNtiT1mAwOAeADXdCa637Hi0Wi3zBUsptY8wHRLzqwIh/nlbzbWmna0roLEOrmo11QQd9W1oHdFDwOrR3cLCH/uuFn0uQRQE7dMPKJHl6RwNzRUcF/w9N9VIRHVyhazbLDihWP5KAHbphOzQ5OhmYCzopmAM6OZgaTQL20FMAuOUtHESfaTLwCn3HWnuWEk0KpkCTg1OjWYArtDHmKyJu+jMdeh+KDdghh8NhZ7lcfvPRoXcaWYFToNmBY6NZgj20m+nb3pr3W631yzY7GWzBDtXr9TaLojjz0N+VUvezBXvoPQBw0Fda649Zg9vg6o5l3dKhse58l+AY/yqnc/4GvNDoTFOq8FwAAAAASUVORK5CYII="); } .head-bg { background-image: url("//repo.bfw.wiki/bfwrepo/image/60c6d47d6deb4.png"); background-size: cover; width: 100%; padding: 2rem 0; } .flex-box h2 { color: #fff; font-size: 1.35rem; margin-bottom: 0.3rem; } .flex-box h3 { color: #d4e9fe; font-size: 0.85rem; margin-bottom: 0.3rem; font-weight: normal; } .image-text { position: relative; overflow: hidden; padding: 1rem 11px; } .image-text .flex { width: 50%; float: left; padding: 1px 1px; } .flex-box h4 { font-size: 1.2rem; color: #333; margin-bottom: 0.3rem; font-weight: normal; } .flex-box p { font-size: 0.7rem; color: #999999; } .flex-box span { font-size: 0.7rem; color: #666; } .shrink-img { width: 70px; height: 70px; } .shrink-img img { width: 70px; height: 70px; border: none; display: block; } .image-text .flex:not(:nth-child(2n)):before { content: ''; position: absolute; z-index: 0; top: 10px; right: 12px; height: 70%; border-right: 1px solid #D9D9D9; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .palace { padding: 0.5rem 0; position: relative; overflow: hidden; } .palace-grid { position: relative; float: left; padding: 1px; width: 25%; box-sizing: border-box; margin-bottom: 10px; } .palace-grid-icon { width: 45px; height: 45px; margin: 0 auto; } .palace-grid-icon img { display: block; width: 100%; height: 100%; border: none; } .palace-grid-text { display: block; text-align: center; color: #333; font-size: 0.85rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 0.2rem; } .palace-grid-text h2 { font-size: 0.85rem; font-weight: normal; color: #666666; } .image-text-two .flex { background: #fbf6ed; border-radius: 3px; padding: 10px; margin: 0 3px; width: 48%; } .image-text-two .flex:not(:nth-child(2n)):before { border-right: #fbf6ed; } .image-text-two .shrink-img { margin-right: 0.3rem; } .image-text-two .flex-box h4 { font-size: 0.9rem; margin-bottom: 0.2rem; } .footer { width: 100%; position: relative; z-index: 100; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 7px 5px 7px 5px; background: #fcfcfc; } .footer:after { content: ''; position: absolute; z-index: 0; top: -1px; left: 0; width: 100%; height: 1px; border-top: 1px solid #e4e4e4; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .tabBar-item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #979797; } .tabBar-item-text { display: inline-block; font-size: 0.65rem; color: #3b4048; padding-top: 2px; } .tabBar-item-active .tabBar-item-text { color: #0087ff; } .icon-loan { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAIAAAABlV4SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDY3RkIyNEEwMTEwMTFFOUI2NDc4MDRGRUM3MEFFMkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDY3RkIyNEIwMTEwMTFFOUI2NDc4MDRGRUM3MEFFMkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENjdGQjI0ODAxMTAxMUU5QjY0NzgwNEZFQzcwQUUyRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENjdGQjI0OTAxMTAxMUU5QjY0NzgwNEZFQzcwQUUyRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkJzmTYAAANiSURBVHja7JptU6pQEIBF8e2iqWXWB/3/P8zJdBo0hXzBkvvEjicyMySc8t7dDw4CZ3ef3T1nDrBWGIa5M5d87vxFGX6H2HvPbiIJI0mh1LKs1/BEIseZK/yC4fn5ebVaeZ7HL8dpkpvP27ZdrVZrtVqpVML7bBXy91MGjD09PT0+Prquu1gs1ut16lWrUCiUy2WsXlxcoAeATBQ6jtNut+v1Opr3M7y8vOD9/f39YDBInfd4ARSLxVarFQTBdDrNRCEYBILjSqViisqOlxBJ6Pf7k8nk+/YQNGBvPB6HW/m+QsJxd3dHLZFeU1RvDFyezWa+71O1IHJHJZIUxqjJ+XyOQuIiYctQIQd+JM1mcw8DeeBuMUnBcROVkMIkNfnw8MAcMDM4Q4WSDVwlFbu1JKkXBvgajcbt7W2n00lhEks4jWEsmYUlQ4UccEZcfccg63d8Okr2U5gkTiyFrCQ78ztDhQZA9xrKoAzKoAzKoAzKoAzKoAzKoAzKoAz/LYN9CqWWZRUKBdu2i8Wi/JW3Eh9fWf9ehnw+X61WLy8v8VtexcnbxXK5fE4M9Xq9VCo1m00TewDSvVz6sVr6E4nOaWVQBmVQBmVQBmX4l/beOxtj+fYYBEHyPVIu6kiwIjlwZxiGm80G/cm9xBPuj39HjJt4Y8A82325xoDpdMr2c7VaHfXM0Gq12HXLY8NnAMTF8zz0J2eQ79PxL8XG1XcMnK3VavL9FEsMYKTv+wnNMISx4/GY/TZPDkZVXIjIbDZzXReG+XyenMH0CeS2XRuO4xj9bwxs99n0s2EOYoLJo7bcROvq6kq+5ktbiOlf4gzahsPhYDDAoXhhHPVkgp84CYPpAHpXS1zo9XocjEajFF0iUuiTyQQXcRQG6oqYkU8ysIiES6k7gKTpo9vt3tzcoNbUkhVX953+JbzEP8nAa2yih2kR1Epfl2lQkHDG6+FLOdC/ZH30EkvL5ZK8H9X2RYmTAUIga8jhqS/eXF9fH5j9O6O4kxJimjF2p49sD4NUkaxlyfMgXTkUITlkZu8dK+FvbyXeR5UEg+F7124rqx5d9IDhRUI2pBSleMS89JxILGXxSF5IX+Cdos9YFuVlJBxLJRD1E70oOAmDLFBSTpIHESmG82DQPZ8yKMOPyV8BBgDSN7RYiAzvnAAAAABJRU5ErkJggg=='); } .icon-credit { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAIAAAABlV4SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDY3RkIyNEUwMTEwMTFFOUI2NDc4MDRGRUM3MEFFMkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDY3RkIyNEYwMTEwMTFFOUI2NDc4MDRGRUM3MEFFMkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENjdGQjI0QzAxMTAxMUU5QjY0NzgwNEZFQzcwQUUyRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENjdGQjI0RDAxMTAxMUU5QjY0NzgwNEZFQzcwQUUyRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psx9dtcAAAS8SURBVHja7JpZU+JQEIUhIrsIuFBWqVX+/z/lE+WOgqC4zjc5Zc81JBC0vMnMpB8oxNzcPt2nl9tJ+f39vfSXS1D6+6XAkA+prLyCgHl7e3v/EG+alcvl3zYOgvKHfB3D8/PzbDabTqd8eX199YlhY2OjXq+32+1Go/FFDGh8d3d3e3s7Go0eHx/503MSwwmbm5sA2NnZ2d7e3traWg8D6j49PZ2fn5+dnV1fX+sX/1zH/JVK5eHhAT63Wi1QrYFhPp/f3NwMh8PxeJxtyL68vFxcXIAEP3Q6HQiWFgPkgUUYgFuAvlarVatVPr2pjuGxI1yYh3J/fw+xm83mGhhYhgcUxGDohII3fWJAAeyIJqbP/v7+GlxCe5ZxI74DncW7u7ukCG8YlFEIQmCIUabPGhhIphZY5DjyA58+MaAABDa3mD5p6zRrgK5cBAZy3CIRPWQk21QYYnNjsMQMxJOtcW/nDYNrOLllDQxcyhr8IP4R0/4xIGBgX1Vo8SJtPKhBksgeYABAbH35UT9oa2GQWdUrRPqOIKmsWGskJ3gGEGk3IjBS+cH1Gh6wuywpiJPJhFXUIMrI8ottF5aQ8puhJGU87c6drQHlOzZNhcGWuZZIuphETmdFUaeGoI2uX7IEIdnThtHL9ENRvC0uEQtijbuiPixyKUkhrkQP+kJaGvagS0e54+NjTJu0BCVAe3p6enV1pb5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0