简约好看导航栏(HTML、CSS)

迷南。 2023-10-03 12:39 69阅读 0赞

简约好看导航栏(HTML、CSS)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>padding案例</title>
  8.     <style>
  9.         .nav {
  11.             height: 41px;
  12.             border-top: 3px solid #ff8500;
  13.             border-bottom: 1px solid #edeef0;
  14.             background-color: #fff;
  15.             line-height: 41px;
  16.         }
  18.         .nav a {
  20.             /*   此时的a为行内元素 修改高无效 需要将a转换为行内块元素 它既可以有宽度 又可以有高度*/
  21.             display: inline-block;
  22.             height: 41px;
  23.             padding: 0 20px;
  24.             /* 上下为0  左右为20px */
  25.             font-size: 12px;
  26.             color: #4c4ac4;
  27.             text-decoration: none;
  28.         }
  30.         .nav a:hover {
  32.             background-color: #eee;
  33.             color: #ff8500;
  34.         }
  35.     </style>
  37. </head>
  39. <body>
  40.     <div class="nav">
  41.         <a href="#">新浪导航</a>
  42.         <a href="#">手机新浪网</a>
  43.         <a href="#">移动客户端</a>
  44.         <a href="#">微博</a>
  45.     </div>
  46. </body>
  48. </html>

发表评论

表情：
评论列表 （有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS简约垂直导航工具条

    [下载地址][Link 1]简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 ![163156

    水深无声水深无声/ 0 赞/ 258 阅读

    相关 导航栏

    想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

    深藏阁楼爱情的钟深藏阁楼爱情的钟/ 0 赞/ 446 阅读