前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >织梦dedecms清新简蓝响应式网站模板

织梦dedecms清新简蓝响应式网站模板

原创
作者头像
博客趣
发布2024-02-21 16:31:31
2280
发布2024-02-21 16:31:31
举报
文章被收录于专栏:博客趣

  traveler模板主题在更大的程度上照顾每个人的需求,菜单、首页每个栏目、侧栏小工具都可以自主开启关闭,只需在后台简单操作,即可打造出一个属于自己的网站。

  traveler模板演示地址http://www.bokequ.com/blog/traveler/

  traveler模板下载地址http://m.bokequ.com/moban/1325.html

模板采取的是响应式3栏布局策略,支持多种移动设备及任何浏览器下获得友好浏览体验。

  菜单和LOGO被放在了左侧栏,极具个性,鲜明张扬。LOGO、菜单、个人的微信微博等信息一目了然,令浏览者对你和网站有深刻的印象!

  首页CMS配置,简单、丰富的内容展示。后台可以自主选择展示内容的方式:幻灯片区域、首页文章列表、首页分类列表、特别推送。令您网站的主要内容直接显示在浏览者面前,配以精美的配图和文字,迅速获取浏览者的关注。

主页html

代码语言:html
复制

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式个人博客自媒体文章类模板traveler</title>
<meta name="description" content="清新简蓝响应式网站模板Traveler适合做个人博客自媒体类站点,可以做技术类,分享心情类文章博客,界面简洁实用,布局规整,首页采用无限加载更多文章,效果很酷。" />
<meta name="keywords" content="个人博客模板traveler,响应式自媒体文章类模板,响应式网页模板traveler" />
<link rel="Shortcut Icon" href="http://www.bokequ.com/blog/traveler/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE;chrome=1">
<script type="text/javascript" src="skin/js/jquery-v1.10.2.min.js"></script>
<link rel='stylesheet' id='fontello-css' href='skin/css/fontello.css' type='text/css' media='all' />
<!--[if lte IE 7]>
<link rel='stylesheet' id='fontello-ie7-css' href='skin/css/fontello-ie7.min.css' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='main-css' href='skin/css/style.css' type='text/css' media='all' />
</head>
<body>
<div id="wrapper">
  <div id="sitetopbar">
    <div class="site-logo">
      <h1><a href="http://www.bokequ.com/blog/traveler/" title="响应式个人博客自媒体文章类模板traveler"> <img src="skin/img/logo.png" alt="响应式个人博客自媒体文章类模板traveler"> </a></h1>
    </div>
    <div class="site-logo-m">
      <h1><a href="http://www.bokequ.com/blog/traveler/" title="响应式个人博客自媒体文章类模板traveler">响应式个人博客自媒体文章类模板traveler</a></h1>
    </div>
    <div role="navigation"  class="site-nav left-menu">
      <h2 class="minimenu-text"><i class="icon-align-justify"></i></h2>
      <ul id="menu-navigation" class="menu">
        <li class='current-menu-item' >
            <a href="http://www.bokequ.com/blog/traveler/">首页</a></li>
        <li class=""><a href="http://www.bokequ.com/blog/traveler/man/">慢生活  
        
         </a>
          <ul>
          
          </ul>
        </li><li class=""><a href="http://www.bokequ.com/blog/traveler/qu/">趣博客  
        
         </a>
          <ul>
          
          </ul>
        </li><li class=""><a href="http://www.bokequ.com/blog/traveler/xiu/">秀主题  
        
         </a>
          <ul>
          
          </ul>
        </li><li class=""><a href="http://www.bokequ.com/blog/traveler/qiji/">美奇迹  
        
         </a>
          <ul>
          
          </ul>
        </li><li class=""><a href="http://www.bokequ.com/blog/traveler/keji/">潮科技  
        
         </a>
          <ul>
          
          </ul>
        </li><li class=""><a href="http://www.bokequ.com/blog/traveler/guanyu/">关于  
        <span class="sign "></span>
         </a>
          <ul  class="sub-menu">
          
            <li><a href="http://www.bokequ.com/blog/traveler/youqing/">友情链接</a></li>
            
          </ul>
        </li>
      </ul>
    </div>
    <div class="social_a">
      <p class="follow"><a class="mfp-follow-link big-link " href="javascript:;"><img class="sux-iconx26" src="skin/img/gz.png" alt="关注我们"><span class="followtext">关注我们</span></a></p>
      <div class="reveal-modal" >
        <div class="leftsocialmask"></div>
        <div id="mfp-follow" class="white-popup">
          <ul class="items clearfix">
            <li class="item"> <a href="http://www.bokequ.com/blog/traveler/" target="_blank" class="social_weibo" rel="nofollow" title="微博"><i class="icon-weibo"></i></a> </li>
            <li class="item"> <a href="http://wpa.qq.com/msgrd?v=3&uin=88888888&site=qq&menu=yes" target="_blank" class="social_qq" rel="nofollow" title="QQ"><i class="icon-qq"></i></a> </li>
            <li class="item"> <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=bokequ@163.com" target="_blank" class="social_email" rel="nofollow" title="邮箱"><i class="icon-mail-alt"></i></a> </li>
            <li class="item"> <a class="social_weixin" ><i class="icon-wechat"></i>
              <div class="chat-tips"> <img style="width:150px;height:150px;" src="skin/img/weixin.jpg" alt="微信订阅号"/></div>
              </a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="left-search">
     <form name="formsearch" method="get" class="form" action="#">
         <input type="hidden" name="kwtype" value="0" />
        <i class=" icon-search"></i>
        <div id="multiple-datasets">
          <input name="q" id="q" type="text" placeholder="搜索">
        </div>
        <video src="http://www.bokequ.com/blog/traveler/jiushiguang.mp3" controls autoplay></video>
      </form>
    </div>
  </div>
  <div id="main">
    <div class="wrap">
      <div class="container mb30">
        <div class="slider">
          <ul id="suxingmeslider">
          <li> <a class="item" href="http://www.bokequ.com/blog/traveler/man/164.html" target="_blank" title="世界那么大我想去看看"> <img src="http://www.bokequ.com/blog/traveler/20240111/1-240211164542296.jpg" alt="世界那么大我想去看看" class="thumbnail"/> </a> </li>
<li> <a class="item" href="http://www.bokequ.com/blog/traveler/man/173.html" target="_blank" title="遇见你是无意,认识你是天意,想着你是情意"> <img src="http://www.bokequ.com/blog/traveler/20240112/1-24021215411V34.jpg" alt="遇见你是无意,认识你是天意,想着你是情意" class="thumbnail"/> </a> </li>
<li> <a class="item" href="http://www.bokequ.com/blog/traveler/man/175.html" target="_blank" title="春の慢时光"> <img src="http://www.bokequ.com/blog/traveler/20240112/1-240212160635958.jpg" alt="春の慢时光" class="thumbnail"/> </a> </li>

          </ul>
        </div>
      </div>
      <div class="index-sticky mb30">
        <div class="sticky-title">
          <h3>置顶文章</h3>
        </div>
        <div class="sticky">
          <ul class="aa">
          <div class="pic345"><a rel="nofollow" href="http://www.bokequ.com/blog/traveler/man/177.html"title="任岁月流逝,我已变老,但愿爱如少年" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240111/1-240211134P1325.jpg" alt="任岁月流逝,我已变老,但愿爱如少年"/> </a> </div>
            <a class="title" href="http://www.bokequ.com/blog/traveler/man/177.html" title="任岁月流逝,我已变老,但愿爱如少年" target="_blank">
            <h2>任岁月流逝,我已变老,但愿爱如少年</h2>
            </a>
            <p class="sticky-info">人生有始就有终。是我们所谓的习惯和内...</p>
 
          </ul>
          <ul class="bb">
          <li>
              <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/man/174.html" title="带着梦想去旅行歌词" target="_blank"> <img src="http://www.bokequ.com/blog/traveler/20240112/1-240212155440M0.jpg" alt="带着梦想去旅行歌词" class="thumbnail"/> </a> </div>
              <a class="title" href="http://www.bokequ.com/blog/traveler/man/174.html" title="带着梦想去旅行歌词" target="_blank">
              <h2>带着梦想去旅行歌词</h2>
              </a> </li>
<li>
              <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/man/165.html" title="时尚荏苒岁月如歌我的旅行日记纪念相册" target="_blank"> <img src="http://www.bokequ.com/blog/alixiu/images/xiu.jpg" alt="时尚荏苒岁月如歌我的旅行日记纪念相册" class="thumbnail"/> </a> </div>
              <a class="title" href="http://www.bokequ.com/blog/traveler/man/165.html" title="时尚荏苒岁月如歌我的旅行日记纪念相册" target="_blank">
              <h2>时尚荏苒岁月如歌我的旅行日记纪念相册</h2>
              </a> </li>
  
          </ul>
        </div>
      </div>
      <div class="index-post mb30">
        <div class="article-title">
          <h3>最新文章</h3>
        </div>
        <div class="posts">
        <div class="content">
            <div class="content-header"> <a href="http://www.bokequ.com/blog/traveler/man/188.html" title="童年回忆-8090后放胶片复古" target="_blank">
              <h2>童年回忆-8090后放胶片复古</h2>
              </a>
              <div class="content-info"> <span class="mr10 postclock">3小时前 12:30 (2024-01-13)</span> <span class="mr10 postuser"><i class="icon-user"></i><a>bokequ</a></span> <span class="mr10 posteye"><i class=" icon-eye" ></i>22</span>  </div>
            </div>
            <div class="content-img"> <a href="http://www.bokequ.com/blog/traveler/man/188.html" title="童年回忆-8090后放胶片复古" target="_blank"> <img class="lazy thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240213125Z1446.jpg" data-original="http://www.bokequ.com/blog/traveler/20240112/1-240213125Z1446.jpg" alt="童年回忆-8090后放胶片复古" /> </a> </div>
            
            <div class="content-note">
              <p>童年回忆-8090后放胶片复古。童年,是梦中的真,是真中的梦,是回忆时含泪的微笑。童年的趣事像海边那各色各样的贝壳,在海水的陪伴下闪闪发光,散发着五颜六色的光彩,数都数不完。每一张都是一个故事,致敬我们回不去的童年,致敬8...</p>
              <span class="category-color"><a href="http://www.bokequ.com/blog/traveler/man/">慢生活</a></span>
              <div class="content-info-r"> <span class="mr10"><a href="http://www.bokequ.com/blog/traveler/man/188.html" title="童年回忆-8090后放胶片复古" target="_blank">READ MORE</a><i class=" icon-export-alt" ></i></span> </div>
            </div>
          </div>
<div class="content">
            <div class="content-header"> <a href="http://www.bokequ.com/blog/youxian/2.html" title="靠海而居-厦门老城的慢时光" target="_blank">
              <h2>靠海而居-厦门老城的慢时光</h2>
              </a>
              <div class="content-info"> <span class="mr10 postclock">15小时前 00:39 (2024-01-13)</span> <span class="mr10 postuser"><i class="icon-user"></i><a>bokequ</a></span> <span class="mr10 posteye"><i class=" icon-eye" ></i>99</span>  </div>
            </div>
            <div class="content-img"> <a href="http://www.bokequ.com/blog/youxian/2.html" title="靠海而居-厦门老城的慢时光" target="_blank"> <img class="lazy thumbnail" src="http://www.bokequ.com/blog/youxian/images/p_02.jpg" data-original="http://www.bokequ.com/blog/youxian/images/p_02.jpg" alt="靠海而居-厦门老城的慢时光" /> </a> </div>
            
            <div class="content-note">
              <p>不论是走在厦门还是鼓浪屿的大街上,大家都可以非常悠闲的享受时光,如果在这些地方走累了,随便找一个咖啡店,或者是书店就可以安安静静地坐上一下午慢慢地感受这个城市慢时光的快乐...</p>
              <span class="category-color"><a href="http://www.bokequ.com/blog/traveler/man/">慢生活</a></span>
              <div class="content-info-r"> <span class="mr10"><a href="http://www.bokequ.com/blog/youxian/2.html" title="靠海而居-厦门老城的慢时光" target="_blank">READ MORE</a><i class=" icon-export-alt" ></i></span> </div>
            </div>
          </div>
<div class="content">
            <div class="content-header"> <a href="http://www.bokequ.com/blog/traveler/man/112.html" title="悠然下午茶,优雅美时光" target="_blank">
              <h2>悠然下午茶,优雅美时光</h2>
              </a>
              <div class="content-info"> <span class="mr10 postclock">16小时前 23:27 (2024-01-12)</span> <span class="mr10 postuser"><i class="icon-user"></i><a>bokequ</a></span> <span class="mr10 posteye"><i class=" icon-eye" ></i>10</span>  </div>
            </div>
            <div class="content-img"> <a href="http://www.bokequ.com/blog/traveler/man/112.html" title="悠然下午茶,优雅美时光" target="_blank"> <img class="lazy thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-24021223321A40.jpg" data-original="http://www.bokequ.com/blog/traveler/20240112/1-24021223321A40.jpg" alt="悠然下午茶,优雅美时光" /> </a> </div>
            
            <div class="content-note">
              <p>悠然下午茶,优雅美时光 1、清秋时光,一个人喝下午茶。 2、午后时光享悠闲,冲调饮品来作伴。 3、一个美美的下午,美美的下午茶,又是美美的一天。 4、静观一片海,慢煮一盏茶。 5、早秋夕下的下午茶,让味蕾享受初秋的浪漫。 6、秋季露台...</p>
              <span class="category-color"><a href="http://www.bokequ.com/blog/traveler/man/">慢生活</a></span>
              <div class="content-info-r"> <span class="mr10"><a href="http://www.bokequ.com/blog/traveler/man/112.html" title="悠然下午茶,优雅美时光" target="_blank">READ MORE</a><i class=" icon-export-alt" ></i></span> </div>
            </div>
          </div>
<div class="content">
            <div class="content-header"> <a href="http://www.bokequ.com/blog/traveler/qu/19.html" title="wordpress做个人博客网站有什么优势" target="_blank">
              <h2>wordpress做个人博客网站有什么优势</h2>
              </a>
              <div class="content-info"> <span class="mr10 postclock">16小时前 23:23 (2024-01-12)</span> <span class="mr10 postuser"><i class="icon-user"></i><a>bokequ</a></span> <span class="mr10 posteye"><i class=" icon-eye" ></i>13</span>  </div>
            </div>
            <div class="content-img"> <a href="http://www.bokequ.com/blog/traveler/qu/19.html" title="wordpress做个人博客网站有什么优势" target="_blank"> <img class="lazy thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402122322223J.jpg" data-original="http://www.bokequ.com/blog/traveler/20240112/1-2402122322223J.jpg" alt="wordpress做个人博客网站有什么优势" /> </a> </div>
            
            <div class="content-note">
              <p>WordPress有着异常庞大的用户社群,你可以在网上找到无数的主题和插件,可以说,其他博客服务有的任何功能,WordPress几乎都能做到。...</p>
              <span class="category-color"><a href="http://www.bokequ.com/blog/traveler/qu/">趣博客</a></span>
              <div class="content-info-r"> <span class="mr10"><a href="http://www.bokequ.com/blog/traveler/qu/19.html" title="wordpress做个人博客网站有什么优势" target="_blank">READ MORE</a><i class=" icon-export-alt" ></i></span> </div>
            </div>
          </div>
<div class="content">
            <div class="content-header"> <a href="http://www.bokequ.com/blog/traveler/qu/18.html" title="个人博客系统网站模板" target="_blank">
              <h2>个人博客系统网站模板</h2>
              </a>
              <div class="content-info"> <span class="mr10 postclock">16小时前 23:13 (2024-01-12)</span> <span class="mr10 postuser"><i class="icon-user"></i><a>bokequ</a></span> <span class="mr10 posteye"><i class=" icon-eye" ></i>21</span>  </div>
            </div>
            <div class="content-img"> <a href="http://www.bokequ.com/blog/traveler/qu/18.html" title="个人博客系统网站模板" target="_blank"> <img class="lazy thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212231521Y9.jpg" data-original="http://www.bokequ.com/blog/traveler/20240112/1-240212231521Y9.jpg" alt="个人博客系统网站模板" /> </a> </div>
            
            <div class="content-note">
              <p>个人博客系统网站模板,这是一个个人博客的静态网页,页面设计比较漂亮的。...</p>
              <span class="category-color"><a href="http://www.bokequ.com/blog/traveler/qu/">趣博客</a></span>
              <div class="content-info-r"> <span class="mr10"><a href="http://www.bokequ.com/blog/traveler/qu/18.html" title="个人博客系统网站模板" target="_blank">READ MORE</a><i class=" icon-export-alt" ></i></span> </div>
            </div>
          </div>
   
        </div>
        <div class="clearfix"></div>
        <div class="post-read-more"><a href="index_2.html" >加载更多</a></div>
      </div>
      <div class="index-list mb30">
      <div class="list">
          <div class="list-box">
            <div class="list-title"> <a class="title" href="http://www.bokequ.com/blog/traveler/qu/">
              <h3>趣博客</h3>
              </a> </div>
            <ul class="aa">
             <div class="pic340"><a rel="nofollow" href="http://www.bokequ.com/blog/traveler/qu/26.html"title="免费制作个人博客网站Logo" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402121F6155H.jpg" alt="免费制作个人博客网站Logo"/>
                <div class="cover-text">
                  <div class="text-detail">
                    <p class="text-read"><i class=" icon-search"></i></p>
                  </div>
                </div>
                </a></div>
              <h2><a href="http://www.bokequ.com/blog/traveler/qu/26.html" title="免费制作个人博客网站Logo" target="_blank">免费制作个人博客网站Logo</a></h2>
              <p>你还在为你的美食博客logo或是时尚博客logo设计而苦苦寻觅吗?你还在为设计一个专业的博客logo而发愁吗?现在使用U钙网的博客logo设计软件,...<a rel="nofollow" href="http://www.bokequ.com/blog/traveler/qu/26.html" target="_blank">[详细]</a></p>

            </ul>
            <ul class="bb">
            <li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/qu/25.html" title="清雨PHP开源博客系统" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402121G00X32.jpg" alt="清雨PHP开源博客系统"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/qu/25.html" title="清雨PHP开源博客系统" target="_blank">清雨PHP开源博客系统</a><span class="mr10"><i class="icon-clock"></i>22小时前 17:09 </span><span class="mr10"><i class=" icon-eye" ></i>5</span> </li>
<li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/qu/24.html" title="博客杂志文章类网站Html5模板Kiante" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402121ZI2129.jpg" alt="博客杂志文章类网站Html5模板Kiante"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/qu/24.html" title="博客杂志文章类网站Html5模板Kiante" target="_blank">博客杂志文章类网站Html5模板Kiante</a><span class="mr10"><i class="icon-clock"></i>02-12 19:07 </span><span class="mr10"><i class=" icon-eye" ></i>6</span> </li>
<li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/qu/23.html" title="移动端友好的新闻博客类HTML5模板Bloggar" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402121910003A.jpg" alt="移动端友好的新闻博客类HTML5模板Bloggar"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/qu/23.html" title="移动端友好的新闻博客类HTML5模板Bloggar" target="_blank">移动端友好的新闻博客类HTML5模板Bloggar</a><span class="mr10"><i class="icon-clock"></i>02-12 19:09 </span><span class="mr10"><i class=" icon-eye" ></i>7</span> </li>
 
            </ul>
          </div>
        </div>  
        <div class="list">
          <div class="list-box">
            <div class="list-title"> <a class="title" href="http://www.bokequ.com/blog/traveler/xiu/">
              <h3>秀主题</h3>
              </a> </div>
            <ul class="aa">
             <div class="pic340"><a rel="nofollow" href="http://www.bokequ.com/blog/traveler/xiu/190.html"title="WordPress赛博朋克图片主题Vanilla" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212222IW46.jpg" alt="WordPress赛博朋克图片主题Vanilla"/>
                <div class="cover-text">
                  <div class="text-detail">
                    <p class="text-read"><i class=" icon-search"></i></p>
                  </div>
                </div>
                </a></div>
              <h2><a href="http://www.bokequ.com/blog/traveler/xiu/190.html" title="WordPress赛博朋克图片主题Vanilla" target="_blank">WordPress赛博朋克图片主题Vanilla</a></h2>
              <p>WordPress赛博朋克图片主题Vanilla,这是一款多功能的WordPress主题,赛博朋克的配色,大气有质感的交互设计,令人愉悦的视觉体验,内置丰富...<a rel="nofollow" href="http://www.bokequ.com/blog/traveler/xiu/190.html" target="_blank">[详细]</a></p>

            </ul>
            <ul class="bb">
            <li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/xiu/187.html" title="wordpress相册视频主题COSY" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212223220I0.jpg" alt="wordpress相册视频主题COSY"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/xiu/187.html" title="wordpress相册视频主题COSY" target="_blank">wordpress相册视频主题COSY</a><span class="mr10"><i class="icon-clock"></i>17小时前 22:36 </span><span class="mr10"><i class=" icon-eye" ></i>12</span> </li>
<li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/xiu/185.html" title="wordpress主题Orange" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402122224132c.jpg" alt="wordpress主题Orange"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/xiu/185.html" title="wordpress主题Orange" target="_blank">wordpress主题Orange</a><span class="mr10"><i class="icon-clock"></i>17小时前 22:20 </span><span class="mr10"><i class=" icon-eye" ></i>12</span> </li>
<li>
                <div  class="pic80"> <a rel="nofollow" href="http://www.bokequ.com/blog/traveler/xiu/62.html" title="Luxury豪华酒店预订WordPress主题" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402121445523I.jpg" alt="Luxury豪华酒店预订WordPress主题"/> </a> </div>
                <a class="title" href="http://www.bokequ.com/blog/traveler/xiu/62.html" title="Luxury豪华酒店预订WordPress主题" target="_blank">Luxury豪华酒店预订WordPress主题</a><span class="mr10"><i class="icon-clock"></i>昨天 02-12 14:45 </span><span class="mr10"><i class=" icon-eye" ></i>208</span> </li>
 
            </ul>
          </div>
        </div>  
        <script type="text/javascript" src="skin/js/masonry-docs.min.js"></script> 
        <script>
	$(function() {
		var $container = $('.index-list');
		$container.imagesLoaded(function() {
			$container.masonry({
			itemSelector: '.list',
			gutter: 0,
			isAnimated: true,
			});
		});
	});
</script> 
      </div>
      <div class="ad700"> <a href="#" title="广告标题" target="_blank"><img src="skin/img/1_1031267301.png" alt="图片描述"></a></div>
      <div class="index-appoint mb30">
        <div class="article-title">
          <h3>推荐阅读</h3>
        </div>
        <div class="site-bottom">
          <ul>
           <li>
              <div class="box"> <a href="http://www.bokequ.com/blog/traveler/man/186.html" class="title" title="在快节奏中找回慢生活">在快节奏中找回慢生活</a> <a href="http://www.bokequ.com/blog/traveler/man/186.html" title="在快节奏中找回慢生活" rel="bookmark 	external" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212213911110.jpg" alt="在快节奏中找回慢生活"/> </a>
                <p class="desc">现在,越来越多的乡村城市化,人们的生活节奏越来越快,匆匆岁月,慌忙一瞥,来不及细赏...</p>
                <div class="action"> <a href="http://www.bokequ.com/blog/traveler/man/186.html" class="read" title="在快节奏中找回慢生活">阅读</a> <span class="amount">12</span> </div>
              </div>
            </li>
<li>
              <div class="box"> <a href="http://www.bokequ.com/blog/traveler/man/184.html" class="title" title="慢时光中的书卷气 南浔游记">慢时光中的书卷气 南浔游记</a> <a href="http://www.bokequ.com/blog/traveler/man/184.html" title="慢时光中的书卷气 南浔游记" rel="bookmark 	external" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212215023157.jpg" alt="慢时光中的书卷气 南浔游记"/> </a>
                <p class="desc">慢时光中的书卷气 南浔游记。当大家都在为了一年中最重要的节日忙碌的时候,整个南浔仿佛...</p>
                <div class="action"> <a href="http://www.bokequ.com/blog/traveler/man/184.html" class="read" title="慢时光中的书卷气 南浔游记">阅读</a> <span class="amount">14</span> </div>
              </div>
            </li>
<li>
              <div class="box"> <a href="http://www.bokequ.com/blog/traveler/man/182.html" class="title" title="漫时光咖啡">漫时光咖啡</a> <a href="http://www.bokequ.com/blog/traveler/man/182.html" title="漫时光咖啡" rel="bookmark 	external" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-240212214139230.jpg" alt="漫时光咖啡"/> </a>
                <p class="desc">漫时光咖啡是一个专门经营咖啡、简餐以及各种休闲饮品的市场加盟品牌,它创立于2012年,虽...</p>
                <div class="action"> <a href="http://www.bokequ.com/blog/traveler/man/182.html" class="read" title="漫时光咖啡">阅读</a> <span class="amount">15</span> </div>
              </div>
            </li>
<li>
              <div class="box"> <a href="http://www.bokequ.com/blog/traveler/man/180.html" class="title" title="【时光列车】绿皮火车的记忆">【时光列车】绿皮火车的记忆</a> <a href="http://www.bokequ.com/blog/traveler/man/180.html" title="【时光列车】绿皮火车的记忆" rel="bookmark 	external" target="_blank"> <img class="thumbnail" src="http://www.bokequ.com/blog/traveler/20240112/1-2402122122562N.jpg" alt="【时光列车】绿皮火车的记忆"/> </a>
                <p class="desc">【时光列车】绿皮火车的记忆,随着高铁时代来临,承载着中国人出行近半个世纪的内燃机列...</p>
                <div class="action"> <a href="http://www.bokequ.com/blog/traveler/man/180.html" class="read" title="【时光列车】绿皮火车的记忆">阅读</a> <span class="amount">11</span> </div>
              </div>
            </li>
 
          </ul>
        </div>
      </div>
      <!--<div class="ad700 mb30">  <a href="#" title="广告标题" target="_blank"><img src="../skin/img/1_1031267301.png" alt="图片描述"></a></div>-->
    </div>
  </div>
  <div class="sidebar">
    <div class="widget widget_suxingme_search">
      <form name="formsearch" method="get" class="search-form" action="#">
          <input type="hidden" name="kwtype" value="0" />
        <div class="search-input">
          <input class="search-text" placeholder="要不找一找?" type="text" name="q" id="q" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
          <input type="submit" value=" " class="search-button">
        </div>
      </form>
    </div>
    <div class="widget widget_suxingme_note">
      <div class="widget-container">
        <div class="widget_ad_title">
          <div class="ad-t">公告栏</div>
        </div>
        <ul>
        <li><i class="icon-lightbulb"></i>
            <p>清新简蓝WordPress博客CMS主题Traveler(02/11)</p>
          </li>
<li><i class="icon-lightbulb"></i>
            <p>响应式个人博客自媒体文章类网站模板Traveler(02/11)</p>
          </li>

        </ul>
      </div>
    </div>
    <div class="widget widget_suxingme_ad">
      <div class="widget_ads">     
       <a class="ad-border" href="http://www.bokequ.com/time/zahuopu.html">
	   <img src="http://www.bokequ.com/blog/11/images/0_3.jpg" alt="记录时光" width="100%" height="auto">
	   </a></div>
    </div>
    <div class="widget widget_suxingme_hotpost">
      <div class="w_title">
        <h3>热门文章</h3>
      </div>
      <li><a href="http://www.bokequ.com/blog/traveler/xiu/60.html" rel="bookmark" title="Artruls画廊和博物馆WordPress主题">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240112/1-240212144210201.jpg" alt="Artruls画廊和博物馆WordPress主题" class="thumbnail" /><span><i class="icon-eye"></i>245</span>
        <p class="title">Artruls画廊和博物馆WordPress主题</p>
        </a></li>
<li><a href="http://www.bokequ.com/blog/traveler/xiu/61.html" rel="bookmark" title="Styler服装响应式简洁设计Shopify主题">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240112/1-24021214525Q20.jpg" alt="Styler服装响应式简洁设计Shopify主题" class="thumbnail" /><span><i class="icon-eye"></i>210</span>
        <p class="title">Styler服装响应式简洁设计Shopify主题</p>
        </a></li>
<li><a href="http://www.bokequ.com/blog/traveler/xiu/62.html" rel="bookmark" title="Luxury豪华酒店预订WordPress主题">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240112/1-2402121445523I.jpg" alt="Luxury豪华酒店预订WordPress主题" class="thumbnail" /><span><i class="icon-eye"></i>208</span>
        <p class="title">Luxury豪华酒店预订WordPress主题</p>
        </a></li>

    </div>
    <div class="widget widget_suxingme_mostviews">
      <div class="w_title">
        <h3>随便看看</h3>
      </div>
      <li><a href="http://www.bokequ.com/blog/traveler/qiji/79.html" rel="bookmark" title="中国瀑布之美:扎嘎瀑布">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240112/1-240212134641318.jpg" alt="中国瀑布之美:扎嘎瀑布" class="thumbnail" /><span></span>
        <p class="title">中国瀑布之美:扎嘎瀑布</p>
        </a></li>
<li><a href="http://www.bokequ.com/blog/traveler/qiji/73.html" rel="bookmark" title="中国瀑布之美:黄果树瀑布">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240111/1-2402111R309442.jpg" alt="中国瀑布之美:黄果树瀑布" class="thumbnail" /><span></span>
        <p class="title">中国瀑布之美:黄果树瀑布</p>
        </a></li>
<li><a href="http://www.bokequ.com/blog/traveler/qu/10.html" rel="bookmark" title="如何拥有一个完全免费的博客?">
        <div class="overlay"></div>
        <img src="http://www.bokequ.com/blog/traveler/20240111/1-240211151Z2947.jpg" alt="如何拥有一个完全免费的博客?" class="thumbnail" /><span></span>
        <p class="title">如何拥有一个完全免费的博客?</p>
        </a></li>

    </div>
    <div class="widget suxingme_tag">
      <div class="w_title">
        <h3>热门标签</h3>
      </div>
      <div class="widge_tags">
        <ul class="widget_tags_ul">
          
          <li><a href="#%E6%85%A2%E6%97%B6%E5%85%89/" title="有20篇文章" >慢时光 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E7%A7%91%E6%8A%80/" title="有18篇文章" >智能科技 </a></li>
          
          <li><a href="#wordpress%E5%8D%9A%E5%AE%A2/" title="有4篇文章" >wordpress博客 </a></li>
          
          <li><a href="#%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" title="有15篇文章" >个人博客 </a></li>
          
          <li><a href="#%E5%8D%9A%E5%AE%A2%E6%A8%A1%E6%9D%BF/" title="有16篇文章" >博客模板 </a></li>
          
          <li><a href="#%E5%8E%BB%E6%97%85%E8%A1%8C/" title="有15篇文章" >去旅行 </a></li>
          
          <li><a href="#WordPress%E4%B8%BB%E9%A2%98/" title="有20篇文章" >WordPress主题 </a></li>
          
          <li><a href="#%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/" title="有6篇文章" >个人主页 </a></li>
          
          <li><a href="#%E4%B8%80%E4%B8%AA%E4%BA%BA/" title="有4篇文章" >一个人 </a></li>
          
          <li><a href="#%E5%BF%99%E5%BF%99%E7%A2%8C%E7%A2%8C/" title="有2篇文章" >忙忙碌碌 </a></li>
          
          <li><a href="#%E5%B2%81%E6%9C%88%E6%B5%81%E9%80%9D/" title="有2篇文章" >岁月流逝 </a></li>
          
          <li><a href="#%E6%97%85%E6%B8%B8%E6%97%A5%E8%AE%B0/" title="有16篇文章" >旅游日记 </a></li>
          
          <li><a href="#%E4%B8%AD%E5%9B%BD%E7%80%91%E5%B8%83/" title="有7篇文章" >中国瀑布 </a></li>
          
          <li><a href="#%E7%A9%BA%E8%B0%B7%E5%B9%BD%E5%85%B0/" title="有1篇文章" >空谷幽兰 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E5%B1%8F%E5%B9%95/" title="有1篇文章" >智能屏幕 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E8%80%B3%E6%9C%BA/" title="有1篇文章" >智能耳机 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E5%AE%B6%E5%B1%85/" title="有1篇文章" >智能家居 </a></li>
          
          <li><a href="#Aqara%E7%BD%91%E5%85%B3/" title="有1篇文章" >Aqara网关 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E5%8F%AF%E8%A7%86%E9%97%A8%E9%93%83/" title="有1篇文章" >智能可视门铃 </a></li>
          
          <li><a href="#%E6%99%BA%E8%83%BD%E7%81%AF%E6%B3%A1/" title="有1篇文章" >智能灯泡 </a></li>
          
          <li><a href="#Aqara/" title="有1篇文章" >Aqara </a></li>
          
          <li><a href="#HomePod/" title="有1篇文章" >HomePod </a></li>
          
          <li><a href="#Vision+Pro/" title="有1篇文章" >Vision Pro </a></li>
          
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="site-footer">
    <p class="copyright">Copyright &copy;2019 博客趣(bokequ.com)&nbsp; <a href="http://www.bokequ.com/blog/traveler/">响应式个人博客自媒体文章类模板traveler演示</a>&nbsp;&nbsp;页面仅学习交流 </p>
  </div>
  <div id="totop"><i class="icon-up-open"></i></div>
</div>
<div class="share-box">
  <div class="mask"></div>
  <div class="share-item" style="top: 236.333333333333px; left: 572.5px;">
    <div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1429758066009"> <span class="title">分享到:</span> <a title="分享到QQ空间" href="#" class="sicon-qzone" data-cmd="qzone"></a> <a title="分享到新浪微博" href="#" class="sicon-tsina" data-cmd="tsina"></a> <a title="分享到豆瓣" href="#" class="sicon-douban" data-cmd="douban"></a> <a title="分享到人人网" href="#" class="sicon-renren" data-cmd="renren"></a> <a title="分享到微信" href="#" class="sicon-weixin" data-cmd="weixin"></a> <a href="#" class="sicon-more" data-cmd="more"></a> </div>
    
  </div>
</div>
<script type="text/javascript" src="skin/js/bootstrap.js"></script> 
<script src="skin/js/jquery-ias.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="skin/js/traveler.js"></script> 
<script type="text/javascript">
var ias = $.ias({
    container: ".posts", 
    item: ".content", 
    pagination: ".post-read-more",
    next: ".post-read-more a", 
});

ias.extension(new IASTriggerExtension({
    text: '加载更多', 
    offset: 1, 
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
    text: '<a>没有更多了</a>',
}));
</script> 
<script type="text/javascript">
$(function(){var win_width=$(window).width();var wrap_width=$('#wrap').width();var totop_width=$('#totop').width();var totop_posi=([win_width-wrap_width]/25-totop_width);$('#totop').css({'right':totop_posi});$(window).scroll(function(){if($(window).scrollTop()>=200){$('#totop').slideDown(200)}else{$('#totop').slideUp(200)}});$('#totop').click(function(){$('body,html').animate({scrollTop:0},200)})});
</script> 
<script type="text/javascript" src="skin/js/jquery.lazyload.min.js"></script> 
</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档