清新简蓝响应式博客网站模板Traveler

简介: 清新简蓝响应式网站模板Travele适合做个人博客自媒体类站点,可以做技术类,分享心情类文章博客,界面简洁,实用,利seo排名优化。首页采用无限加载更多文章,效果很酷。

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

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

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

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

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

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

主页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>
目录
相关文章
|
移动开发 缓存 自然语言处理
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
|
移动开发 前端开发 HTML5
推荐16款精美的HTML/CSS网站模板
  这篇文章收集了16款精美的免费HTML/CSS网站模板分享给大家,您可以免费下载使用。相信这些漂亮的HTML/CSS 网站模板 既能够帮助您节省大量的时间和精力,又能有很满意的效果。感谢那些优秀的设计师分享他们的劳动成果,让更多的人可以使用他们的创意设计,希望这些免费的HTML/CSS网站模板能帮助到您。
1547 0
|
Web App开发 移动开发 前端开发
20+免费精美响应式Html5 网站模板03(含源码)
20+免费精美响应式Html5 网站模板(含源码)
592 0
20+免费精美响应式Html5 网站模板03(含源码)
|
Web App开发 移动开发 前端开发
20+免费精美响应式Html5 网站模板02(含源码)
20+免费精美响应式Html5 网站模板02(含源码)
336 0
20+免费精美响应式Html5 网站模板02(含源码)
|
Web App开发 移动开发 前端开发
20+免费精美响应式Html5 网站模板01(含源码)
20+免费精美响应式Html5 网站模板01(含源码)
532 0
20+免费精美响应式Html5 网站模板01(含源码)
|
移动开发 前端开发 UED
12款界面精美的 HTML5 & CSS3 网站模板
  这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板。每一个细节都精心设计,以创建一个美妙的用户体验。这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及应用程序展示网站。
1781 0
15款精美的 WordPress 电子商务网站模板
  在这篇文章中,我们收集了15款精美的 WordPress 电子商务网站模板。WordPress 作为最流行的博客系统,插件众多,易于扩充功能。安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易用。
1165 0
|
Web App开发 前端开发
25款创新和免费的精美 CSS 网站模板下载
  这篇文章收集了25款精美的免费 CSS 网站模板分享给大家,您可以免费下载使用。相信这些漂亮的免费 CSS 网站模板既能够帮助您节省大量的时间和精力,又能有很满意的效果。 您可能感兴趣的相关文章 35款精致的 CSS3 和 HTML5 网页模板 12款高质量的免费 CSS 网站模板下...
805 0
|
Web App开发
【精品资源】干货分享:20款精美的手机网站模板下载
  移动互联网在过去一年呈现爆发性增长,掀起移动互联网应用的热潮。众多互联网公司都争相推出手机应用和手机网站,想在移动大蛋糕中分一杯羹。这篇文章向大家分享20款精美的手机网站模板。 您可能感兴趣的相关文章 50个优秀的国外手机网站设计实例 移动网站必备 jQuery 图片滑块插件 精美...
1114 0
|
Web App开发 前端开发
30款精美的国外企业网站模板 PSD 免费下载
  这篇文章收集了30款漂亮的免费 PSD 网站模板分享给大家,您可以免费下载使用。这些高质量的免费 PSD 网站模板可以让您的工作得心应手,帮助您节省大量的时间和精力。感谢那些优秀的设计师分享他们的劳动成果,让更多的人可以使用他们的创意设计,希望这些免费 PSD 网站模板能帮助到您。
1819 0