<style>*,:after,:before,input[type=search] { -webkit-box-sizing: border-box; box-sizing: border-box}.wpcom-modules .alignright { float: right}.topic-col-4 { margin-left: -15px; margin-bottom: -15px}.topic-col-4 .topic { padding: 0 0 15px 15px; width: 25%}.modal-message .modal-message-content img,.wpcom-modules button,.wpcom-modules embed,.wpcom-modules iframe,.wpcom-modules input,.wpcom-modules select,.wpcom-modules textarea { max-width: 100%}.wpcom-modules blockquote { font-size: 13px; color: #606266}.wpcom-modules img { max-width: 100%; height: auto; vertical-align: top}.wpcom-modules .aligncenter { display: block; margin: 0 auto}.wpcom-modules .alignright { float: right}.modules-tjnr .slider-wrap,.wpcom-modules .sec-panel { margin-bottom: 0}.archive .main>.sec-panel>.sec-panel-body,.search .main>.sec-panel>.sec-panel-body { padding-top: 0; padding-left: 0; padding-right: 0}.el-boxed .archive .main>.sec-panel .sec-panel-head+.sec-panel-body,.el-boxed .search .main>.sec-panel .sec-panel-head+.sec-panel-body { padding-top: 20px}.sec-panel-head+.sec-panel-body .post-loop-card,.sec-panel-head+.sec-panel-body>.post-loop-image { margin-top: 0}.el-boxed .sec-panel-head h1 span a,.el-boxed .sec-panel-head h2 span a,.el-boxed .sec-panel-head h3 span a,.widget_post_thumb .item-title a,.widget_profile .profile-name { color: #333}.el-boxed .sec-panel-head h1 span:before,.el-boxed .sec-panel-head h2 span:before,.el-boxed .sec-panel-head h3 span:before,.el-boxed .widget_search .widget-title { display: none}.sec-panel { margin-bottom: 40px}@media (max-width:1239px) { .sec-panel { margin-bottom: 30px }}.sec-panel-head { position: relative; margin-bottom: 20px; overflow: hidden}.el-boxed .sec-panel { margin-bottom: 20px; background: #fff}.modules-tjnr .slider-wrap,.wpcom-modules .sec-panel { margin-bottom: 0}.el-boxed .sec-panel-body { padding: 20px}@media (max-width:767px) { .el-boxed .sec-panel-body { padding: 10px 0 }}@media (max-width:768px) { .topic-col-4 .topic { width: 50% }}@media (max-width:420px) { .topic-col-4 span { font-size: 16px }}.sec-panel-head .more,.sec-panel-head .more:hover,.topic-list span { -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out}.topic-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap}@media (max-width:991px) { .topic-list { margin-left: -10px; margin-bottom: -10px }}@media (max-width:991px) { .topic-list .topic { padding: 0 0 10px 10px }}.topic-list .topic-wrap { position: relative; display: block; width: 100%; text-decoration: none; border-radius: 4px; overflow: hidden}.topic-list .topic-wrap:hover { text-decoration: none}.topic-list .cover-container img,.topic-list .topic-wrap:hover img { -webkit-transition: -webkit-transform .3s ease-out 0s; -o-transition: transform .3s ease-out 0s; transition: transform .3s ease-out 0s; transition: transform .3s ease-out 0s,-webkit-transform .3s ease-out 0s}.topic-list .topic-wrap:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05)}.topic-list .topic-wrap:after,.topic-list .topic-wrap:hover:after { -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s}.topic-list .topic-wrap:hover:after { opacity: .7}.topic-list .topic-wrap:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0,0,0,.3)}.topic-list .cover-container img { width: 100%; height: auto; vertical-align: top}.topic-list span { position: absolute; left: 0; bottom: 0; z-index: 1; top: 50%; width: 100%; margin-top: -10px; padding: 0 15px; font-size: 18px; line-height: 20px; font-weight: 500; text-align: center; color: #fff; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; -webkit-box-sizing: border-box; box-sizing: border-box}@media (max-width:991px) { .topic-list span { font-size: 18px }}@media (max-width:768px) { .topic-list span { font-size: 16px }}@media (max-width:420px) { .topic-list span { font-size: 14px }}.topic-list .cover-container img,.topic-list .topic-wrap:hover img { -webkit-transition: -webkit-transform .3s ease-out 0s; -o-transition: transform .3s ease-out 0s; transition: transform .3s ease-out 0s; transition: transform .3s ease-out 0s,-webkit-transform .3s ease-out 0s}.topic-list .cover-container img { width: 100%; height: auto; vertical-align: top}</style><section id="modules-4"> <div> <div> <ul> <li> <a href="https://www.jxip.net/cms" target="_blank"> <div> <img src="/upload/1731683215.jpg" alt="必备捷径"> </div> <span>必备捷径</span> </a> </li> <li> <a href="https://www.jxip.net/fuli" target="_blank"> <div> <img src="/upload/1731683219.jpg" alt="优惠福利"> </div> <span>优惠福利</span> </a> </li> <li> <a href="https://www.jxip.net/goodshare" target="_blank"> <div> <img src="/upload/1731683274.jpg" alt="软件工具"> </div> <span>软件工具</span> </a> </li> <li> <a href="https://www.jxip.net" target="_blank"> <div> <img src="/upload/1731683373.jpg" alt="奇闻异事"> </div> <span>奇闻异事</span> </a> </li> </ul> </div> </div></section>
中间菜单实现