ror体育

文章索引 聚合服务页

工 具 文 档

您现在的位置:  >> 站长教程 >> 网页设计 >> Dreamweaver >> 正文
站内文章搜索:

在Dreamweaver CS中使用纯CSS代码实现翻页

作者:佚名    文章来源:Adobe Dreamweaver CS3 中文技术交流ror体育    点击数:5972    更新时间:2008/12/25
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  
  3. <head profile="http://www.w3.org/2000/08/w3c-synd/#">  
  4. <meta http-equiv="content-language" content="zh-cn" />  
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312" />  
  6.   
  7. <style>  
  8.   
  9. dl {   
  10.     position:absolute;   
  11.     width:240px;   
  12.     height:170px;   
  13.     border:10px solid #eee;   
  14.     }   
  15. dd {   
  16.     margin:0;   
  17.     width:240px;   
  18.     height:170px;   
  19.     overflow:hidden;   
  20.     }   
  21. img {   
  22.     border:1px solid black   
  23.     }   
  24. dt {   
  25.     position:absolute;   
  26.     right:3px;   
  27.     top:50px;   
  28.     }   
  29. a {   
  30.     display:block;   
  31.     margin:1px;   
  32.     width:20px;   
  33.     height:20px;   
  34.     text-align:center;   
  35.     font:700 12px/20px "宋体",sans-serif;   
  36.     color:#fff;   
  37.     text-decoration:none;   
  38.     background:#666;   
  39.     border:1px solid #fff;   
  40.     filter:alpha(opacity=40);   
  41.     opacity:.4;   
  42.     }   
  43. a:hover {   
  44.     background:#000   
  45.     }   
  46. </style>  
  47. </head>  
  48. <body>  
  49. <dl>  
  50. <dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>  
  51. <dd>  
  52. <img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />  
  53. <img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />  
  54. <img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />  
  55. </dd>  
  56. </dl>  
  57. </body>  
  58. </html>  

同样,举一反三,可以做出其他的翻页的效果。

 

     

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  
    3. <head profile="http://www.w3.org/2000/08/w3c-synd/#">  
    4. <meta http-equiv="content-language" content="zh-cn" />  
    5. <meta http-equiv="content-type" content="text/html;charset=gb2312" />  
    6.   
    7. <style>  
    8.   
    9. dl {   
    10.     position:absolute;   
    11.     width:240px;   
    12.     height:170px;   
    13.     border:10px solid #eee;   
    14.     }   
    15. dd {   
    16.     margin:0;   
    17.     width:240px;   
    18.     height:170px;   
    19.     overflow:hidden;   
    20.     }   
    21. dt {   
    22.     position:absolute;   
    23.     right:1px;   
    24.     }   
    25.   
    26. ul {   
    27.     margin:0;   
    28.     padding:0;   
    29.     width:260px;   
    30.     height:170px;   
    31.     list-style:none;   
    32.     background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;   
    33.     border:1px solid #ccc   
    34.     }   
    35. #b {   
    36.     background-position:75% center   
    37.     }   
    38. #c {   
    39.     background-position:75% 86%   
    40.     }   
    41. li {   
    42.     width:205px;   
    43.     height:27px;   
    44.     font:12px/27px "宋体",sans-serif;   
    45.     white-space:nowrap;   
    46.     overflow:hidden;   
    47.     }   
    48. dt a {   
    49.     display:block;   
    50.     margin:1px;   
    51.     width:30px;   
    52.     height:56px;   
    53.     text-align:center;   
    54.     font:700 12px/55px "宋体",sans-serif;   
    55.     color:#fff;   
    56.     text-decoration:none;   
    57.     background:#666;   
    58.     }   
    59. dt a:hover {   
    60.     background:orange   
    61.     }   
    62. </style>  
    63. <head/>  
    64. <body>  
    65. <dl>  
    66. <dt><a href="#a" title="">ror体育</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt>  
    67. <dd>  
    68.   
    69.   
    70.   
    71. <ul id="a">  
    72.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    73.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    74.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    75.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    76.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    77.     <li>·<a href="" title="">国际ror体育国际ror体育国际ror体育</a></li>  
    78. </ul>  
    79.   
    80. <ul id="b">  
    81.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    82.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    83.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    84.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    85.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    86.     <li>·<a href="" title="">娱乐ror体育娱乐ror体育娱乐ror体育</a></li>  
    87. </ul>  
    88.   
    89. <ul id="c">  
    90.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    91.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    92.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    93.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    94.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    95.     <li>·<a href="" title="">体育ror体育体育ror体育体育ror体育</a></li>  
    96. </ul>  
    97. </dd>  
    98. </dl>  
    99. </body>  
    100. </html>  
    文章录入:文章录入:admin    责任编辑:zm