ECHO个人博客主题网页模板

简介: echo个人网站主页源代码 - 适合喜欢极简风、清爽又酷酷的专业程序员风格效果的小伙伴, HTML+CSS+JS纯静态实现

  ECHO个人主题网页模板是一款适合个人图文写作与博客的主题。主题极简优雅,采用经典独特的三栏设计,保留线条和足够的留白,展现您文字、图片间的美。页面支持电脑手机自适应,浏览文章图片可加载无刷新http://www.bokequ.com/wordpress/echo/

  ECHO个人静态网页模板特点

  1.用户可以根据个人喜好和博客内容轻松调整模板的各项设置,包括颜色、字体、布局等。这种高度的可定制性满足了不同用户的个性化需求,使他们能够打造出独具特色的博客风格。

  2、无论用户使用电脑、平板还是手机访问博客,都能获得自动调整的布局和适应屏幕尺寸的界面。这种设计考虑到了用户在不同设备上的阅读习惯和需求,提供了更好的浏览体验。

  3、如侧边栏、页脚、菜单等。这些模块为用户提供了更多管理博客内容的选项,使用户能够更方便地展示和组织内容。


<!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" />
<link media="all" href="css/style.css" rel="stylesheet">
<title>ECHO主题演示站 &#8211; wordpress图文博客主题模板</title>
<meta name="description" content="ECHO主题模板是一款适合个人图文写作与博客的主题。主题极简优雅,采用经典独特的三栏设计,保留线条和足够的留白,展现您文字、图片间的美。页面支持电脑手机自适应,浏览文章图片可加载无刷新">
<script type="text/javascript" id="jquery-core-js-extra">
/* <![CDATA[ */
var globals = {"ajax_url":"http:\/\/www.bokequ.com\/wp-admin\/admin-ajax.php","site_url":"http:\/\/www.bokequ.com\/echo","post_id":"0"};
var toc = {"tag":"0"};
var __ = {"load_more":"\u52a0\u8f7d\u66f4\u591a","reached_the_end":"- \u6ca1\u6709\u66f4\u591a\u5185\u5bb9 -","thank_you":"\u8c22\u8c22\u70b9\u8d5e","success":"\u64cd\u4f5c\u6210\u529f","cancelled":"\u53d6\u6d88\u70b9\u8d5e"};
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
<link rel="icon" href="images/favicon.ico" sizes="32x32" />
</head>
<body class="home blog">
<header class="header header-sticky">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container"> <a href="index.html" rel="home" class="navbar-brand"> <img src="images/logo.png" class="" alt="ECHO主题演示站"> </a>
      <div class="d-lg-none">
        <button class="navbar-toggler site-search-toggler px-2 mr-1" type="button"> <i class="text-xl iconfont icon-sousuo"></i> </button>
        <button class="navbar-toggler mobile-menu-toggler px-2" type="button" > <i class="text-xl iconfont icon-Dial-numbers"></i> </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav site-menu ml-4 mr-auto">
          <li id="menu-item-161" class="menu-item current-menu-item current_page_item menu-item-home menu-item-161"><a href="index.html" aria-current="page">首页</a></li>
          <li id="menu-item-146" class="menu-item menu-item-146"><a href="wanwu.html">玩物志趣</a></li>
          <li id="menu-item-145" class="menu-item menu-item-145"><a href="ai.html">AI绘画</a></li>
          <li id="menu-item-144" class="menu-item menu-item-144"><a href="sheji.html">设计制作</a></li>
          <li id="menu-item-154" class="menu-item menu-item-154"><a href="lanmu.html">精选栏目</a></li>
          <li id="menu-item-222" class="menu-item menu-item-222"><a href="1.html">示例页面</a></li>
          <li id="menu-item-152" class="menu-item menu-item-152"><a target="_blank" rel="noopener" href="http://www.bokequ.com/typecho/flip/">购买主题</a></li>
        </ul>
        <ul class="navbar-nav order-1 order-lg-2">
          <li class="nav-item"> <a class="nav-link site-search-toggler" href="javascript:;"><i class="text-xl iconfont icon-sousuo"></i></a> </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<section class="site-banner bg-light py-3 py-md-4 py-lg-5">
  <div class="container">
    <div class="row no-gutters">
      <div class="banner-left col-12 col-lg-9">
        <div class="banner-index banner-has-dots owl-carousel owl-theme">
          <div class="item">
            <div class="media media-21x9 rounded"> <a href="#" target="_blank" class="media-content nc-no-lazy" style="background-image: url(images/silhouette-8341334_1280.jpg)"></a>
              <div class="media-overlay overlay-bottom p-2 p-lg-3">
                <div class="h5 h-2x"> <a class="list-title text-white" href="#" target="_blank">轮廓、天空、山图片</a> </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="media media-21x9 rounded"> <a href="#/107.html" target="_blank" class="media-content nc-no-lazy" style="background-image: url(images/lunbo-2-6.jpg)"></a>
              <div class="media-overlay overlay-bottom p-2 p-lg-3">
                <div class="h5 h-2x"> <a class="list-title text-white" href="#/107.html" target="_blank"></a>黄昏下的城市、天空图片 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-right col-12 col-lg-3 mt-2 mt-lg-0">
        <div class="row-xs my-n1">
          <div class="col-4 col-md-4 col-lg-12 py-1">
            <div class="list-item list-overlay">
              <div class="media media-21x9 rounded"> <a class="media-content" href="#" target="_blank" style="background-image: url(images/ai-generated-8786565_1280.jpg);"></a>
                <div class="media-overlay overlay-bottom p-1 p-md-2">
                  <div class="text-sm h-2x"> <a href="#" target="_blank" class="list-title">人物-天空-草原-风景图</a> </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-4 col-md-4 col-lg-12 py-1">
            <div class="list-item list-overlay">
              <div class="media media-21x9 rounded"> <a class="media-content" href="#" target="_blank" style="background-image: url(images/lunbo-2-4.jpg);"></a>
                <div class="media-overlay overlay-bottom p-1 p-md-2">
                  <div class="text-sm h-2x"> <a href="#" target="_blank" class="list-title">AI生成人物图 </a> </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-4 col-md-4 col-lg-12 py-1">
            <div class="list-item list-overlay">
              <div class="media media-21x9 rounded"> <a class="media-content" href="#" target="_blank" style="background-image: url(images/ai-generated-8876309_1280.jpg);"></a>
                <div class="media-overlay overlay-bottom p-1 p-md-2">
                  <div class="text-sm h-2x"> <a href="#" target="_blank" class="list-title">近距离接触星球</a> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<main class="py-4 py-md-5">
  <div class="container">
    <div class="row no-gutters">
      <div class="col-md-3 col-lg-2 col-xl-2 sidebar-left d-none d-md-block ">
        <div id="menu_cat-2" class="widget mb-5 widget-sub-menu">
          <ul>
            <li class="menu-item current-menu-item current_page_item menu-item-home menu-item-161"><a href="#/" aria-current="page">首页</a></li>
            <li class="menu-item menu-item-146"><a href="wanwu.html">玩物志趣</a></li>
            <li class="menu-item menu-item-145"><a href="ai.html">AI绘画</a></li>
            <li class="menu-item menu-item-144"><a href="sheji.html">设计制作</a></li>
            <li class="menu-item menu-item-154"><a href="lanmu.html">精选栏目</a></li>
            <li class="menu-item menu-item-222"><a href="1.html">示例页面</a></li>
            <li class="menu-item menu-item-152"><a target="_blank" rel="noopener" href="http://www.bokequ.com/wordpress/echo/">购买主题</a></li>
          </ul>
        </div>
        <div id="recommended_posts-3" class="widget mb-5 Recommended_Posts">
          <div class="widget-title"><span class="text-height-xs border-left border-primary border-3 px-3">推荐阅读</span></div>
          <div class="list">
            <div class="list-item">
              <div class="media media-21x9 rounded mb-2"> <a href="#/108.html" target="_blank" class="media-content " style="background-image: url('images/ai-generated-8819859_1280.jpg');"></a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/108.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">12个必看的创意设计网站,你知道吗</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item">
              <div class="media media-21x9 rounded mb-2"> <a href="#/107.html" target="_blank" class="media-content " style="background-image: url('images/ai-drawing-generator-summary18.png');"></a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/107.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">3个免费抠图小工具,让你轻松做设计!</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item">
              <div class="media media-21x9 rounded mb-2"> <a href="#/106.html" target="_blank" class="media-content " style="background-image: url('images/cosmos-7730687_1280.jpg');"></a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/106.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">5个方便好用的图标生成器分享</div>
                  </a> </div>
              </div>
            </div>
          </div>
        </div>
        <div id="tag_cloud-2" class="widget mb-5 widget_tag_cloud">
          <div class="widget-title"><span class="text-height-xs border-left border-primary border-3 px-3">标签</span></div>
          <div class="tagcloud"><a href="#facebook" class="tag-cloud-link tag-link-5 tag-link-position-1" style="font-size: 8pt;" aria-label="Facebook (1 项)">Facebook</a> <a href="#netscape" class="tag-cloud-link tag-link-6 tag-link-position-2" style="font-size: 8pt;" aria-label="Netscape (1 项)">Netscape</a> <a href="#%e5%85%b0%e5%8d%9a%e5%9f%ba%e5%b0%bc" class="tag-cloud-link tag-link-7 tag-link-position-3" style="font-size: 8pt;" aria-label="兰博基尼 (1 项)">兰博基尼</a> <a href="#" class="tag-cloud-link tag-link-8 tag-link-position-4" style="font-size: 8pt;" aria-label="魔方玩法 (5 项)">魔方玩法</a> <a href="#%e5%b7%a5%e4%b8%9a%e5%88%b6%e9%80%a0%e7%9a%84%e7%9a%87%e5%86%a0" class="tag-cloud-link tag-link-9 tag-link-position-5" style="font-size: 22pt;" aria-label="工业制造的皇冠 (2 项)">工业制造的皇冠</a> <a href="#%" class="tag-cloud-link tag-link-10 tag-link-position-6" style="font-size: 8pt;" aria-label="图片设计 (1 项)">图片设计</a> <a href="#%e6%96%b0%e6%89%8b%e4%ba%91%e9%9b%86" class="tag-cloud-link tag-link-11 tag-link-position-7" style="font-size: 8pt;" aria-label="新手云集 (1 项)">新手云集</a> <a href="#%e6%9c%ac%e5%9c%9f%e6%b1%bd%e8%bd%a6%e5%93%81%e7%89%8c" class="tag-cloud-link tag-link-12 tag-link-position-8" style="font-size: 8pt;" aria-label="本土汽车品牌 (1 项)">本土汽车品牌</a> <a href="#" class="tag-cloud-link tag-link-13 tag-link-position-9" style="font-size: 8pt;" aria-label="无人机(1 项)">无人机</a> <a href="#" class="tag-cloud-link tag-link-14 tag-link-position-10" style="font-size: 8pt;" aria-label="AI绘图 (1 项)">AI绘图</a> <a href="#%e7%89%b9%e6%96%af%e6%8b%89" class="tag-cloud-link tag-link-15 tag-link-position-11" style="font-size: 8pt;" aria-label="特斯拉 (1 项)">特斯拉</a></div>
        </div>
      </div>
      <div class="col-md-9 col-lg-10 col-xl-7 pl-md-4 pl-lg-5 pl-xl-5 pr-xl-5">
        <div class="list-home list-border">
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/108.html" class="h-2x">5个免费可商用的高清图片素材网站-设计师专用</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="sheji.html">设计制作</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                    <div> <span class="badge badge-danger badge-echo">推荐</span> </div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/108.html" title="5个免费可商用的高清图片素材网站" style="background-image:url('images/flower-fields-8376054_1280.jpg')"></a>
                  <div class="media-overlay overlay-top pt-3 pl-3"> <span class="btn btn-dark btn-icon btn-rounded "> <span> <i class="iconfont icon-Video-camera"></i> </span> </span> </div>
                </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>现在图片素材变得越来越重要。. 不管是设计、文章配图,还是视频制作,图片都至关重要。. 但是图片版权一直都是困扰很多设计、自媒体以及企业的大问题。但也有很多免费可商用的素材图片站。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/106.html" class="h-2x"> UE设计需要用到哪些设计软件?</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="sheji.html">设计制作</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                    <div> <span class="badge badge-danger badge-echo">推荐</span> </div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/106.html" title="UE设计需要用到哪些设计软件?" style="background-image:url('images/ai-generated-8612487_1280.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>UE设计是什么?UE 设计即用户体验设计,它是一种专注于创建直观、高效和美观的界面,是以提升用户体验的设计活动为目的的一个设计领域。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item d-none d-lg-flex"> <a href="#" target="_blank"> <img src="images/2020091004431816.jpg" alt=""> </a> </div>
          <div class="list-item d-lg-none"> <a href="#" target="_blank"> <img src="images/2020091004431816.jpg" alt=""> </a> </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/104.html" class="h-2x">AI绘画教程:Midjourney 使用方法与技巧从入门到精通 </a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="ai.html">AI绘画</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                    <div> <span class="badge badge-danger badge-echo">推荐</span> </div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/104.html" title="AI绘画教程:Midjourney 使用方法与技巧从入门到精通
" style="background-image:url('images/ai-generated-8099859_1280.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>随着人工智能技术的不断发展,AI绘画成为了一个备受关注的领域。Midjourney 是一款备受好评的AI绘画工具,结合了先进的算法和艺术设计,帮助用户在绘画创作中发挥创造力。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/107.html" class="h-2x">如何在线使用免费工具绘制原型图</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="sheji.html">设计制作</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/107.html" title="如何在线使用免费工具绘制原型图" style="background-image:url('images/laptop-7723139_1280.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>在产品开发过程中,原型图的作用超级重要,它不仅仅是一个框架,而更像是把页面布局和交互方式以逼真的形式实现出来,让用户能够直观地预览最终产品的效果。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/105.html" class="h-2x">AI绘图的场景应用:文生图、图生图</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="ai.html">AI绘画</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/105.html" title="AI绘图的场景应用:文生图、图生图" style="background-image:url('images/ai-drawing-generator-summary2.jpg')"></a>
                  <div class="media-overlay overlay-top pt-3 px-3"> <span class="btn btn-dark btn-icon btn-rounded "> <span> <i class="iconfont icon-Picture"></i> </span> </span> </div>
                </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>AIGC技术的未来发展前景广阔,随着人工智能技术的不断发展,AIGC技术也将不断提高。未来,AIGC技术将在游戏和计算领域得到更广泛的应用
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/103.html" class="h-2x">AI画图软件推荐:Pixso AI</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="ai.html">AI绘画</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/103.html" title="AI画图软件推荐:Pixso AI" style="background-image:url('images/ai01-softwares02.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>Pixso,一个国产在线设计工具,旨在为产品设计研究提供全方位的协作工作流。它融合了白板、原型制作、设计创作、项目交付以及管理等多元功能于一体,满足一站式设计需求。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/159.html" class="h-2x"> 智能AI绘图工具AutoDraw使用教程</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="#/category/wanwu">AI绘画</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/159.html" title="智能AI绘图工具AutoDraw使用教程" style="background-image:url('images/1693887058123.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>智能AI绘图工具AutoDraw使用教程。AutoDraw是一个免费的绘图程序,可以在台式机、手机和平板电脑上使用。 虽然它是免费的,但它不像其他免费工具那样在其中显示任何广告。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/74.html" class="h-2x"> 在线绘图新方式!11款好用的AI绘图工具推荐. </a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="wanwu.html">玩物志趣</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/74.html" title="在线绘图新方式!11款好用的AI绘图工具推荐." style="background-image:url('images/ai.jpg')"></a>
                  <div class="media-overlay overlay-top pt-3 px-3"> <span class="btn btn-dark btn-icon btn-rounded "> <span> <i class="iconfont icon-Picture"></i> </span> </span> </div>
                </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>AI画图软件通过使用人工智能技术,可以提供许多传统工具无法比拟的特性和优点。不仅如此,AI画图软件也因其易于使用和高效的特性,正逐渐在各领域取代传统的手动绘图工具。。
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/73.html" class="h-2x">不只是拍风景,无人机创意玩法</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="wanwu.html">玩物志趣</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/73.html" title="不只是拍风景,无人机创意玩法" style="background-image:url('images/wurenji.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>“ 说起无人机. 可能很多人都不陌生了. 随着无人机的日益发展. 大到军用. 小到民用. 快人手必备一台了. 网上搜一下“无人机” 都会发现有很多稀奇古怪的玩法.新手怕炸机?手把手教你大疆无人机模拟器.
                    ...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="list-item">
            <div class="list-content">
              <div class="list-body">
                <div class="list-title text-lg mb-2 mb-md-3"> <a href="#/72.html" class="h-2x">PS5、XBOX、Switch:3大游戏主机到底怎么选</a> </div>
                <div class="list-meta text-xs text-muted mb-2 mb-md-3">
                  <div class="d-flex flex-fill align-items-center">
                    <div> <span class="d-inline-block"> <a href="wanwu.html">玩物志趣</a> <i class="px-2"></i> </span>
                      <time class="d-inline-block">4 年前</time>
                    </div>
                    <div class="flex-fill"></div>
                  </div>
                </div>
                <div class="media media-21x9 rounded mb-md-3"> <a class="media-content" href="#/72.html" title="PS5、XBOX、Switch:3大游戏主机到底怎么选" style="background-image:url('images/19_720w.jpg')"></a> </div>
                <div class="d-none d-md-block list-desc text-sm text-secondary h-2x">
                  <p>PS5是目前游戏市场上备受瞩目的主机之一,但对于想要购买PS5但不知道如何选择的小伙伴们来说,选择适合自己的版本可能会成为一个难题。想买个游戏主机次时代大作,面对微软、索尼、任天堂三分天下,不知道该怎么选?XSX、PS5、Switch到底买哪个?</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <nav class="navigation pagination" aria-label="Posts Navigation">
          <h2 class="screen-reader-text">Posts Navigation</h2>
          <div class="nav-links"><span aria-current="page" class="page-numbers current">1</span> <a class="page-numbers" href="#/page/2">2</a> <a class="page-numbers" href="#/page/3">3</a> <a class="next page-numbers" href="#/page/2">NEXT</a></div>
        </nav>
      </div>
      <div class="col-lg-3 col-xl-3 sidebar-right border-left border-light d-none d-xl-block pl-lg-5">
        <div id="recommended_posts-2" class="widget mb-5 Recommended_Posts">
          <div class="widget-title"><span class="text-height-xs border-left border-primary border-3 px-3">推荐阅读</span></div>
          <div class="list">
            <div class="list-item list-overlay overlay-hover">
              <div class="media media-21x9 rounded"> <a href="#/108.html" target="_blank" class="media-content" style="background-image:url('images/ai-image3.jpg')">
                <div class="overlay"></div>
                </a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/108.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">国内外9个AI智能创作图像和艺术画网站</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item list-overlay overlay-hover">
              <div class="media media-21x9 rounded"> <a href="#/107.html" target="_blank" class="media-content" style="background-image:url('images/1693887058123.jpg')">
                <div class="overlay"></div>
                </a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/107.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">AutoDrawAI绘图生成器使用方法</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item list-overlay overlay-hover">
              <div class="media media-21x9 rounded"> <a href="#/106.html" target="_blank" class="media-content" style="background-image:url('images/ai-generated-8757191_1280.jpg')">
                <div class="overlay"></div>
                </a> </div>
              <div class="list-content">
                <div class="list-body "> <a href="#/106.html" target="_blank" class="list-title text-sm">
                  <div class="h-2x">AI绘图教学,3分钟掌握</div>
                  </a> </div>
              </div>
            </div>
          </div>
        </div>
        <div id="recommended_topics-2" class="widget mb-5 Recommended_Topics">
          <div class="widget-title"><span class="text-height-xs border-left border-primary border-3 px-3">推荐专题</span></div>
          <div class="list">
            <div class="list-item list-overlay rounded overlay-hover">
              <div class="media media-21x9 rounded"> <a class="media-content" title="产业互联网" style="background-image: url('images/web.jpg');">
                <div class="overlay"></div>
                </a> </div>
              <div class="media-overlay">
                <div class="m-auto px-2"> <a href="#chanpinhulianwang" class="list-title text-sm" target="_blank">
                  <div class="h-2x">产业互联网</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item list-overlay rounded overlay-hover">
              <div class="media media-21x9 rounded"> <a class="media-content" title="美图景色" style="background-image: url('images/jingse.jpg');">
                <div class="overlay"></div>
                </a> </div>
              <div class="media-overlay">
                <div class="m-auto px-2"> <a href="#shijiebaitai" class="list-title text-sm" target="_blank">
                  <div class="h-2x">美图景色</div>
                  </a> </div>
              </div>
            </div>
            <div class="list-item list-overlay rounded overlay-hover">
              <div class="media media-21x9 rounded"> <a class="media-content" title="出发吧,向着太空" style="background-image: url('images/taikong.jpg');">
                <div class="overlay"></div>
                </a> </div>
              <div class="media-overlay">
                <div class="m-auto px-2"> <a href="#taikong" class="list-title text-sm" target="_blank">
                  <div class="h-2x">出发吧,向着太空</div>
                  </a> </div>
              </div>
            </div>
          </div>
        </div>
        <div id="media_image-2" class="widget mb-5 widget_media_image"><a href="#"><img width="1200" height="1025" src="images/child-8679364_1280.jpg" class="image wp-image-134  attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="lazy" srcset="images/child-8679364_1280.jpg 1200w, images/child-8679364_1280.jpg 300w, images/child-8679364_1280.jpg 1024w, images/child-8679364_1280.jpg 768w, images/child-8679364_1280.jpg 200w" sizes="(max-width: 1200px) 100vw, 1200px" /></a></div>
      </div>
    </div>
  </div>
</main>
<footer class=" text-center text-lg-left border-top border-light py-3 py-md-5">
  <div class="container">
    <div class="footer-top footer-siteinfo d-flex flex-fill align-items-lg-center flex-column flex-lg-row">
      <div class="flex-fill text-muted text-xs  order-2 order-lg-1"> <span class="d-inline-block">Copyright © 2024 <a class="text-muted" href="index.html" title="ECHO主题演示站" rel="home">ECHO主题演示站</a>. All rights reserved.</span> <span class="d-inline-block">Designed by <a class="text-muted" href="#" title="wordpress主题模板演示">wordpress主题模板</a>.</span> <a href="#" class="d-none d-lg-inline-block"><i class="icon icon-beian"></i>公安备案号123456789</a>  </div>
      <div class="list-site-social d-lg-flex flex-lg-nowrap order-1 order-lg-2 mt-2 mt-md-0 mb-3 mb-lg-0"> <a href="http://www.bokequ.com/" class="btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"><span><i class="text-md iconfont icon-weibo"></i></span></a> <a href="javascript:" 
          class="single-popup btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"
          data-img="images/2019121617035814.jpg"
          data-title="扫码关注"
          data-desc="自定义"> <span><i class="text-md iconfont icon-wechat"></i></span></a> <a href="https://wpa.qq.com/msgrd?v=3&uin=2195335317&site=qq&menu=yes" target="_blank" class="btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"><span><i class="text-md iconfont icon-qq"></i></span></a> <a href="#" target="_blank" class="btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"><span><i class="text-md iconfont icon-facebook"></i></span></a> <a href="#" target="_blank" class="btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"><span><i class="text-md iconfont icon-instagram-alt"></i></span></a> <a href="#" target="_blank" class="btn btn-icon btn-light btn-rounded mr-2 mr-lg-0 ml-lg-2"><span><i class="text-md iconfont icon-twitter"></i></span></a> </div>
    </div>
    <div class="footer-bottom footer-sitelinks text-muted text-xs bg-light rounded p-3 p-md-3 p-lg-3 mt-3 mt-lg-5"> <span class="mr-1">自定义 : </span> <a href="http://www.bokequ.com/wordpress/cosy/" target="_blank">cosy主题模板</a> <a href="http://www.bokequ.com/wordpress/mango/" target="_blank">mango</a> <a href="http://www.bokequ.com/wordpress/once/" target="_blank">once主题</a> <a href="http://www.bokequ.com/wordpress/living/" target="_blank">living主题模板</a> <a href="http://www.bokequ.com/wordpress/reverie/" target="_blank">reverie</a> <a href="#" target="_blank">细节猎人</a> </div>
  </div>
</footer>
<div class="mobile-sidebar">
  <div class="mobile-overlay"></div>
  <div class="mobile-menu">
    <ul>
      <li class="menu-item current-menu-item current_page_item menu-item-home menu-item-161"><a href="#/" aria-current="page">首页</a></li>
      <li class="menu-item menu-item-146"><a href="wanwu.html">玩物志趣</a></li>
      <li class="menu-item menu-item-145"><a href="ai.html">AI绘画</a></li>
      <li class="menu-item menu-item-144"><a href="sheji.html">设计制作</a></li>
      <li class="menu-item menu-item-154"><a href="lanmu.html">精选栏目</a></li>
      <li class="menu-item menu-item-222"><a href="1.html">示例页面</a></li>
      <li class="menu-item menu-item-152"><a target="_blank" rel="noopener" href="http://www.bokequ.com/wordpress/echo/">购买主题</a></li>
    </ul>
  </div>
</div>
<div id="widget-to-top">
  <ul>
    <li class="my-2"><a class="btn btn-light btn-icon btn-totop" href="javascript:"><span><i class="text-md iconfont icon-Control"></i></span></a></li>
  </ul>
</div>
<template id="site-search-template">
  <div class="w-64 mx-auto my-4">
    <svg t="1571940901442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1220" data-spm-anchor-id="a313x.7781069.0.i9" width="64" height="64">
      <path d="M345.6 445.525333h-68.266667a12.8 12.8 0 0 1 0-25.6h68.266667a12.8 12.8 0 0 1 0 25.6zM465.066667 321.792h-68.266667a12.8 12.8 0 0 1 0-25.6h68.266667a12.8 12.8 0 0 1 0 25.6z m-119.466667 0h-68.266667a12.8 12.8 0 0 1 0-25.6h68.266667a12.8 12.8 0 0 1 0 25.6z" fill="#1089FF" p-id="1221" data-spm-anchor-id="a313x.7781069.0.i10" class=""></path>
      <path d="M339.2 806.741333h-145.066667a68.266667 68.266667 0 0 1-68.266666-68.266666v-546.133334a68.266667 68.266667 0 0 1 68.266666-68.266666h576a68.266667 68.266667 0 0 1 68.266667 68.266666v161.450667a68.266667 68.266667 0 0 1-68.266667-68.266667V192.341333h-576v546.133334h76.8a68.266667 68.266667 0 0 1 68.266667 68.266666z" fill="#23374d" p-id="1222" data-spm-anchor-id="a313x.7781069.0.i11" class="selected"></path>
      <path d="M864 899.925333a34.133333 34.133333 0 0 1-24.149333-9.984L750.933333 801.365333a34.133333 34.133333 0 0 1 48.298667-48.298666l88.576 88.576a34.133333 34.133333 0 0 1-24.149333 58.282666z" fill="#23374d" p-id="1223" data-spm-anchor-id="a313x.7781069.0.i7" class="selected"></path>
      <path d="M626.602667 872.874667A244.565333 244.565333 0 1 1 799.573333 455.424a244.48 244.48 0 0 1-172.970666 417.450667z m0-420.778667A176.298667 176.298667 0 1 0 750.933333 503.466667a175.872 175.872 0 0 0-124.330666-51.2z" fill="#1089FF" p-id="1224" data-spm-anchor-id="a313x.7781069.0.i8" class=""></path>
    </svg>
  </div>
  <form action="#" class="text-center px-md-5 pb-md-5">
    <div class="form-group mb-md-4">
      <input type="text" class="form-control form-control-lg" name="s" placeholder="请输入搜索关键词并按回车键…">
    </div>
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </form>
</template>
<script type="text/javascript" id="hcb-script-js-extra">
/* <![CDATA[ */
var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"Copy code to clipboard"};
/* ]]> */
</script> 
<script defer src="js/js.js"></script>
</body>
</html>
目录
相关文章
|
2月前
|
JavaScript 前端开发 搜索推荐
基于模版的内容网站开发
对于内容网站形成于上个世纪九十年代,Web1.0时代开发的网站大多数都是基于内容网站,比如新闻类。开发这类的网站可以采用ASP、JSP、PHP技术,但是基于这类开发出来的网站,内容都是在阅读的时候实时的从数据库中读取的,对于搜索引擎网站,比如百度、Google的排行榜上排名往往很低,只有做成静态的HTML,才可以被搜索引擎加大排名。本文以一个内容发布网站来介绍基于模版的内容网站开发。
46 6
基于模版的内容网站开发
|
3月前
|
JavaScript 前端开发 Shell
使用vitepress搭建自己的静态个人博客 || 个人知识库
使用vitepress搭建自己的静态个人博客 || 个人知识库
64 0
|
5月前
|
PHP SEO
WordPress强大多功能主题模板The7 v9.16.0
The7可以与WPBakery Page Builder(原Visual Composer)和Ultimate Addons的完全无缝集成。它也与大多数流行的插件完全兼容,例如WooCommerce,WPML,Yoast SEO,All in One WP Migration,W3 Total Cache等。大多数用户均表示:The7是迄今为止与这些插件一起使用的最佳主题!
42 2
|
6月前
|
前端开发
wordpress博客趣主题个人静态网页模板
博客趣wordpress页面模板适合个人博客,个人模板等内容分享。
141 0
|
PHP
Typecho-handsome主题——时间轴日志模板
本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
689 2
Typecho-handsome主题——时间轴日志模板
|
前端开发 JavaScript 开发者
Typecho-handsome主题美化
本篇文章主要介绍一下handsome主题的美化教程
523 0
Typecho-handsome主题美化
wordpress自定义主题
wordpress自定义主题 找到 themes文件夹,位置app\public\wp-content\themes 新建一个目录存放主题文件,目录结构如下: 这里我们的目录名是:fictional-university-theme 目录结构就是这样的: fictional-university-theme index.php style.css screenshot.png (放入一张自己的图,命名为screenshot.png) 在style.css中定义主题相关信息,如下
123 0
wordpress自定义主题
我的wp记录--WordPress3.0导航菜单图文使用教程
一、首先,选择进入自定义导航菜单设置页面。 登录WordPress后台,首页→外观→菜单 如果你的主题不支持WordPress3.0导航菜单功能,顶部会有下图的提示: 可以参考下面两篇文章,增加主题对导航菜单功能的支持。
1388 0
|
前端开发 JavaScript
在WordPress中添加简书风格的连载目录和文章导航
结合jQuery和WordPress获取文章链接的函数实现一个简书风格的连载目录和文章导航
1946 0
|
开发工具 git Shell
个人博客主题设置
默认在你用 hexo + git + github 已经搭建好一个静态博客的情况下配置主题。 安装主题 安装的过程就一行代码,你需要在博客根目录右键 Git Bash Here 输入以下命令: git clone https://github.com/theme-next/hexo-theme-next themes / next 以上代码的意思是从 点这里 将next下载到当前目录下的themes里面的next文件夹中。
938 0