*{ padding: 0; margin: 0; } html,body{ min-height: 100%; padding: 0; margin: 0; width: 100%; height: 100%; } body{ font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif; background-color:#ececec; max-width: 750px; margin: 0 auto; position: relative; /*overflow:hidden;*/ } li{ list-style: none; } a{ color: #333; text-decoration: none; font-size: 16px; } button:focus{ outline:0; } .clear{ clear: both; } .cont-list{ width: 100%; } .cont-list .list{ width: 100%; padding-bottom: 10px; display: flex; flex-wrap:wrap; } .list li{ width: 33.33%; text-align: center; box-sizing:border-box; } .list li a{ display: inline-block; margin-top: 10px; width: 90%; height: 35px; line-height: 35px; text-align: center; border:1px solid #ccc; background-color: #fff; } header { width: 100%; max-width: 750px; margin-left: auto; margin-right: auto; position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: 44px; background:linear-gradient(to top, #921818, #e42121); text-align: center; line-height: 44px; font-size: 16px; color: #fff; box-sizing: border-box; border-bottom: 1px solid #efefef; } header .back{ position: absolute; left: 10px; } header .back img{ width: 22px; vertical-align:middle; } header .home{ position: absolute; right: 10px; } header .home img{ width: 22px; vertical-align:middle; } section{ width: 100%; max-width: 750px; margin-left: auto; margin-right: auto; padding-top: 44px; } section .fl-list{ width: 100%; } section .fl-list li { display: block; border-bottom: 1px solid #efefef; background: #fff; padding: 8px 6px; font-size: 14px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } section .ne-list{ width: 100%; } section .ne-list li{ float: left; width: 33%; text-align: center; margin: 0 0.16%; } section .ne-list li a{ margin-top: 6px; background-color: #FFFFFF; border: 1px solid #CFCFCF; border-radius: 3px; display: block; height: 38px; line-height: 38px; overflow: hidden; position: relative; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } section .warp{ width: 100%; background-color: #fff; } section .warp .title{ text-align: center; padding: 0 12px 5px 12px; position: relative; border-bottom: 1px solid #efefef; } section .warp .title .time{ color: #909AA4; } section .warp .title h2{ font-size: 16px; padding: 10px 0 5px 0; color: #222222; line-height: 28px; font-weight: 400; } section .warp .content{ /*background-color:#F4F4F5;*/ overflow: hidden; padding: 0 12px; position: relative; box-sizing: border-box; font-size: 14px; } section .warp .content img{ width: 100%; } section .warp .content p{ margin: 10px 0; word-wrap:break-word; font-size: 16px; } section .warp .pstyle{ color: #d4237a; } section .warp .lower{ padding: 7px 12px; position: relative; box-sizing: border-box; font-size: 14px; } section .warp .lower p{ line-height: 28px; } footer { max-width: 750px; margin-left: auto; margin-right: auto; background: #333; color: #fff; line-height: 25px; font-size: 13px; padding: 10px 10px 20px 10px; text-align: center; box-sizing: border-box; } /*底部*/ .messageList, .scrollTop, .release{ position: fixed; right: 10px; width: 32px; height: 32px; background-color: #ffffff; } .messageList{ bottom: 72px; background: url(../images/liuyan.png) no-repeat; background-size: 100% 100%; z-index: 100; } .scrollTop{ bottom: 35px; background: url(../images/top.png) no-repeat; background-size: 100% 100%; z-index: 100; } .release{ bottom: 72px; background: url(../images/jmx.png) no-repeat; background-size: 100% 100%; z-index: 100; } /*留言列表*/ .meList{ width: 100%; background-color: #fff; } .meList ul li{ display: flex; align-items: flex-start; padding: 16px 10px 0px; } .meList ul li .meLeft{ width: 32px; height: 32px; margin-right: 10px; background-color: rgb(238, 238, 238); font-size: 0px; border-radius: 50%; } .meList ul li .meRight{ display: block; width: 0%; -webkit-box-flex: 1; position: relative; padding-bottom: 16px; flex: 1 1 0%; } .meList ul li .meRight .meTitle .meName{ color: #333; } .meList ul li .meRight .meTitle .meTime{ float: right; color: #909AA4; } .meList ul li .meRight .meCont{ line-height: 20px; color: #333; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; margin-left: -5px; padding-left: 5px; padding-top: 5px; overflow: hidden; } .meList ul li .meRight .meping{ background-color: #efefef; padding: 10px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; border-radius: 3px; } /*添加留言*/ section .tis{ padding: 15px; } section .leavingMessage{ padding: 0 15px; } section .leavingMessage .option{ margin-bottom: 15px; } section .leavingMessage .option input{ width: 100%; height: 35px; border: none; outline: none; padding-left: 10px; font-size: 13px; color: #555; font-family: monospace; box-sizing: border-box; border: 1px solid #efefef; } section .leavingMessage .option textarea{ display: block; width: 100%; padding: 10px; height: 200px; box-sizing: border-box; font-size: 13px; color: #555; border: none; outline: none; overflow-x: hidden; overflow-y: auto; word-break: break-all; resize: none; border: 1px solid #efefef; } section .leavingMessage button { margin-top: 30px; width: 100%; height: 40px; border-radius: 5px; line-height: 2.2px; text-align: center; font-size: 15px; background: #31c333; border: none; outline: none; color: #fff; } .white-box{ text-align: center; } .white-box li{ line-height: 27px; border-bottom: 1px dashed #ccc; } /*分页*/ .page { width: 100%; padding: .5px 0; margin-top: 10px; /*background: #fefefe;*/ } .page .paginList .current { background: #ddd; } .page .paginList .current a { color: #333; } .page .message { padding-top: .3rem; text-align: center; font-size: .6rem; color: #666; text-align: center; /*display: none;*/ } .page ul { padding:.3rem .5rem; text-align: center; } .page ul li { padding: .3rem; display: inline-block; border: 1px solid #ccc; border-radius: 6px; margin-right: 5px; text-decoration: none; min-width: 1rem; text-align: center; font-size: .65rem; margin-bottom: 5px; background: #fff; } .page ul li.active{ background-color: #efefef; } .page ul li a { display: inline-block; color: #444; } .page ul li a:hover { -webkit-tap-highlight-color: rgba(255,255,255,.0); } .list-btn li a { height: 35px; line-height: 35px; text-align: center; border: solid 1px #ddd; border-radius: 5px; background: #eee; } .nav{ position: fixed; display: flex; bottom: 0; right: 0; left: 0; background: linear-gradient(to top, #921818, #e42121); border-top: 1px solid #9f9f9f; height: 50px; width: 100%; z-index: 999; justify-content: center; max-width: 750px; transform: translateZ(0); margin: 0 auto; } .nav .tab{ width: 24%; text-align: center; color: #fff; } .nav .tab i{ font-size: 1.6rem; line-height: 2rem; } .nav .tab p{ line-height: 0.8rem; font-size: 0.8rem; } .nav .active{ color:#1ac024; } .guangg a,#guang a,#guang2 a { color: #f00; animation: move linear 2s infinite; animation-delay: 2s; } @keyframes move { 0% { color: #f00; } 25% { color: #1c6109; } 50% { color: #ff5722; } 75% { color: #f00; } 100% { color: #3f51b5; } }