子比主题 – 顶部多功能导航区块-龙龙资源・资源分享・龙龙资源网・龙龙网络・技术网博客

子比主题 – 顶部多功能导航区块

大家好，今天给大家带来一款比较好看的多功能导航区块，这个功能是我没事逛站的时候在别的地方看到的，于是就仿了一个，测试下来没啥大问题，今天分享给大家，希望对大家有帮助，虽然我标题为顶部导航区块，但是你想放在哪里都是可以的，关键是看你自己，还有代码里的图片引用的是别的站点的，我这边建议你保存下，放在自己的网站里，以防素材丢失。再提一嘴，黑色模式我没有适配，本站用不到，如果你觉得需要的话，自行适配。话不多说，直接开始部署教程！

演示效果：

直接把下方代码放在小工具即可：

<style>
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search {
  height:68px;
  width:1200px;
  position:relative;
  z-index:12;
  margin:0 auto;
  margin-top:-100px;
  z-index:1;
  top:-120px
}
.slide_6_search .searchbox {
  width:1010px;
  margin:0 auto;
  background:rgba(255,255,255,0.5);
  height:48px;
  border-radius:5px;
  padding:10px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .search_input {
  width:865px;
  height:48px;
  background:#fff;
  border-radius:3px;
  position:relative;
  left:0;
  top:0
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox input.text {
  width:469px;
  height:48px;
  position:absolute;
  padding:0 10px;
  color:#999898;
  font-size:14px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox input,.slide_6_search .searchbox  button {
  border:0;
  outline:none;
  background:none;
  filter:chroma(color=#000000)
}
.slide_6_search .searchbox .tag {
  position:absolute;
  right:123px;
  top:0;
  padding:12px 10px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .tag a {
  display:inline;
  padding:3px 8px;
  border-radius:10px;
  background:#EFEFEF;
  float:left;
  margin:0 5px;
  height:18px;
  line-height:18px;
  color:#A0A0A0;
  font-size:12px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .tag a:hover {
  background:#ff0200;
  color:#fff
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .submit {
  display:block;
  width:123px;
  height:48px;
  background:#4E464E;
  position:absolute;
  right:0;
  top:0;
  border-radius:0 3px 3px 0;
  line-height:48px;
  text-align:center;
  color:#fff;
  font-size:20px;
  cursor:pointer
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .submit:hover {
  background:#EB2C17;
  color:#fff
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .submit_s {
  right:-138px;
  display:block;
  width:123px;
  height:48px;
  background:#fe4d3f;
  position:absolute;
  top:0;
  border-radius:3px;
  line-height:48px;
  text-align:center;
  color:#fff;
  font-size:20px;
  cursor:pointer
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_search .searchbox .submit_s:hover {
  background:#EB2C17;
  color:#fff
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_ss {
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  padding:0 30px;
  margin-left:-20px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_jb {
  position:relative;
  border-radius:10px;
  margin-top:-100px;
  margin-bottom:30px!important
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_n {
  display:flex;
  margin:0 auto;
  padding-top:15px;
  height:54px;
  color:#fff;
  font-size:14px;
  justify-content:space-between
}
.slide_6_n .slide_6_s {
  position:relative;
  display:inline-block;
  padding:0 40px;
  height:40px;
  border-radius:73px;
  background:none;
  vertical-align:middle;
  text-align:center;
  line-height:40px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_n .slide_6_s ul {
  float:left;
  margin:0 auto
}
.slide_6_n .slide_6_s li {
  float:left;
  margin-right:40px
}
.slide_6_n .slide_6_s li .first {
  color:#2879f7
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_n .slide_6_s li a {
  float:left;
  color:#606075;
  font-weight:600;
  font-size:14px
}
.slide_6_n .slide_6_y {
  font-weight:600;
  position:relative;
  display:inline-block;
  padding:0 40px;
  height:40px;
  background:none;
  vertical-align:middle;
  text-align:center;
  line-height:40px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_n .slide_6_y a {
  margin-left:40px;
  color:#ffb100
}
.slide_6_d {
  padding-left:20px;
  flex:0 0 25%;
  box-sizing:border-box;
  width:100%;
  max-width:100%
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_d .mini-stats {
  position:relative;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  min-width:0;
  word-wrap:break-word;
  background-color:#fff;
  background-clip:border-box;
  border:1px solid rgba(0,0,0,.125);
  border-radius:.5rem;
  border:none;
  -webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
  box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
  overflow:hidden
}
.mini-stats .mini-stats-content {
  padding:1rem!important
}
.slide_6_d_mb4,.my-4 {
  margin-bottom:1.5rem!important
}
.slide_6_d_right {
  text-align:right!important;
  color:rgba(255,255,255,.5)!important
}
.slide_6_d_right span {
  margin-top:.5rem!important;
  background-color:#f8f9fa;
  margin-bottom:.5rem!important;
  color:#1699dd !important;
  display:inline-block;
  padding:.25em .4em;
  font-size:75%;
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:.25rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.slide_6_d_right p {
  color:#fff
}
.slide_6_d_m {
  margin-left:1rem!important;
  margin-right:1rem!important
}
.slide_6_d_m .mini-stats-desc {
  display:inline-block;
  position:relative;
  bottom:22px;
  height:100%;
  -webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
  box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
  background-color:#ffffff !important;
  padding:1rem!important;
  border-radius:.25rem!important;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
}
.slide_6_d_m .mini-stats-desc li {
  float:left;
  flex:0 0 33.33333%;
  box-sizing:border-box;
  width:100%;
  max-width:100%
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_d_m .mini-stats-desc a {
  display:block;
  height:60px;
  padding:12px 15px 15px 15px
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_d_m .mini-stats-desc a:hover {
  color:var(--primary-color)!important
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_d_m .mini-stats-desc a img {
  display:block;
  width:58px;
  height:45px;
  margin:0 auto 5px
}
/*龙龙资源网：www.ekvv.cn*/
.mini-stats-desc li {
    list-style-type: none;
}
/*龙龙资源网：www.ekvv.cn*/
.slide_6_d_m .mini-stats-desc p {
  display:block;
  height:20px;
  line-height:20px;
  overflow:hidden;
  font-size:14px;
  color:#666;
  text-align:center
}
/*龙龙资源网：www.ekvv.cn*/
</style>
<div class="slide_6_ss">
                            <div class="slide_6_d">
                    <div class="mini-stats">
                        <div class="mini-stats-content" style="background: url(https://www.52jyu.cn/wp-content/uploads/2022/05/2022052508542167.png);background-size: 100% 100%;">
                            <div class="slide_6_d_mb4">
                                <div class="slide_6_d_right">
                                    <span> 精品源码 </span>
                                    <p>精品源码及资源合集</p>
                                </div>
                            </div>
                        </div>
                        <div class="slide_6_d_m">
                            <div class="mini-stats-desc">
                                                                <li>
                                    <a href="/yuanma/app-w" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062599.png">
                                        <p>小程序</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/yuanma/pay" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509195463.png">
                                        <p>支付系统</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/yuanma/mall" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062594.png">
                                        <p>电商源码</p>
                                    </a>
                                </li>
                                                            </div>
                        </div>
                    </div>
                </div>
                              <div class="slide_6_d">
                    <div class="mini-stats">
                        <div class="mini-stats-content" style="background: url(https://www.52jyu.cn/wp-content/uploads/2022/05/2022052508542064.png);background-size: 100% 100%;">
                            <div class="slide_6_d_mb4">
                                <div class="slide_6_d_right">
                                    <span> 商业模板 </span>
                                    <p>模板插件，网站的好帮手</p>
                                </div>
                            </div>
                        </div>
                        <div class="slide_6_d_m">
                            <div class="mini-stats-desc">
                                                                <li>
                                    <a href="/template-plug-in/wp" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062476.png">
                                        <p>WP模板</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/template-plug-in/cms" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062449.png">
                                        <p>CMS模板</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/template-plug-in/other-cms" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062445.png">
                                        <p>其他模板</p>
                                    </a>
                                </li>
                                                            </div>
                        </div>
                    </div>
                </div>
                              <div class="slide_6_d">
                    <div class="mini-stats">
                        <div class="mini-stats-content" style="background: url(https://www.52jyu.cn/wp-content/uploads/2022/05/2022052508542118.png);background-size: 100% 100%;">
                            <div class="slide_6_d_mb4">
                                <div class="slide_6_d_right">
                                    <span> 学习中心 </span>
                                    <p>更多建站教程来这里学习~</p>
                                </div>
                            </div>
                        </div>
                        <div class="slide_6_d_m">
                            <div class="mini-stats-desc">
                                                                <li>
                                    <a href="/study/information" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062345.png">
                                        <p>建站教程</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/study/seo" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/202205250906256.png">
                                        <p>SEO优化</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/study/other-j" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062466.png">
                                        <p>其他教程</p>
                                    </a>
                                </li>
                                                            </div>
                        </div>
                    </div>
                </div>
                              <div class="slide_6_d">
                    <div class="mini-stats">
                        <div class="mini-stats-content" style="background: url(https://www.52jyu.cn/wp-content/uploads/2022/05/2022052508542190.png);background-size: 100% 100%;">
                            <div class="slide_6_d_mb4">
                                <div class="slide_6_d_right">
                                    <span> 更多热门 </span>
                                    <p>更多热门资源点这里哟</p>
                                </div>
                            </div>
                        </div>
                        <div class="slide_6_d_m">
                            <div class="mini-stats-desc">
                                                                <li>
                                    <a href="/s-w" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062598.png">
                                        <p>绿色软件</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/gallery" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509062616.png">
                                        <p>绝美壁纸</p>
                                    </a>
                                </li>
                                                                <li>
                                    <a href="/yuanma/game" target="_blank" class="ceo-dt">
                                        <img src="https://www.52jyu.cn/wp-content/uploads/2022/05/2022052509360758.png">
                                        <p>游戏源码</p>
                                    </a>
                                </li>
                                                            </div>
                        </div>
                    </div>
                </div>
                
          </div>

文章版权声明 1、本网站名称：龙龙资源网
2、本站永久网址：https://www.ekvv.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源标价非源码软件及素材标价，而是收集整理编写教程的人工费用。
7、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。联系我们