又其实,这篇日志又是老早就准备更新了,因为各种原因,一直拖到现在,下面说下这次的主要更新:
- 修正所有已知BUG
- 重构了1.0的页面结构,对于自适应和页面布局方面完全取消对图片的依赖
- 重设了背景区域和正文区域的背景,更加突出阅读重点
- 重写了文章评论/回复部分,修复了原有的各种BUG,更加给力了回复功能和表情插入
- 重写了页面的所有脚本逻辑交互,完全取消了对ZBLOG的common.js的依赖
- 将所有非插件插入脚本全部移入文档底部,加速页面渲染(对速度有要求的朋友应该比较喜欢)
- 对主题资源进行整合,在没有插件情况下首页只有6个外部资源请求(CSS*1+JS*2+IMG*3)
总之,Ceedo 2.0 给你一个干净,简洁,够快的ZBLOG主题。
OK,感觉有点废话了,下面给出下载地址: Ceedo 2.0
另外,给希望在文章中插入代码而且需要高亮的朋友一个漂亮的代码高亮插件 DsLight
最后,欢迎各种板砖,各种建议
-----------------------------华丽的分割线(v1.0)----------------------------------
其实早就准备写这篇文章了,只是空间不怎么给力,更不幸的是,在写这篇文章的时候自己一个不小心把电源给踩掉了-_-|||,结果又写第二遍...,主题是两周以前开始写的,到今天为止也算是正式发布了。
这次主题总的来说我自己还是很满意的,虽然期间也遇到不少问题,但总算还是站着走过来了,其中自认为不错也是比较喜欢的几个效果,NAV导航,页面顶部底部导航,以及的效果,详细的自己看看小站就晓得啦,至于那版权什么的,有问题就直接找我吧,以下说下主题的特点
- 整站自适应布局,仿两列等高,是一款很耐看,很实在的主题
- 完全断开了很多主题所需的原程序中的common.js,当然,为了兼容插件依然引入了JQuery,并且升级版本为1.3.2
- 高度的兼容浏览器,在已测的范围内,基本上没区别的,细微的,在个人能力范围内在所难免
- 页面动画效果简单实在,个人相当喜欢,不过这主要还是要归功于JQuery的功劳
- 整个主题加起来181K,不到200K的体积我自己是相当满意的,而且还是内置了JQ1.3.2的
看完如果发现有喜欢可以找我要,本来是很想直接挂下载链接的,但是空间真的很不给力啊,说完优点,缺点肯定也是有的,说下在制作过程的比较纠结的一个问题,其实一开始我就是想好要“自适应两列等高布局”,在实际中也一直是按照这个宗旨前进着,在前期做自适应的时候还是很顺手的,因为网站布局只有两列,我一开始就用用的,,右列绝对的定位的方式布局,在自适应上面下过相当不错了,不过也很快就发现问题了,因为右列用的是绝对定位,已经脱离了文档流,当右列高度大于左列的时候,会出现右列盖住底部的情况,不过这个问题如果pass掉IE6的话,也很好解决,加个min-height就搞定,而且还需要实现两列等高,实现两列等高自然还是采用相当经典的“padding-bottom - margin-bottom法”,这样只要再让主体容器overflow:hidden;就可以很简单的实现两列等高了,个人觉得边框模拟,多层嵌套什么的都是不实用的。
很不幸,现实总是和我们预想的是有那么点点区别的,很快BUG就出现了,先不说它不兼容IE6,更严重的是,我后来做文章显示页面,因为有评论,所以需要很多锚点,或者ID来导航、或者定位什么的,然后在定位评论框的时候,出现了在主体容器里面只剩下评论框的情况(本来很想上传图片的,空间忒不给力……),记得早些时候看过一篇关于“不要使用overflow:hidden清除浮动,overflow:hidden会元素在FF下获得焦点”,因为我测试也正好也是FF,以为是单例,结果一测发现在所有浏览器都表现的那么从来没有过的一致啊,我当时那个-_-|||,后来一想,其实这样是正常现象,overflow:hidden只是让容器不显示滚动条而已,当容器里的内容需要滚动的时候依然还是滚动的,只是溢出的部分隐藏了。
至此,上面的方法是不行了,然后在想了一个上午后,忽然想起以前岁月飞歌写过一篇文章,他说继上次“圣杯布局”以来,我们又迎来了“负来负去”布局的时代,我觉得这个确实也还是蛮有道理的,继续我们作为IT业中还算比较潮的一行,自然也需要试试“负来负去”的感觉,为了让左列自适应,不得不还给左列加上一层标签包裹起来,这次让左右两列都左浮动,然后左列宽度100%,左边负边距右列宽度,为了解决IE6的“下沉”现象,还得加上overflow-x:hidden,再然后让左列包裹层,左边正边距右列宽度就达到自适应的目的了,具体看代码吧
.content, .slider{ float:left;} .content{ margin-left:-290px; overflow-x:hidden; width:100%;} .main{ margin-left:290px;}
然后实现自适应了,前面已经说了,“padding-bottom - margin-bottom法”是有BUG的了,肯定也是不行的了,多层嵌套什么的,也不是很喜欢,太浪费标签了,那么就背景模拟吧,因为前面右列用的绝对定位,所以主题容器上面加了position:relative,结果因为这个又杯具了,在除了IE6的浏览器下面都正常,但就是在IE6下面主题容器的背景硬就是不跟着浏览器的大小走(真的很想上图片的),还得我又调试了一上午才找到问题所在,最后我又特意去翻了一遍关于W3C对position:relative的解释:
相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留”
结果看来IE6还真是相当遵从它的“规定”啊,一点不让地方减少啊,整个容器的内容都在随着窗口的缩小而缩小,可是容器背景的位置就是不变,然后把position:relative去掉就解决问题了。
最后说下,可能有些时候在两列都左浮动的时候可能会产生IE6 3px bug,其实只要做到让左列右边和右列的左边没有外边距,基本上就木有问题了,还有当浏览器窗口相当小于一定大小后IE6会出现右列下沉的现象,其实解决也很简单,只要让左边容器overflow-x:hidden或者word-break:break-all,也就基本解决问题了。
以上如有错误之处还望指正,如果您看完了此文,那么我是相当感激您的,对于我这么一个文笔相当差人来说,这已经是对我最大的尊敬了。
上一篇:在线五子棋对战
下一篇:基于给定路径求相对路径
共13评论
路人甲说:
于 2012-2-28 14:51:14 #
路过测试一下
回复
模拟器说:
于 2012-9-14 21:36:19 #
很喜欢这个主题,简洁大方,字体也大,重点突出。保留你的链接。JQ1.3.2麻烦发给我,能附上使用说明最好。谢谢。
回复
模拟器说:
于 2012-9-14 21:36:50 #
我邮箱imoniqi@qq.com
回复
youanan说:
于 2012-10-4 19:51:31 #
主题很棒!
发现一个bug,图片会超出来,到侧面栏! 请帮忙改善!
回复
熬夜博客说:
于 2012-10-8 12:27:45 #
可惜,用的是官方主机,不知道怎么上传,刚更新上2.0的。找了半天也不知道怎么上传,请博主明示
回复
邱永胜说:
于 2012-10-19 22:36:55 #
首先主题是非常不错的哦,但是有点小遗憾的是1.8的,不是2.0的,而且貌似1.8升级到2.0也不是很难的,希望博主有时间可以升级成2.0,这样可以让更多的用户能用到你的主题哦,可以参考下卢松松写的模块升级教程:http://lusongsong.com/reed/552.html,当然不管升级与否,这个主题都是非常不错,值得收藏的,先收藏之了哦
回复
南柯一梦说:
于 2013-5-12 17:04:03 #
主题不错哦
回复
raelzhou说:
于 2013-6-21 16:29:34 #
主题很棒啊,可惜不是2.0的
回复
stepdrillbits说:
于 2013-8-25 14:29:36 #
博主大牛!受教!
回复
刘亚斌的博客说:
于 2014-1-5 23:12:24 #
我试试能不能下载
回复
屌丝智慧说:
于 2014-5-8 22:10:12 #
刚好在找这方面的内容 学习了
回复
减肥水果网说:
于 2014-7-11 14:02:10 #
我也是开始用zblog,这里我会经常来看看,学习
回复
听香阁说:
于 2014-9-4 16:49:48 #
找主题过来看看 新手入门
回复