美文美句
美文美句 - 提供抒情散文-情感文章-爱情语录-励志签名等在线欣赏

前些天在群里聊天时候有朋友在松哥网站找到一篇文章修改卢松松模版为自适应的。

响应式网页设计的快速教程

博主才突然想起:那时候使用卢松松模版,就想要个自适应,可翻遍了百度、搜狗、360都没找到有类似的教程或者模版下载(不过却发现有人在出售这款自适应模版)。看完松哥文章之后,感觉不是很难,就动手试了一下。经过两天时间(求别吐槽,博主可没什么代码基础的),终于把松哥模版做成自适应了,现在来说跟松哥的基本是一模一样!

关于自适应是什么东西,在这里good luck就不多说了哈,相信来到这里看着文章的都知道自适应是什么东西。

不多说,上几张图片给大家看看:

123.jpg

各位看官就看看图片好了哈,博主这没有啥演示站,噢不,演示站应该就是松哥的网站了,哈哈。。

可能有人说,最后一张照片明显有错误啊!

关于这个,呃,请打开松松的网站看下,他的也有这个问题,应该是导航上面的东西太多了吧,不太清楚,尝试过修复但是没弄好(请原谅。。)

卢松松模版自适应主题下载地址:http://pan.baidu.com/s/1hqfAkRi(提取密码:h1yg)

2015.07.05更新:

1、修复置顶文章错位

2、修复手机版下没有翻页按钮

3、其他一些小细节调整和CSS精简

说明:

1、这个已经有侧栏跟随了的,具体请看:http://luckyhai.com/post/126.html

2、使用说明:下载好后打开你网站后台-主题管理-上传主题zba文件,刷新后就能看到,然后启用即可。

3、除了BUG,其他东西自行百度寻找答案~

地址:http://pan.baidu.com/s/1bn0gXQn(提取密码:yk4g)

2015.07.05晚上10:50分再次更新:

修复修改导航后foot跑网页顶部地址:http://pan.baidu.com/s/1pJC9Swz(提取密码:hb76


注意:

(1)文件并不是zba后缀的模版文件,只是一个文件夹而已,怎么生成zba格式的博主不懂。

(2)模版修改由博主完成,原始模版在松哥网站下载,博主也不会在模版里面添加后门之类的东西,不信别用。同时欢迎提出是否有问题。

(3)下载的压缩包,解压之后上传到 你的域名/zb_users/theme/ 这里,然后去网站后台-主题管理即可看到模版。

(4)启用模版后,右上角主题配置里面有6项内容,请自主修改或者更新。

(5)关于电脑导航栏,模版管理-导航栏-点击编辑,先把自己本来有的导航栏地址给记下来,然后按照下面的格式进行更改:

导航栏左边:

<div class="left"><ul id="menu" class="menu">
<li><a href="你的域名链接" title="首页"><span id="menuON">首页</span></a></li>
<li><a href="你的分类链接" title="分类title">分类名称</a></li></ul></div>

导航栏右边:

<div class="right"><ul id="menus" class="menu">
<li class="page_right"><a href="链接" title="请自定义" target="_blank">显示名称</a></li>
<li class="page_right"><a href="链接" title="请自定义" target="_blank">显示名称</a></li></ul></div>

上面的为例子,请修改为自己的,然后把导航栏左边和导航栏右边的这两段代码合并起来,就放在模版管理-导航栏-编辑-内容里面(把原本的替换掉)

如果想像松哥那样分类上面有个“hot”或者“new”的小图标,可以这样参考上面的首页,把menuON修改为hot或者gnew即可,请自行增加。

(6)上面是电脑版的导航栏设置,下面来手机版下的导航栏设置:

<ul id="navs" class="menu">

<li><a href="链接" title="请自定义">显示名称</a></li>

<li><a href="链接" title="请自定义">显示名称</a></li></ul>

请根据自己的需要,自行添加。这里代码根据自己的写好之后,模版管理-新建模版:

11111.jpg

注意圈出来并且用箭头指住的位置,必须为和图片是一致。

提交保存之后,首台首页更新一下缓存,即可看到效果。

(7)关于文章页底部的 来源:GoodLuck(QQ号:284204003),欢迎分享本文,转载请保留出处!,请自行修改模版下template文件夹里面的b_article-single.html文件。下面的赞助本站,图片在style/images里面,请自行修改。

(8)好了,基本就是这样了,如果有什么问题的话,可以在下方留言反馈。

文章信息

分类:GoodLuck

分享:

您可能也会喜欢

发表回复

Post Comment

  1. 麦谦生博客 :

    不错,这都搞出来,我朋友都是直接去扒的~~!

    2015-09-30 15:33:17
  2. 天中青年 :

    右侧有点问题在单个文章页面:
    出现代码:

    2015-07-13 13:00:35
    • 天中青年 :

      @天中青年 谢谢,又完美解决了、

      2015-07-16 19:16:14
    • XiaoFeng :

      @天中青年 正常的,那是侧栏跟随,你应该是还没设置,看看这个http://luckyhai.com/post/126.html

      2015-07-13 13:07:05
  3. 访客 :

    跟随侧栏有问题

    2015-07-10 15:52:53
    • XiaoFeng :

      @访客 按照上面教程来做是没问题的,不知道你那是什么情况,有没地址看看?

      2015-07-10 17:53:39
  4. 天中青年 :

    博主您好,能和你学习一下,手机端文章分页标记如何做到的吗? 谢谢

    2015-07-08 23:20:41
    • XiaoFeng :

      @天中青年 CSS第300行有个.pagenavi,删除即可。还有,你现在在用的这个,置顶文章有错位,CSS调一下就好,搞网站就是多折腾~

      2015-07-08 23:27:35
  5. 天中青年 :

    博主你看我的网站,设置过导航以后,版权页就跑顶部去了。

    2015-07-05 21:21:30
    • XiaoFeng :

      @天中青年 确实有这个问题,可能是之前我测试不够彻底吧,修复好了,感谢喜欢。

      2015-07-05 22:52:42
  6. 天中青年 :

    博主你好,首先感谢你的无私分享,我前两天试用了一下,感觉很不错,就是手机端没有文章分页标记,能帮忙解决一下吗?另外不知道能不能实现松松网站那样的页面底端有个按月查看文档功能,我在用时出了一个问题就是版权信息,底部的跑网站上方了。

    2015-07-04 23:01:27
    • XiaoFeng :

      @天中青年 感谢喜欢,这是之前我转PHP后不久折腾的,自己没怎么用,BUG肯定是会有的。1、手机端没有文章分页标记。这个不是很懂你想表达的意思;2、页面底端有个按月查看文档功能,这个我试下,不保证能有,换PHP版的好久了,ASP少折腾。3、版权问题,我本地测试可以修改也正常显示,没有你说的跑到网页上面去。另外我发现置顶文章的话有错位,争取这两天修复。

      2015-07-04 23:25:24
      • 天中青年 :

        @XiaoFeng 谢谢博主,就是访问手机端时首页只能显示5篇文章,而且下端没有往后翻页查看更多文章的设置,可能是我哪地方设置有问题?不懂代码,所以卡在这里了。
        非常想用上这个主题,感谢博主分享。

        2015-07-05 09:53:28
        • 天中青年 :

          @天中青年 好的,多谢,我再重装试试。
          非常感谢,为了表示一点谢意,我会把贵站加入首页链接。
          希望以后多多指点。

          2015-07-05 11:07:21
        • XiaoFeng :

          @天中青年 上面说的都更新了。那个首页底部添加按月份查看的没做,不懂JS。。还有你说的底部跑网页上面我测试时候是正常的。访问手机端时首页只能显示5篇文章,而且下端没有往后翻页查看更多文章的设置。这个也正常了,但还是不明白你说的显示5篇文章,我本地测试文章好几十篇,后台设置显示多少,电脑版和手机版就显示多少,下面也有翻页按钮了

          2015-07-05 10:51:45
评论
首页
回顶部