浩森博客

关于“更多”

housne — Thu, 29 Dec 2011 01:21:08 +0800

在网页中,“更多”这个元素被运用到很多场景中，它最常出现的地方应该是页面中各种栏目标题的右侧，用来连接至下级详细页面, 在页面布局中，只要是靠右靠齐，就会有各种千奇百怪的方法，看一些常见的方法。

浮动

其实浮动又分两中方法：

方法一：使标题和“更多”元素同时浮动，标题向左，“更多”元素向右，然后清除浮动。这个应该是比较常见的方法。弊端很明显，就是要进行浮动清除，增加了代码量。

方法二：只应用“更多”元素向右浮动。这种方法是在HTML结构上做的手法，“更多”元素要写在标题的前面，这样浮动之后，“更多”元素就是浮动在标题的右上方，这样的话，就可以不必清除浮动，当然得标题的高度于或等于“更多”的高度。弊端是结构要受限于表现，不符合标准理念。

定位

说到定位，肯定就是相对定位和绝对定位的组合，其实也是有两种方法：

方法一：设置标题为相对定位，“更多”元素写在标题内，并应用绝对定位，设置x 和 y 的值，一般会应用 right:0; 这个应该是比较简洁的方法，但弊端也很明显，“更多”元素根本就不属于标题的内容，这样的话就会造成语义化错误。

方法二：设置整个栏目元素为相对定位，“更多”元素应用绝对定位。这种方法不用把“更多”元素写进标题里面，应该是比较完美简洁的解决方法，但同时要注意栏目元素的填充值。

负空白边

这是一种比较古老，但我很喜欢用的方法，把“更多”元素设置为块级元素，文字向右对齐，然后设置向上的负空白边，使之向上移动，很明显这种方法没有多余的代码，简洁符合语义，但要注意标题下面的填充或空白边。

Demo 看这里, 很粗糙的东西，没有 reset; 没有仔细调整，请使用 Chrome 或 firebug 查看.在实际的项目中，会有不同的场景，我们有必要衡量到底用那种方法比较合适。

Related Entries

WebReBuild 重构七年

housne — Sun, 21 Aug 2011 14:43:04 +0800

昨天有幸参加了 WebReBuild 2011第五届年会–深圳站 , 我没有参加过以前举办的年会，但我想这一届的年会相对而言应该是最特殊的，因为整个年会，真正围绕技术讨论的话题并没有多少，除了小鱼(sofish)介绍和分享了他即将开源的 css 库 Alice 外，其他的嘉宾对于重构技术都是一语带过，甚至是只字未提。

大家讨论了重构真正的价值，重构带来的人生哲理，对重构的坚持，还有转岗，没错，这些都是因为这个七年，七年之痒。记得年会刚开始的时候彪叔有提问到，这一届年会的主题为什么是七年重构?我当时愣了一下，自己不知道，后来经同学回答才得知，七年前的04年，有一群人翻译了国外的一本书，叫《网站重构》，从此国内就把跟 html css 打交道的同学称为重构工程师。七年来，中国的互联网，也因为重构技术，发生了不小的变化，Table 布局逐渐被表现和结构层分离的 html + css 代替，表现层的重用和维护变得简单易行。但这就完了吗? 重构真正能带来什么? 重构相对而言，是一门门槛比较低的技术，后面会有越来越多的人从事，如何从这些人中脱颖而出，我想是我们现在重视重构的人都应该思考的问题。

Related Entries

WebReBuild 2011第五届年会–深圳站

housne — Tue, 16 Aug 2011 11:01:08 +0800

一起来吧….

Related Entries

html5 中的 section 与 div 标签

housne — Wed, 20 Jul 2011 18:02:32 +0800

html5 中的有个和 div 长得很像的标签 section, 这货咋一看好像就是 div 的替代者, section 和 div 标签一样并没有很精确的语意，两者皆表示一块区域,还以为是 WHATWG 那群人受够了到处都是 div 标签的页面，所以想出了这个意义稍微明确的 section 标签，仔细研究文档，发现 section 与 div 标签并不相同，在 html5 中， div 标签并未被替代，在文档中是这样描述 section 元素的：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

可以看出应用 section 标签的元素应该更具有独立性，这些元素可能是页面中的一个文档或者是一个应用，并且元素中应该包含一个或一组头部标签(h1 – h6)。

继续向下翻，能发现这一句：

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

当某些元素只是为了规划样式，或是进行 dom 操作时，并不推荐 section 标签，而应该应用 div 标签。

Related Entries

IE bug track

housne — Fri, 17 Jun 2011 18:13:52 +0800

overflow:scroll 子元素需为 static ……..
overflow scroll 需加上宽度或高度…..
inline-block 时，如果元素使用了负缩进隐藏文字内容时，元素会消失……
设置上级定位元素的 z-index ……..

Related Entries

WordPress 企业主题制作方法记录

housne — Mon, 18 Apr 2011 23:47:53 +0800

判断日志所在父级分类方法

<?php if (in_category( 3 ) || post_is_in_descendant_category( 3 )){
   // output
} else {
   //output
}
?>

 
function post_is_in_descendant_category( $cats, $_post = null )
{
	foreach ( (array) $cats as $cat ) {
		// get_term_children() accepts integer ID only
		$descendants = get_term_children( (int) $cat, 'category');
		if ( $descendants && in_category( $descendants, $_post ) )
			return true;
	}
	return false;
}

高亮文章所在的分类

function show_current_cat_on_single($output) {
 
	global $post;
 
	if( is_single() ) {
 
		$categories = wp_get_post_categories($post->ID);
 
		foreach( $categories as $catid ) {
			$cat = get_category($catid);
			// Find cat-item-ID in the string
			if(preg_match('#cat-item-' . $cat->cat_ID . '#', $output)) {
				$output = str_replace('cat-item-'.$cat->cat_ID, 'cat-item-'.$cat->cat_ID . ' current-cat', $output);
			}
		}
 
	}
	return $output;
}
add_filter('wp_list_categories', 'show_current_cat_on_single');

Related Entries

还需要浮动吗?

housne — Sun, 17 Apr 2011 22:30:54 +0800

浮动是网页布局中最常用的技术之一，浮动能轻松的控制元素向左或向右对齐，在常见的两栏或三栏甚至多栏布局中，浮动能快速方便的完成多列同行排序.

但浮动也存在诸多的弊端，首先浮动是漂浮于普通元素之上，不占据任何的空间，这样浮动元素会和周围的普通元素重叠在一起，在标准浏览器中需要大量的清除浮动，这样会增加无语义的标签或是多余的 CSS 语句，而在 IE 中浮动会导致一系列的 BUG，最常见的比如双倍空白边(margin)和 3 像素空白边。

浮动替代方案

既然了解到浮动诸多的弊端，有什么替代和解决方案呢？我的建议是使用绝对定位来代替。我们来看一个常见的两栏布局解决方案，使用浮动布局的 HTML 通常如下:

<div class="main clearfix">
        <div class="left_col"></div>
        <div class="right_col"></div>
</div>

CSS 大概如下:

.main{
      width:940px;
      padding:10px;
      margin:0 auto;
     }
.left_col{
     width:300px;
     float:left;
     }
.right_col{
      width:640px;
      float:left;
      }
.clearfix:after{
     content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    }

而如果使用绝对定位我们只需这样写我们的HTML代码:

<div class="main">
     <div class="left_col">
</div>

CSS如下:

.main{
    width:940px;
    padding:10px;
    margin:0 auto;
    position:relative;
    padding-left:300px;
   }
.left_col{
    width:300px;
    position:absolute;
    left:0;
    top:0;
    }

可以看到我们在使用绝对定位只用到了两个标签，而且无需清除浮动，这样不仅减少了 CSS 代码，甚至还减少了 HTML 标签；看起来很完美是吧，但这个解决方案的弊端是父级元素高度小于绝对定位元素时，绝对定位的元素就是盖住下面的元素；所以使用绝对定位一定要确定父级元素高于绝对元素的高度，还有要确定绝对定位的宽度。

还有一种浮动替换的方案是 inline-block; 这是一个非常有效和神奇的属性，在行内元素上使用很有效；比如在一行固定宽度的数个行内元素时，将其设置为块级元素，设定其宽度然后向左或右浮动是一个不错的方案；但如果将行内元素设置为 inline-block 然后设置其宽度同样有效，IE下也一样正常；但是如果将块级元素设置为 inline-block ，然后同行排列，在标准浏览器中正常，在IE下却有一些BUG，即使将其设置为 inline ;然后 haslayout ；还是有一些说不出的 BUG。

总结

故通过上面的说明，在能不使用浮动的情况下我们应该尽量避免，但如果在如果无法确定父级元素是否大于绝对元素的高度，还有无法确定绝对定位的宽度时，我们还是只能使用浮动。

PS: 团队中的几个人老是奇怪我为什么这么喜欢使用决定对定位，而不用浮动定位；希望你们能看明白…….

Related Entries

相对定位和绝对定位

housne — Sat, 19 Mar 2011 01:36:46 +0800

网页布局中，定位是极为重要的一个部分，相对定位(position:relative;)和绝对定位(position:absolute;)对于初学者来说一直都是一个比较模糊的概念。普通元素的 position 为默认的 static，他们为普通流 (normal flow) 只能利用填充(padding) 和空白边(margin)进行定位，会忽略 top, bottom, left, right 或者 z-index 声明。

相对定位被视为普通流定位模型的一部分，相对定位元素会占据空间，并以相邻的普通元素作为参考进行定位，如果将 top 设置为 20px 时，他会出想在原位置顶部下方的 20px；绝对定位元素则不会占据任何的空间，他会相对于最近的已定位的父元素进行定位。

相对定位和绝对定位是天生的一对，最常见的应用是，先将父级元素设置为相对定位，然后将子元素设置为绝对定位，拥有绝对定位的子元素能出现在父级元素的任何位置，例如想让某个元素向右显示，可先将父级元素设置为相对定位，然后将该元素设置为绝对定位，并设置 right:0; top:0; . 当然利用浮动(float)也能使某元素向右显示，但如果利用了浮动的话，就必须清除浮动，这样增加了代码量，而且在IE下过多的浮动会导致各种莫名的BUG，所以我一直主张尽量少用浮动进行定位。

要注意的是在IE6下，拥有相对定位的元素会失去 haslayout ，这时候的绝对定位就会有一些偏差，我们能给相对定位的元素添加一些属性使其拥有 haslayout, 例如设置元素高度，但有时候我们并不能确定元素的高度，这时候我们能设置一些IE6的专有属性，例如 _height:1%;

feedsky robot bb0b4203

Related Entries

WordPress 与 HTML5

housne — Fri, 14 Jan 2011 20:04:52 +0800

HTML5 对网页开发人员来说的确是个让心兴奋的东西，简单人性化的语言标记，实用强劲的新特征，使得网页开发更加快速，而且功能更加强大。 WordPress 一直是我学习网页开发的一个重要平台，闲来无聊我把一些基本的 HTML5 新特征应用到了现在的 WordPress 主题 K2 上。

对于 WordPress 我主要运用了以下几个新的 HTML5 标签 <header> <nav> <section> <article> <footer> ;使用这些标签在网页布局和外观上并没有变化，但这些标签能使网页标记更具语义化，能给 WordPress 内容分区，这样使以后的开发更为便捷，而且相信这且语义化的标签很快会被运用到搜索引擎中，使得搜索引擎更加容易读取网页布局和内容，下面来看看这些标签在WordPress 主题布局上的应用。

如上图，我们可以运用以上的标签给 WordPress 的内容分区，这样在以后能让搜索引擎更为快速和准确的收录，在 WordPress 中 <article> 标签应用较为常见，WordPress 作为一款博客平台软件，文章为主体的内容数据，要说到的是，在 article 中也能应用 <header> <section> 和 <footer> 标签，这样就像一大整体下的一个个小的完整的内容分区，很多 WordPress 主题开发人员都知道在 index.php 的文章 title 是不能加 <h1> 的标签的，因为一个页面只能存在一个 <h1>标签，现在情况改变了，在每一个小的完整内容分区里你都能加入一个 <h1> 标签。

在 WordPress 中有个特殊的内容形式，评论，从实际角度讲，每条评论的确都能称为 article ，因为有云，评论比文章更精彩。但官方显然并未把评论归为 article ，他推荐的只是粗暴的用列表标签 <ul> <li> 展现评论。但从另一个方面讲，如果把评论内容的重要性和博客文章内容重要性摆一起，使用 <article> 标签的话，势必会引来更加的疯狂的 Spam 营销行为，这的确是一个很纠结的事情。鉴于我对 spam 的铁腕政策和本站的 spammer 不是很多，我在评论上应用了 <article> 标签。

当然还有很多的HTML5的新特征能应用到 WordPress 中，比如 input 的各种 type 能应用到评论框的 input 中等。

最后要提到的是浏览器的支持，经我测试 Chrome 7 / firefox 4 / safari 5 表现良好，而 firefox 3.x 和 Opera 11 暂不支持，IE9未测试，至于IE6/7/8，如果你运用到HTML5的话，还是忘了它吧。当然你能让IE加载一段JS，然后运用<!–[if lte IE 8]>还原 div 标签的话IE也能良好运行，但这是与HTML5的精神相违背的。

Update: 对于 firefox 3.x和 opera 11 不兼容情况，可以在 CSS 加上这句 header,nav,section,footer,article{display:block}

Related Entries

选择虚拟主机迷你指南

housne — Thu, 13 Jan 2011 19:54:28 +0800

大部分 WordPress 独立博客都有一个共同点，那是都在使用虚拟主机，不管是共享空间(shared hosting)，虚拟专用服务器(VPS)或还是专用服务器(dedicated server)，倒卖(reselling)使虚拟主机成为一种低门槛的行业，这样使得一些不靠谱的商家能容易的建立一家网络托管公司，然后几个月之后消失不见。当然这并非发生在所有经销商的身上，虽然倒卖提供了学习一些基础知识的机会，但我对经销商已经失去了信任。在网站上线之前，当你把网站的准备工作都完成后，选择虚拟主机恐怕是最重要的事情。为了以后不再跟这些事情打交道，这里有一些当你选择虚拟主机时需要考虑的问题和事情。注意:这份迷你指南只要使用于共享空间(shared hosting)

潮流趋势:WordPress 中心主机(Centric Hosting) – 近两年来，出现了一种新形式的虚拟主机，并试图缩小WordPress.com提供的服务和通过安装WordPress独立博客并拥有所有自由之间的差距，这类公司例如有Page.ly和WPEngine.我发现越来越多这样的公司同时开始开店销售，一些老牌的虚拟主机商也开始新设 WordPress 中心套餐。有一件事你必须明白，WordPress 中心主机的名称并不会让他们更好。

是否及时跟新服务器? – 在2010年早些的时候，有很多包括一些大型和知名的网络托管公司，成为了被攻击受害者，而攻击者应该感谢这些公司服务器上过时的软件。在成为别人的客户之前，应该问下这家公司的正在使用的 php, MySQL, phpMyAdmin, 等软件的版本，一个好的虚拟主机应该总是使用软件的最新适用版本。

声誉核查 – 在 Google 搜索框里输入这家公司的名称，并在后面加上 烂(sucks) 字，你应该很快就会发现所有的虚拟主机都很烂，你应该注意的不是用户报告的问题有多严重，有多少，而是这家公司是如何回复这些问题的，每家虚拟主机提供商都会遇到一些同样的问题，但是怎样去处理这些问题使他们大不相同，有一个关于已存在多年的网络提供商所有事情的资源站点 WebHostingTalk.com ，如果你对硬件、软件所有这些关于一家网络托管公司如何运行的事情感兴趣的话，这个论坛里的详细讨论能使你豁然开朗。

群众推荐 – 如果你在 WordPress Support 论坛发贴询问关于该使用哪家网络托管商的建议，你有机会得到3到5家不同公司的推荐，如果你对其中的一家公司感兴趣，一定要询问周围群众的个人经历，特别是关于客户服务和在线时长，尽管如此，就像 Google Research 之谜一样，也许你所有的朋友已经很成功找到了一家合适的公司，但你却不幸刚好成为了那个遭遇痛苦经历的烂苹果。

反复检查协议 – 认识阅读你感兴趣的空间的服务条款和使用协议很重要，有很多托管公司广告宣传称神马都是无限的，但你会发现他们会用很小的字体印着 AUP ，如果你超载率CPU,空间或是流量资源，那么你的网站就会被切断，无限是一个很好的营销技巧，但不论如何，哪里都会有限制，所以对待无限条款需要持保留态度。

DoS 和 DDoS 攻击 – 在2010年早些的时候，我的网站 WPTavern.com 遭到了拒绝服务攻击，当我联系 AnHosting 的客服的时候，他们基本只是告诉我，我必须找到停止攻击的方法，如果因为使用太多的资源而使网站连续暂定三次的话，他们将会从我的帐号中移除我的网站，再怎么说也没用，这激怒了我，因为作为一个两年多的忠实用户，他们没有与我合作，一起找解决的方法。DoS 攻击近年来是一种常见的事情，所以请确保你感兴趣的公司是否有防火墙或是其他类型的预防措施，避免像我以前的空间商一样把你无情的抛弃。

服务 – 服务系统应该是我们选择虚拟主机的重要方面之一，寻找一些提供多种服务支持解决方案的公司，例如论坛、票据系统(ticket system)、电子邮件和电话服务。我更愿意选择那些提供 24/7 服务的虚拟主机。而且应该加分给那些不会把服务外包给讲英文(中文)不是很好的国家或公司。

备份 – 如果公司的网站和服务宕机，他们有故障转移系统吗？你的镜像数据转移到了故障转移系统里吗？他们有和底层系统一样的安全防护措施吗？当然专门为 WordPress 备份数据并不是非常的重要的参考选项。

沟通 – 这是我见到很多网络托管公司搞砸的一个方面，你现在应该明白，他们应该理解和客户沟通是最为重要的，但他们中的大部分还不明白这个，向你感兴趣的公司询问，当你的网站所在的服务器维护时，你是否会收到他们的通知，同时询问他们此类的服务维护和其他通知将在哪里发布。

支付选项

SSH 和 SFTP

Sandboxing

总结

当然这并不是一份完整的关于如何选择满意虚拟主机来运行 WordPress 网站的指南，它只是提供一种思路，这只是一份简短的参考列表，实际上，和一家网络托管公司拥有满意的体验简直就像抽奖一样，因为太罕见了。在我以前的经历中，WPTavern.com和之前的网络托管公司有两年不错的经历，但就因为两个星期内强制要求移除我的网站，使它变成了梦魇一般。因为我在搬移我网站遇到的问题，使我在一个星期内转移了两次。总之，总结和搜集尽可能多的信息，从而做出理性的决定，某家网络托管公司是否合适你。价格不应该是你选择的唯一决定性因素，特别是决定慎重的时候。

btw:文中还有几条没有翻译，实在是不想翻译了，头晕…….

原文:Mini Guide To Choosing A Web Host