月归档:二月 2011

慎用Simple Tags 2.0-beta1

虽然Wordpress 2.x(具体版本忘了)以来集成了tags系统,但是依旧有很多朋友在使用Simple Tags这个插件。前两天这个插件从1.8更新到了2.0-beta1,对部分用户来说可能是一大悲剧。 看一段更新日志吧: This version is a back to fondamentals. Somes features are removed ! This version need testing ! Remove old marker Remove related posts Remove related tags Remove tags as HTML keywords Remove nofollow options Remove custom function for display current post tags Remove auto-add post tags Remove embedded tags 我不理解作者是怎么想的,竟然把诸多功能直接给砍掉了,结果就是导致主题使用过的相关函数无法使用(相关日志等)。尽管是个beta,但是wp后台提示更新时并不显示更新概述,我手贱直接点了。 如果你使用了Simple Tags的相关文章、相关标签等功能,更新后会导致页面出错。所以还是先不要更新了! 如果你已经升级了,可以通过这个地址下载上一个版本,回滚到1.8即可http://downloads.wordpress.org/plugin/simple-tags.1.8.zip

发表在 WordPress | 标签为 , | 2 条评论

使用Macbook建立无线基站

通过MacOSX的网络共享功能可以快速把你的Macbook变为无线基站,帮助移动设备进行wifi上网。在你的Macbook有宽带接入却没有无线路由时非常实用。 具体操作如下: 打开“系统偏好设置”; 进入“共享”; 找到“Internet共享”; 选择通过“以太网”,共享给“AirPort”; 打开“Airport选项”,设定帐号和开启加密,WEP密钥长度为“40位”; 回到上一层,勾选“Internet共享”开启服务(如图)。 然后在iphone、ipad、itouch等设备搜索Wi-Fi添加即可。 另外,使用iphone或ipad还可以通过蓝牙给Macbook或其他设备反向共享网络,在iphone的设置里开启网络共享然后在Macbook的“网络”里选择“蓝牙”——“iphone设备”即可。

发表在 macOS | 标签为 , , , , | 留下评论

免费WordPress主题——《Field》

Field主题是由schiy设计、WPJam发布的一款主题,双栏,简洁,固定宽度。主题支持Wordpress 3.0+,自动支持wp-pagenavi,支持自定义菜单、小挂件和嵌套回复,并支持中文显示。 该主题大概半年前就初步做好,前一段由我整理并发布。基本完整还原了设计搞,主题看起来非常清爽。 由于Wordpress官方主题库审核缓慢(已经拖了一个月),所以主题已先在本地发布。演示、下载及更多介绍请移步设计师schiy的博客。 另,今天是设计师schiy的生日,祝生日快乐 🙂 。

发表在 WordPress | 标签为 , | 15 条评论

清理浮动的那些事儿——6种清理浮动的方法

前言 (update 2011.02.01)配合图片重写了一下本文。 近期有一项目涉及修改别人所写的主题,在清理浮动的环节上无比痛苦。在此整理一下关于清理浮动的方法和我的看法,希望能提供一些参考作用。 浮动(Float)最初的定义我想只是为了实现图文环绕效果,而如今通常在多栏布局时使用,是CSS里最最常用的一种布局手段。比起圣杯布局等,它更加容易上手并容易处理布局问题。由于浮动的特性,在布局中使用就产生了两个问题——会对后面的元素造成影响而且造成浮动元素的容器高度失效。因此我们需要随时清理浮动,方法有很多但各有弊端。选择合理的清理方式除了让代码看起来更优雅,还会对日后维护提供很大的方便。 清理浮动的方法 使用带有clear属性的空元素 在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 我想说这并不是一个好方法,尽管它兼容所有浏览器并且随用随清。这个方法需要添加大量无语义的html元素,你能想象一个并不算复杂的footer里就使用4次div.clear吗?天哪! 使用CSS的:after伪元素 给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。这是我认为目前比较完美的解决方式。 如图所见,通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格“/20”或点“.” (后者可理解为一些国外书籍过时的介绍:0)并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout(你可以把它写到IE6、7的CSS hacker文件里,这样不会影响W3C标准验证)。 该方法需要给每组浮动元素都添加一个容器,推荐在页面布局时使用。大量使用依旧会对代码量造成一些影响。 另外我想说的一点:我倾向于《无懈可击的Web设计II》一书中提到的把.clearfix改为.group,让代码的可读性更好。group说明内部元素为一组,使用clearfix客户会误认为“你写了些神马?竟然用了这么多‘修正’!”。 使用CSS的overflow属性进行怪异处理 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以怪异清理浮动。 在清理浮动前(如箭头上图),浮动的元素跳离了container层,自己跑到上层去了(用阴影表示)。在添加overflow属性后(如箭头下图),浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。 虽然很多地方以“将来浏览器可能不兼容”为由,不建议使用此方法。我倒是觉得目前使用此法的国内外网站众多,浏览器短时间内并不会在此问题上后退处理。此外这个方法无需添加额外的class,在做主题时比较实用。我建议在局部和无法添加class的地方使用该方法清理浮动,但是不要作为主要清理浮动方式。overflow:auto;还是不要用了。 给浮动元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清理内部浮动。同overflow法一样无须添加额外的class,使用方便但是会对下面的文档造成影响。 建议在容器原本就浮动或者容器使用了绝对定位时使用该方法。不要在主要布局中使用。 使用邻接元素清理 什么都不做,给浮动元素后面的元素添加clear属性。 要确保的是content元素跟两个浮动元素都在同一层container容器内,如果content在container元素后面,建议使用:after伪元素清理。 其他方法 使用display:table模拟表格布局也可以解决浮动的问题,并可自动对齐高度。但是由于table的一系列问题,还是不要使用了。 我的解决方案 综合运用方案 在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul或textwidget里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。 优点:可以有效降低代码量,使用得当可以完善解决浮动清理问题。 缺点:需要熟悉各种清理方式的原理和利弊,需做好注释,否则对日后维护造成不必要的麻烦。 一劳永逸方案 整站使用相对完美的:after伪元素法清理浮动。本方案适合文档结构清晰、模块化的页面。 优点:使用方便,维护方便,很少出现错误。 缺点:需要清晰的文档结构,否则会造成代码量剧。 小结 通过对各种方法的分析,体现出网页重构时除了要对css应用得当并考虑良好的兼容性,还要培养写良好html文档结构的能力。只有html的结构整洁,模块清晰,才能更好的使用css处理布局中遇到的各种问题。 下一篇中我打算结合简单的案例综合运用各方法解决清理浮动的各种问题。

发表在 前端开发 | 标签为 | 12 条评论