官网不让发css类型的文件,只好全部拷贝出来。全部复制以下代码,替换\template\default\center.css.
.userheadbar { height: 158px; padding: 15px; background-image: url(../img/userheadbar_bg.jpg); background-size: 100% 100%; } .userheadbar>img:nth-of-type(1) { width: 128px; height: 128px; border-radius: 2px; float: left; } .userheadbar>div:nth-of-type(1) { float: left; height: 128px; padding-left: 10px; max-width: 60%; } .userheadbar>div:nth-of-type(1) h2 { font-size: 22px; font-weight: normal; padding-top: 7px; margin-bottom: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .userheadbar>div:nth-of-type(1) p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 3px; font-size: 14px; color: #fff; } .userheadbar>div:nth-of-type(2) { float: right; height: 128px; } .userheadbar>div:nth-of-type(2) a { display: block; height: 34px; width: 128px; line-height: 34px; text-align: center; border-radius: 2px; background-color: #19CAAD; color: #FFF; font-size: 14px; } .userheadbar>div:nth-of-type(2) a:hover { opacity: 0.8; } .userheadbar>div:nth-of-type(2) a i { margin-right: 3px; } .userheadbar>div:nth-of-type(2) a:nth-of-type(1) { margin-top: 3px; } .userheadbar>div:nth-of-type(2) a:nth-of-type(2) { margin: 10px 0; } ._Interactive_btn.disabled { background-color: #ddd !important; cursor: default !important; opacity: 1 !important; } #center_nav { list-style: none; min-height: 470px; } #center_nav li { position: relative; height: 42px; line-height: 42px; text-align: center; font-size: 14px; border-right: none; font-weight: bold; color: #fff; background-position: 28% 7px; background-repeat: no-repeat; } #center_nav li:hover { cursor: pointer; /*border-color: #19CAAD;*/ } #center_nav li.pk-active { cursor: default; border-color: #19CAAD; } #center_nav li.dynamic { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAClElEQVRIS51WS3LaQBB9bwqcpQUXCFQFtjEnCD5B8AliLw0L2yeIfQLIArzEPoHJCUxOELK1XIVyASMvMa7p1EhIEWLGItG2p/v15/VrETt83vDhQCl+zj7VWkKo8vfwtB4UhaDrgdefe2pv1RewQ8JzvRORmVANwu6HW9cbK0h16F8KcPZW8HxAgQRCnoSnjWnetgFisue71zGBTlELXHYtchL2mjdZ+wZIZeRPCXzazhI/ROQcilHblEYbxNddgVKQ6vBxAMqZ1VFw9dRrXGZt1ZEvIvhN4r3NR4u0wl5zZmwRiHftt5Xg3jncqN/lwyyTKiM/pGCgIYEix7YZLbrNegriatNfR7l96jaPs4GMDwThotfoeMOHYxtQMh961/Oakte5e9AxwJoUd7IsHWFvVSMwBuHJstwKL+qhYWR+Tobei16zRW/knyugbwfJAOyt7kkebLXF7MlL+dAAVYZ+kJ+RZqnOytCfkNjY5jhQMUAKuCaGjTwaPKJ9Hv8AACDpvTVhwRUro4cZwY8burQsVaLyLbbttmYTep1vqUQMsrmAAvm16DYPimi9c0ttIMb5qdvgmk0Bgf3/JYXxM62kjXoauAi7jYGReJJGavYh/KYpAQXnpExTWjtYlyRmNp/RrSB/5rNNhplQXK/nZPbKbH5UaQGAkZ1Fr2F2CrDxOykVioGRHE0cZmW8WCXMFsSaF2vX6LGjIHeu3gP8kgcpUgoBnmVZqhmWpipclFn+ThSxL/s+BYnZtJrmd8ZWnQBTQGoEa28xL7FtXsaITbjZBahIULP2rRu/3o+J7UK6A8eWhPr5d+6/lWu/TZHBblXJrWb50vV75ARJsjF7BLJNie56+mtESKAFU7yUJ4ZBb1X5Bw1MmDVIK+zgAAAAAElFTkSuQmCC'); } #center_nav li.message { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAC50lEQVRIS6WWP0wTcRTHv+/a8qfXpAxNkIVg6sBiKCwMktg6iIkxcpUdHNgccMJBExMmJ1iYHKQuTnI1xkSnngkOLFriwiAJsICJA01o+VPoM+9X7tJrr9cTX3LL/d7vfd57v/d+70foIGUzPQXgIQNDAFIE6mPwIYAiATtgyuvZwgc/M9Ru8chMzwJYEqOdHFFQxnwsa+W8dFsgx2Z6qAaYAKU6GW9d56IGGL2GtdO45oIcmWkxXAjifTsHLlOZiRlW0dZxIBLBBfDjfwC2UQGFgFE7IgdSXssUQRjplCItnkSttN1JDQAXdcMaFUUFkUMm0BvfnREdPeOL0BIpnBTmAoEY/DhmWKt1yFrmkAjxdhDxvnt8ERS9plRO1p+i9mcTFO1Hz8QSzn6u4GL/m8d23tEN6zrV+4BMVzVE+0G9dYNaXxJdw7NAJOao2BBEdHSPPUNo4BbOvr/C+d4XL5AhkFWAZpzViI7o3Xcuo807BRIevAeu7KO69VZFGUqM4LgwB678blLnHB2tZSwi3LZXtMSISoGfKMjABMLJRzjffo+zrVVE739EdSunvkZhxleBuM4jKETOJDI8o75K/o7jmDjggoAPqWxmuPHnv0BsXam2rptPnKJozsLVIyn9QvfYAkKJUVQ+PUBP5jW4coDTjRfN6Spd+UwiyWmnqmqVg3ope1SYOpOW6gLqPXFZslr8BqRUG0XyLl6rbo7ElD5Xy6pJW4Vznn3iUpROn1iGNKQtjc3YK2kSwPq8R/nKDjYCdbyodo0tIDw46RyuVJeIKuO9z0C17BEEdvVsYSj43SUGBycRTk7jdON5G6/dHNfdJUtBb2HfLnU3yKaeLajB554nTEW/izIogBmlEHGqZZ6IATUZmeSaaXsjdwIJAMRpz8lob1YznikfZIC1ABmbGvGU74xv3KReK0zLgaJi7DLxSxlQXpG2fRLZypfvrilmqr+7CHGVEnl3EcurJK8bVt4vjX8BGo5WaN638foAAAAASUVORK5CYII='); } #center_nav li.message>i { position: absolute; top: 7px; background-color: red; color: #fff; border-radius: 50%; width: 7px; height: 7px; } #center_nav li.heart { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACQUlEQVRIS61WQXLaQBDsESUqJ5tjqlIQfLGlU/AL4rwg+AXBP+AHwS9w8gKbFxheEOcFkU+QXEKkSlVuFjkl2hLtWglhECsEtve4Mzs9szvds4KS9b1eaQPWewJNCFqA1ACGIDwBJsRs4ATxcFMYKTKO6nZHBBdp0LLFUIDuka/6Js81kNFLNKVqXwPSKgu9bqfHSJ26fzBZtq2A/Hhlt2YVfNku+6IUGFox3h3+Vl7msQCZV/DtaQBZWIaM1HFW0QJkXLc9iLzZ/YoKK/IcXx1rawKSPrJcPh9AGonkmRuoqwRk3LBDQPbzICS/imDAtMM6Arxe+BBDCjyZsQYLHdN5ABPHjw5E84BSuTYA9N1AdZb3R3X7SkQ+ZBlmtp811P7tVTVvHpKYG4XxqWQHl4MR+PXib9Q6CBEu78+DdV0/6uWT2pSsBrkRkbcrh4ihE0TtXd9o3KjSeOWm9yBwbsq2DNQEoiVIjIZHVKKv8v9e9c4oK+bOWmdtWRWjRrUnwEeD1EzNb5J2uWfFOFuWhyKgccPuAnJhsic0MHXXgzN1d/UcX302BUikyLYvIXJSyHuyX8iT1UPr6rrtKEh4sonxOaCFum4rQ5pvrh81d9WuCcnzbXVuRbuSap5bhclbJ1DJ4MvPE69A6Mo6OGfnlJFqrc0T7TWfjDdPA+LUinFinIxZKvO2HDxqgJG3VKq9ccbnZF3/Vj5tU5XuIpA9PaCMslJ22VrCZ7C0Ijcl/XftA5yS0B+FiYXZ4CiIB5vi3ANH7R8vI7L8vgAAAABJRU5ErkJggg=='); } #center_nav li.my { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACw0lEQVRIS61VPXLTUBD+VnJBkgLfAOcEKA2D3GCXoDCJT4BzApJBpo3SYjOGE2CfIGaIoLRpohma2CfAOQFykZ/CesusYpkkek9OgUq9fft9b/fb/Qgrvs7p910Q7wBcAcMBURnMMQhjgKZMGLSee1+L0pDp8GMUNpm5myZd9d2A7vvudl8XmgPpRj8qc1bHRHBW5b5/zoxxiazGgftyevvsDsiHX6FjzXn4IPYmBsyxKlH9/TNvnIUsQeQFCSdnOgAGZmAOSmsbvYOtetw9G5bnVxdNEAUEPM7hMcc22VvZi5YgnehEGvk0VwJgxjZqlKgygQ4BqgE8YvAR21ZMCUY6ICldq+ptSb4UJG0y8MXQtD1mikF8nCeg6hasStHdd67XS0HaURhr2QCzluuVO6fhFIQnGhJT3/U2TfcBpOe0mIMcS0nIwM8SrGYC9dvUZxvW5hxK2L7QxjA1qBOd9AB6owsQEEAFBGtoFBNUHbBEAHoQcJ/aUSiN0wakul9bryfXl39MIL7rCVGtaLJqCIi2H1lSKUeCJNC/lvs27KConLKCqBOFXDjZjM/22nqQXF+M7kqcJ/ajjVpydRmA8LZwdxW/hPu+u91sR99qLff1SETCxA4xjf3qq8Hyf3FfZ+aeMM79qldpn4YDIuyIHAnoZYwZaAKQzTzwq17DJHMRT4G6uM/gXpGy/gGqOoGapr4Z54SBI0CNHgoCWDUCDvN7jBrGif8vIIuSG3dXNu1zqLF20y4oy4YuwXJ0U0/A3nJ3SXxuoBbrOmF2QErmJLehAZ6ArcAmGudtgie+u50a3x0/0bAWD98v8vDF7uumSrv3upyfyLk4o8kfHmrFUj7xH60zZklSh0Qy0JdnFRRPbNi7hR5/O4UYmQI+FTV9Gc84J0IgTTYYXzG7m5qrXQZJzR0BTT0fGBN4CrYGsmKKsvwFqUtzqB2cn30AAAAASUVORK5CYII='); } #center_nav li.gear { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACNklEQVRIS61WUW7aQBB9A06kyhuVnqDkBvQEDScIPUGXvyogFU4QOEEcCaL8ZXOCkhvQE5SeoL5BkXAUKQVPtQ7r2MaL7ST+8+7MvtmZ92aWUPCxHDTu6d8pMTVDoEVAg4FlDVgwse/ywR0pb7nvGLJtPshvzTWcCwI6RYEArOrYjN+paz/PNhckkH0PwPfiw7MW7Ak1HWZXUyBRarD+AeCkOkDsMXfhfEmmMAWykv05AZ9fAWBc50JN2uYnBrGk6DcBIwZ3APpaEfxSqMlA+0QgusgbOH/yD+GhUFNvJfsnAM8I9L4sWB3rY02GCGQle9r51O4cfhLqahHIMwnUbsqCAHwr1FTStth/9zmaiMrYZs9x4XygbHQMviOQ5ruhcJzbQJ61gNqv8jfRlmGXVrI/IuDcOGo1CzjH93hs6jWdpuShgeypKiRgYEz59WAl1LRri7gKUJQZmzYYmBHCsYtDX/eubI8KZG8A0EVR6hj4ablJnisvXBy0k0ouwzZzk1RN9kWm60UI28k6aSAGeTb9RDUpE00S2ALUYtA8HyjsltLJTq99utFQqCtl9jS984AinWijKmxJA4bdJNAuibaKL+5dRfzBQKjJ5TZYH6CPxiPVu54MXjqotDdrwTYAigS8/dJd2Ky+1TzR2jhSk3jw7UzGAOvZawaXBhBwOtbJ+MyUF6cuTlGykntfKxvUR+WaId/WsRlVeq2kxBc9Lh47jFoT4BZADYCXAC0Ioe/icFb07voPZdIR/NYsjpkAAAAASUVORK5CYII='); } #center_nav li.fans { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACkElEQVRIS51WTW7aUBD+5jkCqSCVG8TAqg1R6QkKJ0hygnKDOrvApnQD2cU9QckJSk8APUGMIMoK4tyASm2lovpN9WwM/scpO/t9zDffzDfzTHjG70G/0gE6BvjplX1t5/0rZQFV0L9CnBHQAaEZwzIsBkZHUn7LIk0kedT7ld9i80ECBhEqhzJmxloA5gtZ+Fy1++soPkaisneE+JqY+UE2WJqUF1FVIZJtee7yZJ/Gp1SVZaEaVLQjUSX6JTaT/1IQZWRYJVlo+0Q7knmt1yfCx0MVyXvOjE+nq0Ff4V2SxDIxngSx4Ti8Jk0YAM7iBHzLDo+EJnTJbBLRSx8TLJtLsqh1DRDdBIMI8MXr5XDsv1vUejYIxzsM86yxGu5sfV/vdRj4EkqE+bKxGpo+iQWiN0GA5shq0CXzendKoHd7DN82lsOO/zzXr1qkiUmYBFZjNXjrkdR7HOtdoKb3eq/JGu6CGHc2JNon9sDaxlCqYyVtLAdE7lxo4jGxoQwLxGuAWknnioiILTBV0lypKkKJMvNaKAeOHdnOVpIjyCGIqyStJ+o9g7+Hm50cMgvn9mRr4Zi7sLXfot4dAfQ+PWPPZYnDvLV56pz4JJ7SNKK9jZNmzY8RmHiyohMbtKhrECHOmbhJTBZLOT61r6cqCWVxKTAJLlZm/lGWRV3tr8zd5c4C4fJkORillUtNumTcRDd3bHepAN4W/jONTr4b3JsXU3Ngq6tXXcGOBh1MRvKNybOSLLZiW1jF8hZluGyHLBrfFPsy+WcpNyONExUdYuSwglQSv3Q/xcYA2AiaIY1DNRkgsywLZq47PhjIu+/pHO7XSnhLe73iGYBRSRZHScEzlaRl7PYM0I8A+znfXf8A5Ppj8omWFUoAAAAASUVORK5CYII='); } #center_nav li.idol { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAADFUlEQVRIS62WT1YTQRDGv6rW4GMjN3A8gePkAA4nMJ5A2BhYIScQTyCsBDbEEzicgHiAjM0JxAv4wiZP8+gqXzWZMQkDgTx7A+k/9auu/qpqCAtG+jnNmfkVKeUgrAFIAXgohkraF5JT/877u8zQbYvto3ZHVT8RUbLIEVW9IKLdQXdQNO29AUlP0jU3dicAOouMN6wXoRU2/aYfTq/NQCaAs0lIlmDEIz60wvo0qIb8J0Dl2AyohrSP2j0Ab5d1vyl0g+7gjc1HiCnIsTtT1XMQLJ79ZWEEShSaEOhVkLDut32/hlzp1a8Vt/LSNkwDTKLx92Nc8G/ugPEMgp/yRAoe806TM6Li/ZY/TY/T1OQdIXeE6jK0QsJj9iKyAYchAtaqv3b7JohCv0lLOjzmD2W33CWjOXXfGzeLbsaYMp3Y1R07S8av9r/N3waxdSbuENFOoPCSqveYh9j7yIrkPOYfBFqzzazcIdAHhX4UkuIW574ECXuO3Q+zaUCDJNXENCh6w5xHo6rn5VaZZkdZ3x4Uiv5ga7CeHWaeiF7MnXvuyO2D8NrmR26U0KR87M1sVpwGDe+Z2cJ4bu/BHG/xqTKoopuTxy8iGEC8oUi/CqM5R0R71D5sF6NHo53VsGrKsuIHEenBxWJ4rao/bDVs40ZIofsicmDzDM4N6sYuNzsE8iM3+r56tXpAFgIonsXcIFzUhhQJERk0ghcMr1DLrX81S5GAYv07p+ww2zcVLLKy7LqqHtyqrmWNzp+LErbJ7Ci7IJCFLA6F/jTZAnj6ANilQofzdspumVxDPmcblnBTkF0h6Tt1Fuf7gC4DhZw1Sn5GgeV22aurcJ0D1W1MopA+M/cqiTbdKpYQkzg4n3P0W9ktczsz00+sRk1fF0ARJOyanC3bAcRDk2H9vUDA0LEz7+tOauGWlqRV45rtjMdpysqWXPX7TAwWluXCUn8wsHAKitCZNh0BJJ3pj4vGHs/jCIpZ/JBRVd87e/y0wVhuoPsNt7rBnajx/b2/VuYtWCtg4Q3QdebbDc3jida9sPQWfXf9BRx1pwdkMEUkAAAAAElFTkSuQmCC'); } #center_nav li.friend { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACN0lEQVRIS6WWzXEaQRCFv/b6bjkCQQQW5eVsEYEhAqMMyMA4AjsDQwRCEQidhQvIADKAu6h29c7ussvOzOLynCjm5/Xrfq97hba10iHwFegAd8ANcAA2wA5lQV+eYs9IcPOPjlF+5o+2hWKgE1KZ+w42Qdba4Y1HJIv635ay4T0jerKrXqyDrPWOE89XRh8K4EDCgJ5YOrN1BjEGJ9b/CVC8a0C9gtEZZKWG/CkQ3hblkKfww1U5tNT1pXdm4or823tZeOCzzLK9td5wwn6b2tpXftcxWampwxfhllTqAnjVKcIEi1QyWd9G0Hak0hWcDx4DB+ekMi733NkpCff0xAIDB/o9AjQyEKP/zXtI+UFfphWQDQnjqnLyTJhkQ4zmwqsuEb4EIlmSyqACoqTS9NZKF8E6KS/GJFSPQuSu8M5Ds0aN2lN2MBCNykR5oS/3ubIsXVaPmqOJMcnMGGfyRMK0rIEr8i2pPJSBxeTvDh1DNdmTcFcqqHjRpWyNMqAvy7zoMRNDXpOmuooU1R+3jtxFmV0obogyiYhn7vfJZTc1Bb5jVjrfV0TX+4zVpalHbY43us7ZqXxs7SNNO+xJpeNA2osHCd2Gqqqo1tfeeK7NoVrvcv0rXkD3YDF2L0kVY7n6f9n3LueJL6etWfIcOObqzPzkm4wmzetmhh/eAMywnsl4lqupxHpRaIDFmG1JGMZnfPW6E8OvK1ntEaYhiYc/iQpAN0PMcJ3K+D3m0racL0jFmAfXX0oV7HkigBxEAAAAAElFTkSuQmCC'); } #center-body { border-left: solid 1px #19CAAD; min-height: 470px; } .center-msgbox { padding-top: 15px; } .center-msgbox>li { border: solid 1px #EEEEEE; box-shadow: 0 0 10px 2px #EEEEEE; margin-bottom: 15px; } .center-msgbox>li>h2 { font-size: 16px; font-weight: normal; border-bottom: solid 1px #EEEEEE; height: 44px; padding: 10px; } .center-msgbox>li>h2>img { float: left; width: 24px; height: 24px; border-radius: 50%; } .center-msgbox>li>h2>a { float: left; max-width: 50%; height: 100%; line-height: 24px; padding-left: 10px; color: #19CAAD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .center-msgbox>li>h2>a:hover { text-decoration: underline; } .center-msgbox>li>h2>i { float: right; height: 100%; line-height: 24px; color: #777; font-size: 14px; font-style: normal; } .center-msgbox>li>p { padding: 10px; color: #444; font-size: 13px; } .center-msgbox>li>p a { color: #01AAED; } .center-msgbox>li>p a:hover { text-decoration: underline; } .center-msgbox>li>a { display: block; padding: 10px; width: 100%; text-align: center; font-family: 14px; color: #555; } .center-msgbox>li>a:hover { background-color: #EEEEEE; } .center-msgbox>li>a.disabled { opacity: 0.7; } .center-friends { padding-top: 15px; } .center-friends>li { float: left; width: 100%; border-bottom: solid 1px #EEEEEE; padding: 15px; position: relative; padding-left: 63px; } .center-friends>li:nth-of-type(1) { padding: 10px 5px; border-top: solid 1px #EEEEEE; } .center-friends>li:nth-of-type(1)>p { text-align: center; padding: 0; height: auto; } .center-friends>li>img { position: absolute; top: 15px; left: 15px; width: 48px; height: 48px; border-radius: 2px; } .center-friends>li>p { float: left; width: 100%; height: 48px; padding-left: 10px; } .center-friends>li>p>a { max-width: 100%; display: inline-block; font-size: 20px; color: #19CAAD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-friends>li>p>a:hover { text-decoration: underline; } .center-friends>li>p>span { display: block; color: #777; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-fans { background-image: url(../img/fans.png); background-repeat: no-repeat; background-position: top center; padding-top: 350px; text-align: center; font-size: 18px; } .center-fans>p>b { font-size: 24px; font-family: "times new roman"; color: orange; } .center-fans>p>b:after, .center-fans>p>b:before { content: " "; } .center-heartbox { padding-top: 10px; } .center-heartbox>li { padding: 10px 5px; border-bottom: dashed 1px #EEEEEE; font-size: 15px; } .center-heartbox>li:nth-of-type(1) { list-style: none; border-top: dashed 1px #EEEEEE; } .center-heartbox>li>a { color: #01AAED; } .center-heartbox>li>a:hover { text-decoration: underline; } .center-heartbox>li>date { color: #19CAAD; } .center-searchbox { width: 100%; height: 34px; padding: 5px 10px; font-size: 14px; border-radius: 2px; border: solid 1px #EEEEEE; color: #777; } .center-mybox>li { width: 100%; min-height: 48px; position: relative; border-bottom: dashed 1px #EEEEEE; } .center-mybox>li>p>img.userhead { margin-top: -8px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; float: left; } .center-mybox>li>p { min-height: 48px; padding-top: 14px; padding-bottom: 14px; font-size: 15px; } .center-mybox>li>p>input, .center-mybox>li>p>select { height: 34px; line-height: 34px; border: solid 1px #ddd; border-radius: 2px; font-size: 14px; padding: 0 5px; min-width: 132px; max-width: 100%; margin-bottom: 0; } .center-mybox>li>p>._savebtn { display: inline-block; margin-top: 7px; height: 34px; line-height: 34px; width: 102px; padding: 0; text-align: center; color: #FFFFFF; background-color: #19CAAD; border-radius: 2px; } .center-mybox>li>p>._savebtn:hover { opacity: 0.8; cursor: pointer; } .center-mybox>li>p>._savebtn.disabled { background-color: #ddd; cursor: default; } .center-mybox>li>p:nth-of-type(1) { text-align: right; width: 87px; position: absolute; top: 0; left: 0; } .center-mybox>li>p:nth-of-type(2) { padding-left: 97px; width: 100%; } .center-mybox>li._title { border-bottom: solid 0px #19CAAD; } .center-mybox>li._title>span { position: absolute; width: 92px; height: 36px; line-height: 36px; text-align: center; background-color: #efefef; color: #7b7d7d; font-size: 14px; top: 12px; left: 0px;border-radius: 20px; } @media only screen and (min-width: 1001px) { #center-nav { padding-right: 0; } } @media only screen and (max-width: 1000px) { .userheadbar>div:nth-of-type(1) h2 { margin-bottom: 46px; } #center-nav>div { overflow-y: hidden; overflow-x: auto; } #center_nav { width: 424px; margin-top: 10px; min-height: 42px; height: 42px; background: #efefef; border-radius: 20px; box-shadow: -5px 5px 5px #616161 inset; } #center_nav li { float: left; width: 42px; border-radius: 0; border-bottom: none; background-position: center center; } #center_nav li.pk-active { width: 88px; background: #19CAAD; border-radius: 20px; background-image: none; } #center_nav li>span { display: none; } #center_nav li.pk-active>span { display: block; } #center-body { border-left: none; } .center-fans { background-size: 100% auto; } }