网页布局面试题(二)
如上图所示：
要求：用css实现翻页居中显示，每个块宽度不定自适应
使用到的图片：
兼容以下一些平台：ie6、ie7、Firefox2.x ，Opera版本系列
代码：
<!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=utf-8" />
<title>fenye(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
div{ text-align:center;}
div a{ display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left top; text-decoration:none; padding-left:8px; color:#FFF;}
div a:hover{ background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left -24px; color:#000;}
div a span{display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right top;height:24px;line-height:24px;padding-right:8px; cursor:pointer;}
div a:hover span{ background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right -24px;}
</style>
</head>
<body>
<div>
<a href="#"><span>上一页</span></a>
<a href="#"><span>11</span></a>
<a href="#"><span>2</span></a>
<a href="#"><span>33333</span></a>
<a href="#"><span>下一页</span></a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fenye(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
div{ text-align:center;}
div a{ display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left top; text-decoration:none; padding-left:8px; color:#FFF;}
div a:hover{ background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left -24px; color:#000;}
div a span{display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right top;height:24px;line-height:24px;padding-right:8px; cursor:pointer;}
div a:hover span{ background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right -24px;}
</style>
</head>
<body>
<div>
<a href="#"><span>上一页</span></a>
<a href="#"><span>11</span></a>
<a href="#"><span>2</span></a>
<a href="#"><span>33333</span></a>
<a href="#"><span>下一页</span></a>
</div>
</body>
</html>
浙公网安备 33010602011771号