好学IT学院:IT信息技术分享交流平台
来源:互联网  作者:NC_Editor  发布时间:2008-02-15  ★★★加入收藏〗〖手机版
摘要:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"h……

<!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" lang="gb2312">
 <head>
  <title>代码基地博客站</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta name="Keywords" content="CSS页码链接" />
  <meta name="Description" content="CSS制作的页码链接效果" />
  <meta name="Author" content="jxdawei,jxdawei@gmail.com" />
  <style type="text/css">
   body{
    font-size:62.5%;
   }
   h1{
    font-size:1.4em;
   }
   h2{
    clear:both;
    font-size:1.2em;
   }
   #pageClass{
    clear:both;
    font-size:1.2em;
   }
   #pageClass ul{
    list-style:none;
   }
   #pageClass li{
    float:left;
    width:20px;
    height:20px;
    line-height:20px;
    border:1px solid silver;
    margin:0 3px;
   }
   #pageClass a{
    display:block;
    text-align:center;
   }
   #pageClass a:link,#pageClass a:visited{
    background:white;
    text-decoration: none;
    color:gray;
   }
   #pageClass a:hover,#pageClass a:active{
    text-decoration: none;
    background:gray;
    color:white;
   }

/*第二个效果*/
   #pageClass2{
    clear:both;
    font-size:1.2em;
   }
   #pageClass2 ul{
    list-style:none;
   }
   #pageClass2 li{
    float:left;
    width:20px;
    height:20px;
    border:1px solid silver;
    margin:0 3px;
   }
   #pageClass2 a{
    display:block;
    text-align:center;
   }
   #pageClass2 a:link,#pageClass2 a:visited{
    background:white;
    text-decoration: none;
    color:gray;
   }
   #pageClass2 a:hover,#pageClass2 a:active{
    text-decoration: none;
    background:gray;
    color:white;
    line-height:14px;
   }
  /*第三个效果*/
   #pageClass3{
    clear:both;
    font-size:1.2em;
   }
   #pageClass3 ul{
    list-style:none;
   }
   #pageClass3 li{
    float:left;
    width:20px;
    height:20px;
    border:1px solid silver;
    background:#f60;
    margin:0 3px;
   }
   #pageClass3 a{
    display:block;
    text-align:center;
    line-height:16px;
   }
   #pageClass3 a:link,#pageClass3 a:visited{
    background:white;
    text-decoration: none;
    color:gray;
   }
   #pageClass3 a:hover,#pageClass3 a:active{
    text-decoration: none;
    background:#f93;
    color:white;
    line-height:16px;
    }
  </style>
 </head>

<body>
  <h1>页码效果</h1>
  <h2>这是我原本想要去做的效果</h2>
  <div id="pageClass">
   <ul>
    <li><a href="1http://www.iwcn.net/default.asp?cateID=3">1</a></li>
    <li><a href="2http://www.iwcn.net/default.asp?cateID=4">2</a></li>
    <li><a href="3http://www.iwcn.net/default.asp?cateID=5">3</a></li>
    <li><a href="4http://www.iwcn.net/default.asp?cateID=6">4</a></li>
    <li><a href="5http://www.iwcn.net/default.asp?cateID=8">5</a></li>
    <li><a href="6http://www.iwcn.net/default.asp?cateID=9">6</a></li>
    <li><a href="7http://www.iwcn.net/default.asp">7</a></li>
   </ul>
  </div>
  <h2>做完之后成这样了</h2>
  <div id="pageClass2">
   <ul>
    <li><a href="1http://www.iwcn.net/default.asp?cateID=3">1</a></li>
    <li><a href="2http://www.iwcn.net/default.asp?cateID=4">2</a></li>
    <li><a href="3http://www.iwcn.net/default.asp?cateID=5">3</a></li>
    <li><a href="4http://www.iwcn.net/default.asp?cateID=6">4</a></li>
    <li><a href="5http://www.iwcn.net/default.asp?cateID=8">5</a></li>
    <li><a href="6http://www.iwcn.net/default.asp?cateID=9">6</a></li>
    <li><a href="7http://www.iwcn.net/default.asp">7</a></li>
   </ul>
  </div>
  <h2>改了改成这样了</h2>
  <div id="pageClass3">
   <ul>
    <li><a href="1http://www.iwcn.net/default.asp?cateID=3">1</a></li>
    <li><a href="2http://www.iwcn.net/default.asp?cateID=4">2</a></li>
    <li><a href="3http://www.iwcn.net/default.asp?cateID=5">3</a></li>
    <li><a href="4http://www.iwcn.net/default.asp?cateID=6">4</a></li>
    <li><a href="5http://www.iwcn.net/default.asp?cateID=8">5</a></li>
    <li><a href="6http://www.iwcn.net/default.asp?cateID=9">6</a></li>
    <li><a href="7http://www.iwcn.net/default.asp">7</a></li>
   </ul>
  </div>
 </body>
</HTML>

  • 好学考试H5触屏版开放内测
  • 好学触屏公众号虎力全开、杨帆起航!