7.垂直导航.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. list-style: none;
  10. text-decoration: none;
  11. }
  12. ul li {
  13. width: 100px;
  14. height: 100px;
  15. border: 1px solid #f00;
  16. text-align: center;
  17. line-height: 100px;
  18. /* border-radius: 8px; */
  19. /* 下边框:border-bottom */
  20. /* 上边框:border-top */
  21. /* 左边框:border-left */
  22. /* 右边框:border-right */
  23. border-bottom: none;
  24. border-top: none;
  25. /* display:inline-block; */
  26. }
  27. ul li:last-child {
  28. border: 1px solid #f00;
  29. border-top: none;
  30. }
  31. ul li:first-child {
  32. border: 1px solid #f00;
  33. border-bottom: none;
  34. }
  35. ul li a {
  36. color: #000;
  37. }
  38. ul li:hover {
  39. background: #f00;
  40. }
  41. ul li:hover a {
  42. color: #ff0;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div>
  48. <ul>
  49. <li><a href="https://www.baidu.com">画画</a></li>
  50. <li><a href="">书发</a></li>
  51. <li><a href="">跳舞</a></li>
  52. <li><a href="">唱歌</a></li>
  53. <li><a href="">篮球</a></li>
  54. <li><a href="">跑步</a></li>
  55. </ul>
  56. </div>
  57. </body>
  58. </html>