简约大气的全屏背景壁纸导航网源码（免费）

  • 开发
  • 13

简约大气的全屏背景壁纸导航网模板

  • 效果图
  • 部分代码
  • 领取源码
  • 下期更新预报

效果图

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="zh-CN">
<!--版权归孤独 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>孤客</title>
    <meta name="keywords" content="孤独导航、网址大全、网址导航、免费收录、网址大全">
    <meta name="description" content="孤独导航网,为用户提供一站式优质服务,优化用户体验,收录各大平台网站,免费收录各类网站,打造最与众不同的站点导航,导航站点分类齐全,拥有独特的分类栏目,欢迎各大平台合作支持!">
    <!--孤客工作室 -->
    <link rel='stylesheet' id='iconfont-css' href='static/css/iconfont.css' type='text/css' media='all'>
    <link rel='stylesheet' id='bootstrap-css' href='static/css/bootstrap.min.css' type='text/css' media='all'>
    <link rel='stylesheet' id='style-css' href='static/css/style.min.css' type='text/css' media='all'>
    <script src='static/js/jquery.min.js' id='jquery-js'></script>
	<style>

    .bg {
        background-image: url('./static/image/1.jpg')
    }

    </style>
</head>
<body class="user-bookmark-body bookmark-default">
<div id="loading">
    <div id="preloader_3"></div>
</div>
<div class="page-container">
    <div class="bookmark-bg">
        <div class="img-bg bg" id="img-bg"></div>
        <div class="gradient-linear"></div>
    </div>
    <header class="navbar navbar-dark fixed-top">
        <div class="weather">
            <div id="he-plugin-simple" style="display: contents;"></div>
            <script>
                WIDGET = {
                    "CONFIG": {
                        "modules": "02",
                        "background": "5",
                        "tmpColor": "FFFFFF",
                        "tmpSize": "20",
                        "cityColor": "FFFFFF",
                        "citySize": "16",
                        "aqiColor": "FFFFFF",
                        "aqiSize": "16",
                        "weatherIconSize": "30",
                        "alertIconSize": "18",
                        "padding": "0px 5px 0px 5px",
                        "shadow": "0",
                        "language": "auto",
                        "fixed": "false",
                        "vertical": "top",
                        "horizontal": "left",
                        "key": "257fe54e3a0b4cd29b399d2831bd56e0"
                    }
                }
            </script>
            <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0" defer=""></script>
        </div>
    </header>
    <div class="header-big mb-4">
        <div class="s-search">
            <div id="search" class="s-search mx-auto">
                <div class="big-title text-center mb-3 mb-md-5 mt-2">
                    <p class="h1" style="letter-spacing: 6px;">孤客技术导航</p>
                </div>
                <div id="search-list-menu" class="hide-type-list">
                    <div class="s-type text-center overflow-x-auto">
                        <div class="s-type-list big">
                            <div class="anchor" style="position: absolute; left: 50%; opacity: 0;"></div>
                            <label for="type-baidu1" class="active" data-id="group-b"><span>搜索</span></label>
                            <label for="type-br" data-id="group-c"><span>工具</span></label>
                            <label for="type-zhihu" for="type-taobao1" data-id="group-e"><span>生活</span></label>
                            <label for="type-zhaopin" data-id="group-f"><span>求职</span></label>
                        </div>
                    </div>
                </div>
                <form action="/search.html?key=" method="get" target="_blank" class="super-search-fm">
                    <input type="text" id="search-text" class="form-control smart-tips search-key" zhannei="" placeholder="输入关键字搜索" style="outline:0" autocomplete="off">
                    <button type="submit"><i class="iconfont icon-search"></i></button>
                </form>
                <div id="search-list" class="hide-type-list">
                    <div class="search-group group-b s-current">
                        <ul class="search-type">
                            <li><input checked="checked" hidden="" type="radio" name="type" id="type-baidu1" value="https://www.baidu.com/s?wd=" data-placeholder="百度一下"><label for="type-baidu1"><span class="text-muted">百度</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-google1" value="https://www.google.com/search?q=" data-placeholder="谷歌两下"><label for="type-google1"><span class="text-muted">Google</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-360" value="https://www.so.com/s?q=" data-placeholder="360好搜"><label for="type-360"><span class="text-muted">360</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-sogo" value="https://www.sogou.com/web?query=" data-placeholder="搜狗搜索"><label for="type-sogo"><span class="text-muted">搜狗</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-bing1" value="https://cn.bing.com/search?q=" data-placeholder="微软Bing搜索"><label for="type-bing1"><span class="text-muted">Bing</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-sm" value="https://yz.m.sm.cn/s?q=" data-placeholder="UC移动端搜索"><label for="type-sm"><span class="text-muted">神马</span></label></li>
                        </ul>
                    </div>
                    <div class="search-group group-c ">
                        <ul class="search-type">
                            <li><input hidden="" type="radio" name="type" id="type-br" value="https://rank.chinaz.com/all/" data-placeholder="请输入网址(不带https://)"><label for="type-br"><span class="text-muted">权重查询</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-links" value="https://link.chinaz.com/" data-placeholder="请输入网址(不带https://)"><label for="type-links"><span class="text-muted">友链检测</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-icp" value="https://icp.aizhan.com/" data-placeholder="请输入网址(不带https://)"><label for="type-icp"><span class="text-muted">备案查询</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-ping" value="https://ping.chinaz.com/" data-placeholder="请输入网址(不带https://)"><label for="type-ping"><span class="text-muted">PING检测</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-404" value="https://tool.chinaz.com/Links/?DAddress=" data-placeholder="请输入网址(不带https://)"><label for="type-404"><span class="text-muted">死链检测</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-ciku" value="https://www.ciku5.com/s?wd=" data-placeholder="请输入关键词"><label for="type-ciku"><span class="text-muted">关键词挖掘</span></label></li>
                        </ul>
                    </div>
                    <div class="search-group group-d ">
                        <ul class="search-type">
                            <li><input hidden="" type="radio" name="type" id="type-zhihu" value="https://www.zhihu.com/search?type=content&q=" data-placeholder="知乎"><label for="type-zhihu"><span class="text-muted">知乎</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-wechat" value="https://weixin.sogou.com/weixin?type=2&query=" data-placeholder="微信"><label for="type-wechat"><span class="text-muted">微信</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-weibo" value="https://s.weibo.com/weibo/" data-placeholder="微博"><label for="type-weibo"><span class="text-muted">微博</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-douban" value="https://www.douban.com/search?q=" data-placeholder="豆瓣"><label for="type-douban"><span class="text-muted">豆瓣</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-why" value="https://ask.seowhy.com/search/?q=" data-placeholder="SEO问答社区"><label for="type-why"><span class="text-muted">搜外问答</span></label></li>
                        </ul>
                    </div>
                    <div class="search-group group-e ">
                        <ul class="search-type">
                            <li><input hidden="" type="radio" name="type" id="type-taobao1" value="https://s.taobao.com/search?q=" data-placeholder="淘宝"><label for="type-taobao1"><span class="text-muted">淘宝</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-jd" value="https://search.jd.com/Search?keyword=" data-placeholder="京东"><label for="type-jd"><span class="text-muted">京东</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-xiachufang" value="https://www.xiachufang.com/search/?keyword=" data-placeholder="下厨房"><label for="type-xiachufang"><span class="text-muted">下厨房</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-xiangha" value="https://www.xiangha.com/so/?q=caipu&s=" data-placeholder="香哈菜谱"><label for="type-xiangha"><span class="text-muted">香哈菜谱</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-12306" value="https://www.12306.cn/?" data-placeholder="12306"><label for="type-12306"><span class="text-muted">12306</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-kd100" value="https://www.kuaidi100.com/?" data-placeholder="快递100"><label for="type-kd100"><span class="text-muted">快递100</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-qunar" value="https://www.qunar.com/?" data-placeholder="去哪儿"><label for="type-qunar"><span class="text-muted">去哪儿</span></label></li>
                        </ul>
                    </div>
                    <div class="search-group group-f ">
                        <ul class="search-type">
						<li><input hidden="" type="radio" name="type" id="type-liepin" value="https://www.liepin.com/zhaopin/?key=" data-placeholder="猎聘网"><label for="type-liepin"><span class="text-muted">猎聘网</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-zhaopin" value="http://ym.qqmu.com/?key=" data-placeholder="域名抢注"><label for="type-zhaopin"><span class="text-muted">域名抢注</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-51job" value="https://www.qqmu.com/?s=" data-placeholder="QQ沐编程"><label for="type-51job"><span class="text-muted">QQ沐编程</span></label></li>
                            <li><input hidden="" type="radio" name="type" id="type-lagou" value="https://tool.qqmu.com/?s=" data-placeholder="在线工具箱"><label for="type-lagou"><span class="text-muted">在线工具箱</span></label></li>
                            
                        </ul>
                    </div>
                </div>
                <div class="card search-smart-tips" style="display: none">
                    <ul></ul>
                </div>
            </div>
        </div>
    </div>
    <footer class="main-footer footer-type-1 position-relative text-xs">
        <div id="footer-tools" class="d-flex flex-column">
            <a href="javascript:" id="go-to-up" class="btn rounded-circle go-up m-1" rel="go-top">
                <i class="iconfont icon-to-up"></i>
            </a>
            <a href="https://www.vip616.cn" class="btn rounded-circle m-1" data-toggle="tooltip" data-placement="left" title="首页" target="_blank">
                <i class="iconfont icon-home"></i>
            </a>
        </div>
        <div class="footer-inner text-center text-light my-3">
            <div class="footer-text">
                Copyright © 2024 <a href="https://www.vip616.cn"><strong>孤客工作室</strong></a>
            </div>
        </div>
    </footer>
</div>
<script src="static/js/bing.js"></script>
<script src="static/js/popper.min.js"></script>
<script src='static/js/bootstrap.min.js' id='bootstrap-js'></script>
<script src="static/js/theia-sticky-sidebar.js"></script>
<script src='static/js/lazyload.min.js' id='lazyload-js'></script>
<script src='static/js/app.min.js' id='appjs-js'></script>
<script>
    $(document).ready(function () {
        var siteWelcome = $('#loading');
        siteWelcome.addClass('close');
        setTimeout(function () {
            siteWelcome.remove();
        }, 600);
    });
</script>
</body>
</html>

领取源码

源码地址：简约大气的全屏背景壁纸导航网模板源码

下期更新预报

二次元自适应动态引导页

  • 📢博客主页：孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
  • 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻
阅读全部

相关推荐

最近更新

  4. TCP协议是安全的吗?

    2024-05-02 06:10:03       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-05-02 06:10:03       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-05-02 06:10:03       19 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-05-02 06:10:03       20 阅读

热门阅读

  11. LLMNR协议、MDNS协议、NBNS协议

    2024-05-02 06:10:03       12 阅读

  13. CentOS系统如何设置系统默认语言以及命令行输出的语言为英文？ locale

    2024-05-02 06:10:03       12 阅读

  18. Matlab与Python之间的通信和同步

    2024-05-02 06:10:03       12 阅读

  19. 【vscode debug ts文件-配置参考】

    2024-05-02 06:10:03       13 阅读

  23. C#(C Sharp)学习笔记_方法(Medthod)【十六】

    2024-05-02 06:10:03       13 阅读

  24. Python数据分析系列（五）：python数据结构 — Pandas中的Series使用

    2024-05-02 06:10:03       14 阅读

  28. GPU系列(三)：如何管理GPU

    2024-05-02 06:10:03       13 阅读