首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

用列表(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)