* { box-sizing: border-box; } body { margin: 0; font-family: 微软雅黑; } header { height: 60px; line-height: 60px; width: 100%; color: #fff; font-family: "黑体"; font-weight: 200; font-size: 20px; /*背景色渐变*/ background: linear-gradient(to bottom right, #F56739, #FB9749); } #content { background: linear-gradient(to bottom right, #f5f454, #fbd1b7); } .menu { display: block; position: fixed; bottom: 0; width: 100%; height: 70px; color: #474747; padding-top: 10px; border-top: 1px solid #eee; background-color: #fff; } .subMenu { width: 20%; float: left; cursor: pointer; } .menu_name { height: 30px; width: 100%; line-height: 30px; } img.menu_img { height: 24px; width: 24px; } img { vertical-align: middle; border: 0; } .active { color: #FFA129; } .text-center { text-align: center }
目前图片路径没有提供,此版本兼容各种型号手机,高度也是自适应,获取屏幕宽度再进行处理进行计算出来的