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-item.........完整代码请登录后点击上方下载按钮下载查看
网友评论0