Macji Pro » 2008

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 条评论»