ProjeKt D.K » CSS http://blog.punkid.org Where We ROT! Sun, 04 Jul 2010 07:51:43 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Going Mobile II http://blog.punkid.org/2010/03/03/going-mobile-two/ http://blog.punkid.org/2010/03/03/going-mobile-two/#comments Wed, 03 Mar 2010 10:10:22 +0000 punkid http://blog.punkid.org/?p=349 还是讨论mobile web design的话题，对之前的Going Mobile做些补充和修正。因为我的blog模板是完全用HTML5重写的，所有不支持HTML5以及CSS的移动设备浏览器全部忽略，我指的是此文只针对iPhone Safari，Google Android Chrome Lite以及Opera Mini/Mobile这些Modern Browsers。

善用@Media规则

Opera Mini/Mobile, Chrome Lite, iPhone Safari都支持@media规则，所以下面这行代码基本上就能搞定这些主流的移动设备浏览器了。

@import url(css/handheld.css) only screen and (max-device-width:480px)

如果你希望为iPhone Safari/Chrome Lite添加独立的样式表的话，加上-webkit prefix就可以了。

@import url(css/handheld_iphone.css) only screen and (-webkit-max-device-width:480px)

Viewport的重要性

由于Opera Mobile的默认screen width是850px，而iPhone Safari则是980px。如果你跟我一样，不设定body的宽度，而是让它自适应屏幕宽度的话，你会发现在移动浏览器上你的网页宽度可能远远超过了480px。添加viewport的META到HTML head里能有效避免这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

通过width=device-width将网页默认宽度设置为设备屏幕尺寸。

Float and Fixed Positioning

float能不用尽量不用，但不等于说float就不能用，至少iPhone Safari，Chrome Lite以及Opera Mini/Mobile对浮动的处理都是很准确的。

真正需要避免的是fixed定位，一是浪费了原本就不大的屏幕空间，二是滚动页面时容易导致花屏。

使用Max-Width

如果你的图片动辄500px的宽度，在移动设备的浏览器上显示肯定会溢出屏幕，最好的办法是给img加上max-width属性:

img {max-width:100%; height:auto;}

充分利用好HTML5 input

HTML5为input加入了很多激动人心的新属性，包括新的type，placeholder以及autofocus。

新的Input类别

新加入的input type包括email, url, search…使用这些type准确定义你的输入框，不仅让代码更语义化，而且在iPhone Safari上也能获得更大的输入便捷。

例如，如果你的input定义为email type:

<input type="email">

在iPhone Safari上点击输入框，弹出的虚拟键盘是这样的:

input-type-email

图片来自Dive into HTML5: A Form of Madness

最下面的一排按钮包括了email地址常用的@, .符号。

而如果你的input定义为url type的话:

<input type="url">

在iPhone Safari上弹出的虚拟键盘则自动包括了常用的.，/，.com符号。

input-type-email

图片来自Dive into HTML5: A Form of Madness

长摁.com的话还能在com, org, net中切换，不得不赞叹Apple的工程师对iPhone的细节把握，可惜的是Google Android就没这么聪明了。

Placeholder属性

placeholder这个新加入的属性可以在input中加入提示性文字，当点击input时该提示性文字则自动隐藏。以往这样的功能是需要依赖于javascript才能实现的。

input-attr-placeholder

如上图，加入以下代码，在输入框内会出现(Required, will not be published)的提示性文字。

<input type="email" id="email" value="" placeholder="(Required, will not be published)" required />

经测试，iPhone Safari和Chrome Lite都支持该属性。

Autofocus

另一个新增加的input是autofocus，目的是在页面加载完后自动聚焦到指定输入框内，这个效果经常在网页账号登陆页面上使用，例如Gmail, WordPress的登陆页面等等。同样，iPhone Safari，Chrome Lite以及Opera Mobile都支持它。

<input id="login" autofocus>

No Font-Face

font-face虽然在iPhone Safari，Chrome Lite以及Opera Mobile下都支持，但是以我的blog为例，即使开启了gzip压缩，一个Graublau Web字体还是有38kb。最好还是为移动样式表重新定义下font-family，去掉自定义字体。

Related posts

]]> http://blog.punkid.org/2010/03/03/going-mobile-two/feed/ 0 Going Mobile http://blog.punkid.org/2009/08/25/going-mobile/ http://blog.punkid.org/2009/08/25/going-mobile/#comments Tue, 25 Aug 2009 08:59:36 +0000 punkid http://blog.punkid.org/?p=328 还是接着上回的话题吧，感谢leafduo和Lushnis两位很有手机品味的朋友的测试 :D

为什么做这个测试呢？我自己现在绝大部分时间都是在用手机上网，所以自然而然对我的blog进行mobile化改造很必要了。我的Nokia E71上用的是Opera Mini浏览器，它有两个优点，一是对标准（HTML5, CSS）的支持，二是页面经Opera服务器中转压缩处理，省流量。Nokia S60自带的基于webkit的浏览器我也试过，但是既不能解读handheld也不能处理高级点的Media Queries，所以基本上如果单纯从CSS, HTML下手，没法把它从众多桌面浏览器中区分开来，为它设立一个格外的mobile stylesheet。iPhone Safari我也把玩过几次，它对页面的渲染相当好，几乎不需要我格外去设立一个stylesheet了。其他的掌上设备浏览器还包括Android Chrome Lite，Netfront，UCweb等，我都没测试过。

针对各主流手机浏览器设立独立的样式表

因为目前主流的手机屏幕宽度像素都在320px以内，为了让我更好的用E71浏览我自己的blog，我为320宽度屏幕设立了一个独立的样式，把整个容器的宽度都调整到320px，字号也调小到相对大小1.3em。

@import url(css/handheld_320.css.php) handheld;
@import url(css/handheld_320.css.php) only screen and (max-device-width:470px);

前面一行是为了target那些支持handheld Media的手机浏览器，后者因为Opera，Safari和Chrome都支持高级的Media Queries，我把最大允许设备屏幕宽度设为470px，这样就能保证在用iPhone/iTouch, HTC G1/G2/Hero以及Nokia的Opera Mini上都能启用handheld_320.css样式表，不用进行水平滚动了。

现在，iPhone， HTC Android，M8都支持横屏模式了，以iPhone为例，横屏时浏览器的窗口宽度是480px，启用handheld_320.css的话未免太浪费水平空间了。所以有必要再对这类横屏模式启用另一个基于480px宽度的stylesheet，我于是再编写了一个handheld_480.css的CSS。

在一个理想的世界中，如果iPhone Safari，Android Chrome Lite这些浏览器支持更进阶的Media Queries的话，直接使用:

@import url(css/handheld_480.css.php) only screen and (max-device-width:480px) and (orientation:landscape);

就能保证iPhone Safari，Android Chrome Lite直接启用handheld_480.css了，然而现实是这两款浏览器都不支持orientation，Opera也不例外。所以我只能采取笨一点的方式，将480px宽度的设备默认为iPhone, Android, M8的横屏模式。所以target他们的代码妥协为:

@import url(css/handheld_480.css.php) only screen and (device-width:480px);

注意，如果同时引入了针对320px和480px宽度的mobile样式的话，针对320px设备的max-device-width一定要小于480px，否则对于iPhone, Android, M8这类横屏设备，handheld_320.css, handheld_480.css会同时启用。

不幸的是，这招在iPhone Safari和M8 Opera上都无效，Android上尚未实验。按理说iPhone Safari和Android Chrome Lite是支持device-width media query的，为何不起作用，不解ing…

另外，由于iPhone Safari会默认启用自动缩放功能，以保证整个页面在可视域范围内。既然我们已经有了handheld_320.css和handheld_480.css样式表，就没必要让它自动缩放了。在<head>里加入这一句HTML代码:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

这样iPhone Safari的初始化缩放为1（即不缩放），允许的最大缩放倍数为2。

关于移动样式表的一些CSS Tips

调整好字号，字体，我的blog默认启用的是1.6em的大号字体，在小屏幕上看实在有点挥霍空间了，有必要调小几号，我一直都是em字号方式的拥护者，为什么？见Effective Style with em。

页面一定要留白，虽然屏幕有320px，480px的宽度，实际上我能用到的可能就300px，460px，为了更好的阅读，页面上下左右各补白10px是有必要的。我直接在父容器wrapper里定义:#wrapper {padding:10px;}就是了。

减少不必要的空白，桌面浏览可以大胆的增加whitespace，这样看起来更舒适，但是移动设备不一样，过多的使用翻页，滚动条会加速手机的磨损，所以我在做mobile样式处理时，尽量减少过多的空白。

注意浮动和右对齐，float这个属性一定要注意，特别容易在小屏幕上发生溢出现象，所以能不用float就尽量不用，用的话也得算好容器宽度够不够用，text-align:right更得注意了，在320px以及更小的屏幕上，为了看到水平居右的文字还得拖动水平滚动条是件多么费功夫的事。我在handheld_320.css中几乎把所有右对齐的文字都调整为左对齐了。当然，handheld_480.css我没这么干，大屏幕不用怕 :D

注意不要溢出父容器的box-model，我在桌面样式上使用了负的margin把文章小标题移到文章一侧，形成marginal aside的样式。

.entry h4 {float:left;width:200px;margin-left:-200px;}

但是移动样式上，我回归到常规的标题模式：

.entry h4 {float:none;margin-left:0;width:100%;}

清除浮动和margin，宽度重新设置为100%，这样就不会出现水平滚动条拉动的现象了。

减少不必要的图片和节点，手机流量费贵啊，3G更贵，除非有wifi，不然sina, pconline这种我从不用手机浏览。所以，没必要的背景图片，修饰图标尽量都给去掉，至于jQuery这类花哨的特效，ajax技术，至少我的Opera Mini用不了，加载了也白费，浪费流量。

Accessibility是个很大的问题，你用电脑能点的到的我用手机未必点击的到，所以保持代码的语义化，精简化，标准化很重要，多拿手机测试下就知道哪有问题了。

End

最后，欢迎各位多用你们的爱机浏览我的blog，iPhone/Android/Palm Pre这类设备咱没钱买，没法完完全全保证我的blog能在这些设备上有好的浏览体验，多多指正，指出问题及解决方案最好。

都09年了，赶紧上移动设备，用mobile技术驱动你的网站吧（如果你也希望我多浏览浏览你的网站的话）。

Related posts

]]> http://blog.punkid.org/2009/08/25/going-mobile/feed/ 0 好玩的CSS3 Transitions属性 http://blog.punkid.org/2009/04/20/play-with-css3-transitions/ http://blog.punkid.org/2009/04/20/play-with-css3-transitions/#comments Mon, 20 Apr 2009 15:19:58 +0000 punkid http://blog.punkid.org/?p=313 由于写论文的缘故最近经常要切到Windows下，顺便好好玩了下Google Chrome这款webkit engine浏览器，一个星期下来就有彻底投靠Google Chrome的冲动了，就等着Google Chrome的Linux版了。

webkit engine有个很nifty的CSS3私有属性-webkit-transition，有了它可以代替原来很多不得不依靠jQuery这些framework实现的动态效果。

关于这个属性的介绍就不多说了，直接上演示实例吧，用Inspector看下代码就一目了然了。

注：此演示实例只对webkit engine有效，请用最新的Google Chrome, Safari浏览器访问，Linux下可以使用Arora。

Mozilla Firefox 你何时才能解决下linux下的性能问题啊？
Microsoft IE 你何时才能跟上其他浏览器的步伐啊?
Opera 你何时才会出Opera Mobile for S60啊?

Related posts

]]> http://blog.punkid.org/2009/04/20/play-with-css3-transitions/feed/ 1 Tips in Aggregate http://blog.punkid.org/2008/05/26/tips-in-aggregate/ http://blog.punkid.org/2008/05/26/tips-in-aggregate/#comments Mon, 26 May 2008 15:53:56 +0000 punkid http://blog.punkid.org/?p=216 都是些很零碎的tips，涉及到linux, wordpress, css, php, English … 选择性阅读吧!

Douban and PHP

按照之前QQ签名秀的原理把豆瓣的个人广播系统也给提取出来了，效果请见此test页面。

使用方法是把以下代码添加到你的页面里:

<script type="text/javascript" src="http://punkid.org/glade/douban/request.php?userid=<strong>username</strong>&numbers=5"></script>

其中userid后面跟的是你的豆瓣用户名，numbers后面是显示条目数(最多10条)。至于怎么polish这个douban的miniblog纯粹是你的CSS活。对了，输出编码是UTF-8。

PHP tips: 用addslashes这个函数可以对字符串进行转义。

Linux

1. Tired of emerging the world?

emerge $(eix -Iuc --format-compact "<category>/<name>" dev-libs/* | head -n -1)

可以用来更新某一category(例如dev-libs)下的已安装软件。

2. Ape转mp3

emerge shntools 和 mac-port (gentoo-china overlay提供) 后运行:

shnsplit -f filename.cue -t "%n - %t" -o "cust ext=mp3 lame --preset extreme - %f" filename.ape

会根据cue文件对ape进行切割成按tracknumber - trackname命名的mp3文件，不过ID3信息没法保存进去，交给Musicbrainz搞定吧。

3. 使用Aria2下载器

原来用的axel不知何故在我的电脑上经常出现Initialing download就停滞不前的情况，无奈…换了个稍微大点的Aria2。顺便把Gentoo Mirror的默认下载也换成了aria2。更改make.conf如下:

FETCHCOMMAND="/usr/bin/aria2c -c -s 4 -d ${DISTDIR} -o ${FILE} ${URI}"
RESUMECOMMAND="${FETCHCOMMAND}"

至于在firefox里用flashgot启用aria2下载，在Executable path里填/usr/bin/rxvt (任意虚拟终端，别用xterm就是了，那个启动太慢了)，然后在Command line arguments template里填-e aria2c -s 5 -d [FOLDER] [URL]

WordPress

1. 只显示当日评论数

不明白我的意思的，留个言在到首页看下就知道了，当日有留言的日志会格外用类似于3 comments today方式显示。方法很简单，抽数据而已。修改你的模板的index.php，再最顶端添加:

<?php 
	$nowtime = current_time('timestamp');
	$today = date('Y-m-d G:i:s', mktime(0, 0, 0, date('m',$nowtime), date('d',$nowtime), date('Y',$nowtime))); 
?>

然后是修改loop部分:

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
 
		<strong><?php $today_comments = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = $id AND comment_date >= '$today' AND comment_approved = '1'"); ?></strong>	
		<div class="entry"
		<h2 id="post-<?php the_ID(); ?>" class="entrytitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<p class="metadata clearfix">
		<strong><span class="cmt"><?php if ($today_comments > 0) { ?><a class="todaycmt" href="<?php the_permalink() ?>#comments" title="Comment on <?php the_title(); ?>"><?php echo $today_comments; ?> Comment<?php if ($today_comments>1) echo 's'; ?> Today</a><?php } else { ?><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?><?php } ?></span></strong>
		</p>
		...
		</div>
 
		<?php } ?>
 
		...
 
<?php endif; ?>

加重部分是关键。

2. 过滤某category的feed输出

在模板的function.php里添加这段代码:

<?php
function RssFilter($query) {
     if ($query->is_feed) {
         $query->set('cat','-<strong>22</strong>');
     }
         return $query;
}
 
add_filter('pre_get_posts','RssFilter');
?>

其中22为你的category ID。

CSS

CSS的代码书写风格我倾向于单行式，用缩进表明元素的从属关系。例如:

#secondary div.modules {margin-bottom:40px;}
	#secondary div.modules a {color:#888;}
	#secondary div.modules a:hover {color:#FF32B3;text-decoration:underline;}
	#secondary div.modules h3 {color:#94C742;border-bottom:1px dotted #94C742;}
	#secondary div.modules ul li {padding:3px 8px;border-bottom:1px dashed #FF80D0;}
	#secondary div.modules ul li:hover {background:#F0F8E2;}
 
#bottom_wrapper h3 {color:#FDF262;border-bottom:1px solid #FDF262;}
	#bottom_wrapper div.modules {width:300px;margin:0 10px;float:left;position:relative;display:inline;}
	#bottom_wrapper div.modules ul li {height:1.6em;padding:3px 2px;border-bottom:1px dotted #528F08;overflow:hidden;}
	#bottom_wrapper div.modules ul li:hover {background:#528F08;}
	#bottom_wrapper div#misc table.calendar {width:300px;margin-bottom:20px;border-collapse:separate;border-spacing:1px;}
		table.calendar td {padding:3px 0 2px;text-align:center;}
		table.calendar td.calendar_h {display:none;}
		table.calendar td.today {background:#528F08;}
		table.calendar td.week {background:#528F08;color:#FDF262;}
	#bottom_wrapper div#tags ul li {margin-right:5px;padding:0;display:inline;border:0;}	
		#bottom_wrapper div#tags ul li span, #bottom_wrapper div#tags div {display:none;}

也许这种单行的方式不利于阅读，但是类似block的书写方式最大的问题是一旦CSS代码上个几百行的，要找到某一行翻页是件很痛苦的事，而单行定义加上适当的缩进即便不看HTML源代码也能对页面结构有个基本的认识。还有就是…在VIM下用w,b进行整词跳跃是件很惬意的事，即便是单行也能很快的跳跃到需要修改查看的property。

English

1. take with a pinch of salt

Radiohead的A Wolf at the Door里有句歌词是Take it with the love its given, take it with a pinch of salt, take it to the taxman。

那take it with a pinch of salt真的是抓把盐吗? 真实的意思有点类似于姑且相信，半信半疑的意思，例如Regarding what you said yesterday, I would take it with a pinch of salt意思就是你昨天说的那些我姑且相信吧。

Tia Dalma and I go way back

在电影Pirates of the Carribean : The Man’s Chest (加勒比海盗2:聚魂棺)，Jack船长带着众人去找女巫Tia Dalma时说: No worries, mates. Tia Dalma and I go way back.。我记得当时我看的思路的版本翻译成了伙计们，别担心，Tia Dalma和我待会就回来。这其实是错误的，go back way的意思是表示两人认识很久了，交情很好。

Related posts

]]> http://blog.punkid.org/2008/05/26/tips-in-aggregate/feed/ 1 April 5th is NOT for See Ass Ass http://blog.punkid.org/2007/04/02/april-5th-is-not-for-see-ass-ass/ http://blog.punkid.org/2007/04/02/april-5th-is-not-for-see-ass-ass/#comments Mon, 02 Apr 2007 07:36:11 +0000 punkid http://blog.punkid.org/2007/04/02/april-5th-is-not-for-see-ass-ass/ No CSSThe CSS Naked Day is coming back! What a CSS Naked Day is? In April 5th, the event participators’ sites will go completely NO STYLE but plain, removing all of the CSS.

Seems like quite interesting and alternative, i’d like to get NUDE with these crazy guys. The purpose is let you know how important and magical the CSS is for site decorating,as well the reason why we should write semantic codes.

Join us if you wanna save your bandwidth a little bit more. NO SEE ASS ASS (CSS) !

Related posts

]]> http://blog.punkid.org/2007/04/02/april-5th-is-not-for-see-ass-ass/feed/ 4 Bugs on Modern Browsers http://blog.punkid.org/2007/03/17/bugs-on-modern-browsers/ http://blog.punkid.org/2007/03/17/bugs-on-modern-browsers/#comments Sat, 17 Mar 2007 13:04:32 +0000 punkid http://blog.punkid.org/2007/03/17/bugs-on-modern-browsers/ While I’m making a new wordpress design for Rockaby, I found Mozilla Firefox and even Konqueror Browser have some problems or misunderstanding on CSS compliance.

Fixed Position Fucked Up When Scrolling in Gecko Engine Browsers

I like the idea of keeping the footer area always visible on the bottom of the browser window, so i did it to the Rockaby’s theme, I applied fixed position rule into the footer div like this.

#footer  {height:104px;width:100%;color:#fff;font-size:1.3em;background:url(img/footer.png) repeat-x ;position:fixed;bottom:0;z-index:8;}

The footer should always stand on the bottom of the browser window in spite of scrolling. I knew IE6 couldnt understand fixed position rule. I’ve tested it in IE7,Konqueror,Opera…all work well,except Firefox. When the page loads much information and objects, scrolling quickly may fuck up the whole page, lets see the 2 pictures below .

Mozilla Bug

It looks quite well as the footer standing on the bottom of the visible area in Firefox browser window.

Mozilla Bug

Then I just scroll the window, ooh, it really fucked up. And it wont be okay unless I minimize it or switch to another tab. The browser takes too much time to render the fixed object. I’ve tried it in FF1.5 and FF2.0, Flock, SeaMonkey and K-Meleon (all in Gecko Engine), no luck.

This is a bug in Gecko Engine Browser, and no solution AFAIK. All you can do is make sure that the page doesnt load a LOT of objects or give up the fixed position idea. Fortunately, the Mozilla developers have noticed this problem,I tried the latest nightly build of Firefox 3 (a3pre),it works much better (though still far from perfect).

Anyway, I dont feel like to give up the fixed position idea so far.

Clearfix doesnt works well in :after pseudo element in Konqueror (KHTML)

The well-known clearfix CSS tip is used to close the floating objects. I added this rule to make drop cap typographical effects for the first letter in each blog entry.

.entry > p:first-child:first-letter { font: 30px Times,Georgia,Verdana,'Lucida Grande',Sans-Serif; text-transform: uppercase; float: left; margin-right: 8px; padding-top: 4px }

To close the floating, and make sure the floating paragraph wont mess up the others. I applied this clearfix rule into the first paragraph’s :after pseudo

.entry > p:first-child:after {content:".";display:block;height:0;clear:both;visibility:hidden;text-indent:-9999em;}

It works well in Firefox and Opera, but Konqueror maybe misunderstand it. See the image below, the content of the :after pesudo element is visible!

clearfix-bug

Thanx to Thomas’s CSS hacks series and the other browsers’ bad CSS3 compliance. We’ll be able to ‘fix’ it by a pure CSS3 way.

html:not(:nth-child(1)) ... { ... }

This rule is only recognized by Konqueror,thx to its fantastic support on CSS3 selectors. So i applied this rule:

html:not(:nth-child(1)) .entry > p:first-child:after {content:""}

To give a null content to the :after pseudo element. And please notice, actually the content is still there, but becuz its null, so nothing we can see.

And definitely you can use this hack to apply specific rules on Konqueror at hand (before other browsers give support on :not and :nth-child pseudo)

Related posts

]]> http://blog.punkid.org/2007/03/17/bugs-on-modern-browsers/feed/ 1 浅谈实现网页交替背景颜色的几种方法 http://blog.punkid.org/2007/02/18/sereval-ways-to-make-alter-background/ http://blog.punkid.org/2007/02/18/sereval-ways-to-make-alter-background/#comments Sat, 17 Feb 2007 16:05:38 +0000 punkid http://blog.punkid.org/2007/02/18/sereval-ways-to-make-alter-background/ WordPress 的评论模板部分都会定义一个$oddcomment函数用来实现评论的样式交替变换，采取交替样式可以使列表有一定分区度，便于浏览。我稍稍总结了下，分别通过javascript, php和CSS三种方式进行实现，其中CSS实现方法还几乎处于理想状态，仅供参考。

实现方法之Javascript篇

假设我们有个id名为 list 的无序列表ul，其下有5项item (li)。我们可以用getElementById和getElementsByTagName先找到这些item，然后通过for循环筛选出奇数项并赋予class值。再通过CSS定义该奇数项class样式从而达到交替样式的目的。javascript代码如下:

 function alterItem() {
 var list=document.getElementById('list');
 var items=list.getElementsByTagName('li');
 for (var i=0;i<items.length;i++) {
   if(i%2==0)
   items[i].className='odd';
   }
 }

 window.onload=alterItem;

最后用通过CSS定义 .odd样式就行了。

实现方法之PHP篇

此方法来源于WordPress论坛的这篇日志。我曾经在PP的sidenotes部分就是用这种方法实现交替背景的(WP的comment部分已经有oddcomment函数了，无须再费周折)，我直接照搬原来PP theme里的sidenotes部分代码。

<?php query_posts('category_name=sidenotes&showposts=3'); ?>
     <?php while (have_posts()) : the_post(); ?>
     <div id="p<?php the_ID(); ?>" class="<?=($i%2)?"even":"odd";$i++;?>">
     <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php strip_tags(the_title()); ?>" class="title"><?php the_title(); ?></a>
     <?php the_content(); ?>
     </div>
<?php endwhile;>

注意其中加粗部分，先在模板文件顶部插入如下代码<?$i;?>，然后在class里加入这句判断语句就够了<?=($i%2)?"even":"odd";$i++;?>。学过C语言的都知道这是个if..else判断语句的缩写形式– If (Expression) ? true : false，如果满足表达式，则执行? 部分，否则执行 : 部分。也就是说，满足 $i%2等于0，即$i为偶，则赋予class为even值，然后$i 加一，滚动到下一item上进行第二次判断。

实现方法之CSS篇

CSS2有个:nth-child的选择器，这是个非常非常强大的选择器，你可以定义Element:nth-child(3)来找到为其父元素下的第三个子元素，你也可以定义Element:nth-child(odd) 或者Element:nth-child(even) 来查找其父元素下的奇偶子元素，甚至可以用Element:nth-child(3n+2) 来找到其父元素下的第3n+2个元素( n=0,1,2…)。通过CSS方法定义那太简单了!

ul#list li:nth-child(odd) {background:#000;color:#fff}

ul#list li:nth-child(even) {background:#fff;color:#000;}

不过，这么好的方法…目前只有linux下的konqueror浏览器支持(注:Konqueror是目前唯一100%通过CSS3所有选择器测试的浏览器)，好在Opera已经开始落实支持该选择器的工作了。

我个人比较喜欢这种cutting edge的方式! 如果你想让你的网站/blog做的更先锋的话就用这种方式吧!

顺带说句: 其实linux下的konqueror是款相当棒的浏览器，他们对CSS的支持一向都是做的最棒的(目前还有个opacity没解决)，连multiple-backgrounds他们都支持了!

Related posts

]]> http://blog.punkid.org/2007/02/18/sereval-ways-to-make-alter-background/feed/ 0