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

代码演示

<div class="box">
      <nav class="nav1">
        <a href="">首页</a>
        <a href="">找游戏</a>
        <a href="">下资源</a>
        <a href="">目录</a>
        <a href="">排行榜</a>
        <a href="">站内动态</a>
        <a href="">小组</a>
        <a href="">下载app</a>
      </nav>
      <div class="nav2">
        <a href="">登录</a>
        <a href="">注册</a>
      </div>
    </div>
    <div class="grid">
      <div class="item">111</div>
    </div>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        display: flex;
        height: 50px;
        padding: 0 400px;
        background-color: lightcyan;
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
        flex-flow: row nowrap;
        place-content: space-between;
        /* place-items: center; */
      }
      .nav1 {
        display: flex;
        text-align: center;
      }
      .nav2 {
        display: flex;
        text-align: center;
      }
      .nav1 a {
        color: rgb(150, 150, 150);
        text-decoration: none;
        min-width: 5em;
        line-height: 50px;
      }
      .nav2 a {
        color: rgb(150, 150, 150);
        text-decoration: none;
        min-width: 3.5em;
        line-height: 50px;
      }
      a:hover {
        color: black;
        transition: 0.1s;
      }
      .grid {
        margin-top: 2em;
        width: 20em;
        height: 10em;
        background-color: #ccc;
        display: grid;
        grid: repeat(4, 1fr) / repeat(4, 1fr);
      }
      .item {
        background-color: lightgreen;
        grid-area: 2/2/5/5;
      }
    </style>