从PW学到的分页写法
从PW学到的分页写法，主要解决连接点下去后产生和自己大小不一直的虚框。适用对象：a标签直接放在div或者span中。如果a标签放在li中自然不会有这种问题，也就不用考虑这种写法了。
还有一个是more的写法。记得在写负边距在Opera、Safari中的表现的时候的例子就是关于more的写法，最近也学到了另外一种写法：把more写在前面，这样能得到浏览器下的统一表现，只是不知道从语义上讲这样是不是符合“标准”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>从PW学到的分页写法 - http://www.etosun.cn</title>
<style type="text/css">
body {font:12px "宋体";}
a {margin:0 2px;padding:2px 4px 1px;border:1px solid #3399FF;text-decoration:none;}
.c, .o, .s {margin:20px auto;width:500px;height:30px;line-height:30px;text-align:center;}
.c a {}
.o a {vertical-align:middle}
.c a:hover, .o a:hover {background:#33CCFF}
.s div {line-height:20px;background:yellow;border:1px solid #333;}
.s div span {float:right;}
</style>
</head>
<body>
<div class="c">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<div class="o">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
vertical-align:middle
</div>
<div class="s">
<div><span>more..</span>这样“反”着写：<div><span>more..</span>这样“反”着写</div></div>
</div>
</body>
</html>
还有一个是more的写法。记得在写负边距在Opera、Safari中的表现的时候的例子就是关于more的写法，最近也学到了另外一种写法：把more写在前面，这样能得到浏览器下的统一表现，只是不知道从语义上讲这样是不是符合“标准”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>从PW学到的分页写法 - http://www.etosun.cn</title>
<style type="text/css">
body {font:12px "宋体";}
a {margin:0 2px;padding:2px 4px 1px;border:1px solid #3399FF;text-decoration:none;}
.c, .o, .s {margin:20px auto;width:500px;height:30px;line-height:30px;text-align:center;}
.c a {}
.o a {vertical-align:middle}
.c a:hover, .o a:hover {background:#33CCFF}
.s div {line-height:20px;background:yellow;border:1px solid #333;}
.s div span {float:right;}
</style>
</head>
<body>
<div class="c">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<div class="o">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
vertical-align:middle
</div>
<div class="s">
<div><span>more..</span>这样“反”着写：<div><span>more..</span>这样“反”着写</div></div>
</div>
</body>
</html>
-
« 最近在干嘛
|
选项卡的切换的视觉效果»
- 2008-5-24 4:42
- 艺术pk技术