Macji Pro

使用feedburner

November 3, 2008 - by Macji - 我的生活 - WordPress, 订阅, feed

本来想用 Feedsky 的，但看到放弃使用 Feedsky 服务，也跟着用feedburner了。

说正经的，如果你没有订阅我博客的，请订阅http://feed.macji.com/macji/，如果浏览器打不开，属正常哈，阅读器可以爬墙。如果你以前就订阅我了，请改一下rss源吧。因为少的可怜。。。。

1 条评论»

css计数器

October 4, 2008 - by Macji - HTML/CSS/JS/PHP - css, 计数器

这是css2的东西，但我才知道，我。。。其实是在看阅读器里Opera Developer Community的一个文章，原来这样也行，发现其实是css2，马上去看了嗷嗷书的目录，他也是这么些的。虽然不怎么用得到，但还是记录一下。

当我们设计一个书的目录的时候，你是否会一个一个写上编号呢？其实可以利用css计数器。比如这个目录应该怎么写呢?

Web标准不是神话
理解Web标准
Web标准是什么
错误的思维
无障碍网页倡议（WAI）
量化Web标准
大部分通过W3C校验的网站只是伪标准
Web标准要求一览表
如果量化
为什么选择Web标准
CSS为什么着火
CSS 的作用
CSS 布局 VS. 表格布局
我能否学好Web标准
我需要具备什么素质和条件才能学好Web标准
学习的重点与难点
欲善其事，先利其器
软件的选择
调试环境

这些编号都是css写上去的，但唯有IE不支持。。 - -


ol{
	counter-reset: ordered; /* 指定一个计数器，名字叫ordered */
	list-style:none; /* 去掉默认 */
}
ol li:before {
	counter-increment: ordered; /* 使用已命名的计数器(ordered)  如果是 ordered 2 那累加2，可以是负数*/
	content:"第"counters(ordered,"")"章 "; /* 在li之前输出计数器(ordered) */
}
ol li li:before {
	counter-increment: ordered;
	content: counters(ordered,".") " "; /* 在li里的li之前输出计数器(ordered)*/
}

地址：http://labs.aoao.org.cn/book/web-standards-design/catalog.html

举一反三：http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/。

3 条评论»

打造纯CSS的无侵入的卡盘（幻灯片）

October 1, 2008 - by Macji - HTML/CSS/JS/PHP - css, unobtrusive, 幻灯片

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。

今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。

Opera无效

无法记录状态

没有hover效果

这些正是我想说的，我想补充的。

首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？

<style>
.macji ul{
    width:250px;
    height:260px;
    overflow:hidden;
}
#b:target{
    margin:-260px 0 0;
}
#c:target{
    margin:-520px 0 0;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
        </li>
    </ul>
    <ol>
        <li><a href="#a">a</a></li>
        <li><a href="#b">b</a></li>
        <li><a href="#c">c</a></li>
    </ol>
</div>

测试地址

问题2，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。

<style>
/*  省略一些css，下面这行是最关键的  */
a.item:hover, :target a.item{
	background:#f60;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
        </li>
	<li id="b">
            <a href="#b" class="item">2</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

测试地址

最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a href="#a" class="item">1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-

<style>
.macji{
	position:relative;
}
.macji ul{
	width:250px;
	height:260px;
	overflow:hidden;
}
ul li{
	height:260px;
}
.macji a{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
a.item{
	z-index:10!important;
	left:10px;
	top:230px;
	display:block;
	width:20px;
	height:20px;
	border:solid 1px #777;
	line-height:20px;
	text-align:center;
	color:#fff;
	background:#aaa;
}

#b a.item{
	left:31px;
}
#c a.item{
	left:51px;
}
a.item:hover,:target a.item{
	background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
	z-index:3;
}
/* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */
a.item:hover + a.pic{
	z-index:9!important;
}
/* for ie */
a.pic{
	* position:static;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <a href="#b" class="item">2</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！

扩展阅读：css3伪类:target

3 条评论»

我比较喜欢的reset css

September 30, 2008 - by Macji - HTML/CSS/JS/PHP - css, reset

各浏览器的默认样式都并不太一致，所以我们得建立一个reset.css，使各浏览器对各元素的默认属性都一致。reset css这大家都见得多了，对常用的莫过

*{margin:0;padding:0}

YUI的reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border:0;
}

这些reset没有最佳的，只有最适合自己项目的。

动手来做我喜欢的reset css，而且也简单的。首先重置你的margin和pading


html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}

重置标题字体大小为100%


h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

设置文字大小100%的基数。


body{
    line-height: 1;  
    font-size: 88%;
}

一般浏览器默认文字大小是1em，大约是16px，那body文字大小88%后，大约14px，所以h系列的大小也在14px左右。如果想给文字设置为12px，那么p{font-size:90%}。
最终重置css


html{/* for firefox */
    overflow:-moz-scrollbars-vertical;
    overflow-x:auto;
}
html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}
body{
    line-height: 1;
    font-size: 88%;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

我这里没有设置字体，具体参照 web 安全字体吧。上面这些元素是最常用的，但现在用的比较多的有sup、sub、cite等，也可以考虑重置为无表现样式。

扩展阅读：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

4 条评论»

给你的WordPress自定义分页

September 10, 2008 - by Macji - HTML/CSS/JS/PHP - php, WordPress, plugin

WordPress自带的分页不好用，只有上一页，下一页。感觉不爽，google了几下，分页插件倒是有，下过来想安装，但感觉代码太多，看了一下 wp-pagenavi 的分页插件，发现它怎么没写SQL，原来是我白痴了一回，$request = $wp_query->request;就能得到，而且$wp_query->max_num_pages就能得到最多页数，有了这个参数，自己写完全没有问题。于是瞎捣鼓写了一个分页。

效果如我博客分页一致，最多显示5个页码，也就是1 2 3 4 5，2 3 4 5 6，3 4 5 6 7这种。那这种分页有三种情况：

少于或者等于5页时，始终显示1 2 3 4 5

页数在最后3个页数时，始终显示最后5页

其他都是加2减2

附加功能，显示首页上一页下一页末页，情况在不是第一页和最后一个

那么就可以动手写了。


function mj_pagenav() {
    global $wpdb, $wp_query;
    if (!is_single()) {
        $CycNum = 5;	//最多页数
        $maxPage = $wp_query->max_num_pages;		//最多页数
        $paged = intval(get_query_var('paged')) === 0 ? 1 : intval(get_query_var('paged')) ;	//paged=? 参数
        $Button = array("首页","上一页","下一页","未页");
        if($paged - 2 <= 1){
            $FirstNum   =  1;
            $LastNum   =  min($maxPage, $CycNum);
        }elseif($maxPage - $paged <= 2){
            $FirstNum   =  ($maxPage - 4 == 0) ? 1 : ($maxPage - 4);
            $LastNum   =  $maxPage;
        }else{
            $FirstNum   =  $paged - 2;
            $LastNum   =  $paged + 2;
        }
        //输出 首页 上一页
        echo ( 1 >= $paged ) ? '' 
            : '<a href="' .get_option('siteurl') . '/">' . $ButtonArray[0] . '</a>
                <a href="' .get_option('siteurl') . '/page/' . ($paged - 1) . '/">' . $ButtonArray[1] . '</a>';
        //输出 页码
        for($i = $FirstNum; $i <= $LastNum; $i++){
            if ( $i == $paged ){
                $pageText = '<a href="' .get_option('siteurl') . '/page/' . $i . '/"><em>' . $i . '</em></a>';
            }else{
                $pageText = '<a href="' .get_option('siteurl') . '/page/' . $i . '/">' . $i . '</a>';
            }
            echo  $pageText;
        }
        //输出 下一页 末页
        echo ($max_page == $paged ) ? '' 
            : '<a href="' .get_option('siteurl') . '/page/' . ($paged + 1) . '/">'. $ButtonArray[2] .'</a>
                <a href="' .get_option('siteurl') . '/page/' . ($max_page) . '/">'. $ButtonArray[3] .'</a>';
    }
}

代码比较简单，“上一页下一页” 我都整在一行，将就着看。把mj_pagenav()放到该放的地方，简单的分页就弄好了，复杂的分页就再加几行代码（我这里把/page/xx写死了，只适应首页哈，搜索和存档等其它页的分页有空再改一下，-__-）。

9 条评论»