分页代码样式

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!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><a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>+div 分页代码</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>CSS网页布局实例：hover悬停放大的翻页效果 - www.52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
*{ margin:0px;padding:0px;}
body,td,th{font-size:12px;font-family:"宋体"}
.c{ height:1%;}
.c:after{content:"."; display:block; visibility:hidden; clear:both; height:0;}
ul,li{ margin:0px; padding:0px; list-style:none;}
#nav {
 list-style: none;
 display:inline;
 /*显示为内联元素..不让它撑满整个页面*/
}
#nav li{ float:left; margin:0 5px;  display:inline;}
/*这里的li宽度跟a为display一样的大..这里要写,主要是防止a absolute后,从文档中脱离后原本的容器空间没有了,所以要定义一下*/
/*li为块级元素,display:inline;修复ie6 bug*/
#nav li a{ display:block; border:#999 1px solid; text-align:center; text-decoration:none; line-  } 
/*a 为display为block后..要写宽度跟高度.修复ie6 下显示不正常bug*/
#nav li a:hover{ position:relative;   position:absolute;margin:-5px 0 0 -5px;line- font-weight:bold;
border: 1px dotted #666666; background-color:#eee;color: #c00;
z-index:10;
cursor:hand;
 font-size:24px;
}
/*这里用margin的负数.不用top:-5px;left:-5px;也不用relative;因为所占据的空间不会消失;大家可以测试下*/
/*margin为负数.相对于自己原有的位置..而不是父容器..left,bottom相对于父容器进行定位*/
</style>
</head>
<body>
<div style=" margin:100px auto;">
<ul id="nav" class="c">
    <li><a href="/"><<</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="/">>></a></li>
</ul>
</div>
</body>
</html>
<body>
</body>
</html>

提示：您可以先修改部分代码再运行

分页代码样式

相关文章

精彩推荐