1.flex导航 2.grid简单演示

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

代码演示

  1. <div class="box">
  2.       <nav class="nav1">
  3.         <a href="">首页</a>
  4.         <a href="">找游戏</a>
  5.         <a href="">下资源</a>
  6.         <a href="">目录</a>
  7.         <a href="">排行榜</a>
  8.         <a href="">站内动态</a>
  9.         <a href="">小组</a>
  10.         <a href="">下载app</a>
  11.       </nav>
  12.       <div class="nav2">
  13.         <a href="">登录</a>
  14.         <a href="">注册</a>
  15.       </div>
  16.     </div>
  18.     <div class="grid">
  19.       <div class="item">111</div>
  20.     </div>
  21.     <style>
  22.       body {
  23.         margin: 0;
  24.         padding: 0;
  25.         box-sizing: border-box;
  26.       }
  27.       .box {
  28.         display: flex;
  29.         height: 50px;
  30.         padding: 0 400px;
  31.         background-color: lightcyan;
  32.         box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
  33.         flex-flow: row nowrap;
  34.         place-content: space-between;
  35.         /* place-items: center; */
  36.       }
  37.       .nav1 {
  38.         display: flex;
  39.         text-align: center;
  40.       }
  41.       .nav2 {
  42.         display: flex;
  43.         text-align: center;
  44.       }
  46.       .nav1 a {
  47.         color: rgb(150, 150, 150);
  48.         text-decoration: none;
  49.         min-width: 5em;
  50.         line-height: 50px;
  51.       }
  53.       .nav2 a {
  54.         color: rgb(150, 150, 150);
  55.         text-decoration: none;
  56.         min-width: 3.5em;
  57.         line-height: 50px;
  58.       }
  60.       a:hover {
  61.         color: black;
  62.         transition: 0.1s;
  63.       }
  65.       .grid {
  66.         margin-top: 2em;
  67.         width: 20em;
  68.         height: 10em;
  69.         background-color: #ccc;
  70.         display: grid;
  71.         grid: repeat(4, 1fr) / repeat(4, 1fr);
  72.       }
  73.       .item {
  74.         background-color: lightgreen;
  75.         grid-area: 2/2/5/5;
  76.       }
  77.     </style>

【文章原创作者阜宁网站设计公司 http://www.1234xp.com/funing.html 欢迎留下您的宝贵建议】
更多阅读