flex语法简单的导航栏

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
这是用flex编写的简单导航栏

直接上代码吧

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid演示</title>
  8. </head>
  9. <body>
  10.     <div class="content">
  11.         <header>
  12.             <nav>
  13.                 <a href="">首页</a>
  14.                 <a href="">视频</a>
  15.                 <a href="">社区</a>
  16.                 <a href="">文章</a>
  17.                 <a href="">咨询</a>
  18.                 <a href="">简介</a>
  19.                 <a href="">源码</a>
  20.                 <a href="">作业</a>
  21.                 <a href="">下载</a>
  22.             </nav>
  24.             <button>登陆</button>
  25.         </header>
  27.     </div>
  28.     <footer class="footer">页脚</footer>
  29.     <style>
  30.         .box {
  31.     width: 100%;
  32.     height: 2000px;
  34. }
  36. header {
  37.     height: 80px;
  38.     background-color: rgb(248, 244, 244);
  39.     padding: 0 5em;
  40.     display: flex;
  41.     place-content: space-between;
  42.     position: sticky;
  43.     top: 0;
  44.     color: #0c0202;
  46. }
  48. nav {
  49.     display: flex;
  50.     /* 水平垂直居中 */
  51.     text-align: center;
  52.     line-height: 80px;
  53. }
  55. nav a {
  56.     min-width: 5em;
  57.     color: #0c0505;
  58.     text-decoration: none;
  59.     flex: 1;
  60. }
  62. nav a:hover {
  63.     color: white;
  64.     background-color: aqua;
  65.     transition: 0.3s;
  66. }
  68. header button {
  69.     border: none;
  70.     width: 5em;
  71.     background-color: rgb(3, 5, 4);
  72.     color: azure;
  74. }
  76. header button:hover {
  77.     cursor: pointer;
  78.     background-color: rgb(22, 228, 228);
  80. }
  82. footer {
  83.     width: 100%;
  84.     height: 50px;
  85.     color: #ccc;
  86.     background-color: black;
  87.     text-align: center;
  88.     line-height: 50px;
  90. }
  92. .box .title {
  93.     height: 50px;
  94.     font-weight: bolder;
  95.     border: 1px solid #f5f1f1;
  96.     background-color: rgb(10, 10, 10);
  97. }
  98. .box .content {
  99.     min-width: 100%;
  100.     min-height: 0px;
  101.     background-color: #eee;
  102. }
  104. .box .title {
  105.     /* 滚动到top=0就会自动停止并固定在当前位置 */
  106.     position: sticky;
  107.     top: 0;
  108.     color: #9b9292;
  109.     line-height: 50px;
  110.     padding: 0 20em;
  111. }
  113. .box1 {
  114.     width: 100px;
  115.     height: 500px;
  116.     display: flex;
  117.     border: 1px solid #e0e4de6b;
  118.     place-content: space-evenly;
  119.     flex-flow: column nowrap;
  120.     position: fixed;
  121.     top: 5cm;
  122.     bottom: 0;
  123.     /* line-height: 50px; */
  124.     border-radius: 20px 20px 20px 20px;
  128. }
  130. .box1 a {
  131.     width: 100%;
  132.     height: 25px;
  133.     letter-spacing: 2px;
  134.     text-align: center;
  135.     text-decoration: none;
  136.     color: #9b9292;
  137.     /* flex: 1 1 auto; */
  139. }
  141. .box1 a:hover  {
  142.     color: white;
  143.     background-color: rgb(70, 184, 159);
  144.     transition: 0.1s;
  145. }
  146.         </style>
  147. </body>
  148. </html>
  • 下面是效果图，如有错误请各位老师和大佬多多指教！

【文章原创作者盐城网站设计公司 http://www.1234xp.com/yancheng.html 提供，感恩】
更多阅读