网站中间菜单实现代码

<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 class="section wpcom-modules modules-special" id="modules-4">
                    <div class="sec-panel topic-recommend">
                        <div class="sec-panel-body">
                <ul class="list topic-list topic-col-4">
                                                <li class="topic">
                                <a class="topic-wrap" href="https://www.jxip.net/cms" target="_blank">
                                    <div class="cover-container">
                                        <img src="https://www.jxip.net/wp-content/uploads/2021/09/1630596818-2021032509190415.jpg" alt="必备捷径">                                    </div>
                                    <span>必备捷径</span>
                                </a>
                            </li>
                                                    <li class="topic">
                                <a class="topic-wrap" href="https://www.jxip.net/fuli" target="_blank">
                                    <div class="cover-container">
                                        <img src="https://www.jxip.net/wp-content/uploads/2021/09/1630596818-2021032608273633-1.jpg" alt="优惠福利">                                    </div>
                                    <span>优惠福利</span>
                                </a>
                            </li>
                                                    <li class="topic">
                                <a class="topic-wrap" href="https://www.jxip.net/goodshare" target="_blank">
                                    <div class="cover-container">
                                        <img src="https://www.jxip.net/wp-content/uploads/2021/09/1630596818-2021032608282663.jpg" alt="软件工具">                                    </div>
                                    <span>软件工具</span>
                                </a>
                            </li>
                                                    <li class="topic">
                                <a class="topic-wrap" href="https://www.jxip.net" target="_blank">
                                    <div class="cover-container">
                                        <img src="https://www.jxip.net/wp-content/uploads/2021/09/1630596818-jeshoots-com-5chl44BAOvk.jpg" alt="奇闻异事">                                    </div>
                                    <span>奇闻异事</span>
                                </a>
                            </li>
                                        </ul>
            </div>
        </div>
</section>