4.垂直导航.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. div {
  9. width: 400px;
  10. height: 700px;
  11. border: 1px solid #f00;
  12. }
  13. /* 清除无序列表默认样式 */
  14. ul {
  15. list-style: none;
  16. width: 200px;
  17. height: 420px;
  18. /* background: #00f; */
  19. }
  20. ul li {
  21. width: 100%;
  22. height: 60px;
  23. border: 1px solid #f00;
  24. text-align: center;
  25. line-height: 60px;
  26. }
  27. /* 清除a标签默认样式 */
  28. ul li a {
  29. text-decoration: none;
  30. color: #000;
  31. }
  32. /* 划过效果 */
  33. ul li:hover {
  34. background: orange;
  35. }
  36. ul li:hover a{
  37. color: yellow;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div>
  43. <ul>
  44. <li><a href="">星期一</a></li>
  45. <li><a href="">星期二</a></li>
  46. <li><a href="">星期三</a></li>
  47. <li><a href="">星期四</a></li>
  48. <li><a href="">休息</a></li>
  49. <li><a href="">休息</a></li>
  50. <li><a href="">休息</a></li>
  51. </ul>
  52. </div>
  53. </body>
  54. </html>