用列表(ul)的方式实现向前和向后跳转的链接样式

作者: maxdesign     来源: maxdesign.com.au     时间: 2006-08-17 13:18:40
摘要: 在许多文章显示页面,都会有一个向前和向后的跳转链接,虽然这是一个简单的功能,但是对于用户体验却有一个很大的提高.本文介绍的就是用列表(ul)的方式实现向前和向后跳转的链接样式.
归类: (X)HTML/CSS,

关键词: 列表样式, 跳转, 链接样式,

在许多文章显示页面,都会有一个向前和向后的跳转链接,虽然这是一个简单的功能,但是对于用户体验却有一个很大的提高.本文介绍的就是用列表(ul)的方式实现向前和向后跳转的链接样式.



----------------------------------------------------
点此查看示例文件
----------------------------------------------------



先看看效果:
用列表(ul)的方式实现向前和向后的按钮样式


CSS:
  1.  
  2. <style type="text/css">
  3. <!--
  4. body, td, div, p, span, textarea, select {
  5. font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
  6. }
  7. a {
  8. color: #DCB20C; text-decoration: none; font-size: 12px;
  9. }
  10. a:hover {
  11. color: #CC9933; text-decoration: underline; font-size: 12px;
  12. }
  13. ul#navigation {
  14. list-style-type: none;
  15. margin: 0;
  16. padding: .5em 0;
  17. border-top: 1px solid #666;
  18. }
  19.  
  20. ul#navigation li a {
  21. display: block;
  22. width: 5em;
  23. color: #FFF;
  24. background-color: #036;
  25. padding: .2em 0;
  26. text-align: center;
  27. text-decoration: none;
  28. }
  29.  
  30. ul#navigation li a:hover {
  31. color: #FFF;
  32. background-color: #69C;
  33. }
  34.  
  35. ul#navigation .left { float: left; }
  36. ul#navigation .right { float: right; }
  37.  
  38. -->
  39. </style>
  40.  



HTML:
  1.  
  2. <ul id="navigation">
  3. <li class="left"><a href="#">Back</a></li>
  4. <li class="right"><a href="#">Next</a></li>
  5. </ul>
  6.  




推荐链接:(联系 QQ :326801485)