纯CSS+DIV实现的竖向菜单(简单例子,提供学CSS的朋友学习)

 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>纯CSS+DIV实现的竖向菜单title>
  5. <style>
  6. .menu{
  7. width:200px;
  8. }
  9. .menu a,.menu a:visited{
  10. text-decoration:none;/*文字无下滑线*/
  11. text-align:center;/*文字水平居中对齐*/
  12. color:#c00;/*红色文字*/
  13. display:block;/*设置为块状元素*/
  14. padding:4px;/*内边距*/
  15. background:#FFF;/*背景色*/
  16. border: 1px solid #fff;/*与背景色相同边框,防止跳动*/
  17. width:130px;
  18. position:relative;/*使用相对定位*/
  19. }
  20. .menu a:hover{
  21. border:solid 1px #c00;/*边框颜色红色*/
  22. }
  23. .menu a span{
  24. display:block;/*设置为块状元素*/
  25. position:absolute;/*使用绝对定位*/
  26. width:0px;/*宽度为0*/
  27. height:0px;/*高度为0*/
  28. border:solid 8px #fff;/*设置默认边框样式*/
  29. top:4px;/*竖直方向的定位*/
  30. overflow:hidden;
  31. }
  32. .menu a span.left{
  33. border-left-color:#c00;
  34. left:8px;
  35. }
  36. .menu a span.right{
  37. border-right-color:#c00;
  38. right:8px;
  39. }
  40. style>
  41. head>
  42. <body>
  43. <div class="menu">
  44.     <a href="#">
  45.       <span class="left">span>
  46.       首页
  47.       <span class="right">span>
  48.     a>
  49.         <a href="#">
  50.           <span class="left">span>
  51.           新闻
  52.           <span class="right">span>          a>
  53.         <a href="#">
  54.           <span class="left">span>
  55.           产品  
  56.           <span class="right">span> 
  57.           a>
  58. div>
  59. body>
  60. html>

你可能感兴趣的:(CSS技术与兼容)