王者荣耀静态页面头部代码设计（1）_王者荣耀官网首页采用了什么盒子模型、定位、漂浮等代码语句?-CSDN博客

本文链接：https://blog.csdn.net/qq_55928824/article/details/128460025

1.首先先定义好盒子的高度和位置，以及中间内容使用flex布局去占据两端

  .top {
      border: 1px solid #f5f5f5;
    }
    .top .area {
      height: 41px;
      /* 采用flex布局，将顶部的左右两部分分开 */
      display: flex;
      /*如果不加上这个属性，就会使左右两部分紧挨，写了space-between就可以两边对齐  */
      justify-content: space-between;
      /* 这里盒子的宽度并不随内容的高度多大就多大，默认align-items:normal;默认原本的盒子高度*/
    }
    .top .area .left {
      background-color: bisque;
    }
    .top .area .right {
      background-color: blue;
    }
  </style>
  <body>
    <div class="top">
      <div class="top_wrapper area">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
    </div>
  </body>

2.进一步优化，采用精灵图和图片进行布局

<body>
    <div class="top">
      <div class="top_wrapper area">
        <div class="left">
          <div class="logo">
            <a href="#">腾讯游戏</a>
          </div>
          <div class="recommed">
            <img src="./img/left_top1.jpg" alt="" />
          </div>
        </div>
        <div class="right">
          <ul>
            <li>
              <a href="#" class="growth">成长守护平台</a>
            </li>
            <li>
              <a href="#" class="game">腾讯游戏排行榜</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>

 <style>
    .top {
      border: 1px solid #f5f5f5;
    }
    .top .area {
      height: 41px;
      /* 采用flex布局，将顶部的左右两部分分开 */
      display: flex;
      /*如果不加上这个属性，就会使左右两部分紧挨，写了space-between就可以两边对齐  */
      justify-content: space-between;
      /* 这里盒子的宽度并不随内容的高度多大就多大，默认align-items:normal;默认原本的盒子高度*/
    }
    .top .area .left {
      /* 这里采用flex布局，使left里面的两个部分都能一行显示 */
      display: flex;
      /* 垂直居中 */
      line-height: 41px;
      /* background-color: bisque; */
    }
    /* 使ul里的li同一行显示 */
    .top .area .right ul {
      display: flex;
      /* background-color: blue; */
    }
    .top .area .right a {
      position: relative;
      display: block;
      margin-left: 20px;
      color: #464646;
      font-size: 14px;
      font-weight: 400;
    }
    .top .area .right .growth::before {
      content: "";
      position: absolute;
      background: url(./img/title_sprite.png);
      background-position: -30px 0;
      width: 30px;
      height: 30px;
      /* 左边图标 */
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;

      /* width: 30px;
      height: 30px;
      top: 5px;
      left: 5px; */
    }
    .top .area .right .growth {
      padding-left: 30px;
    }
    /* 伪元素 */
    .top .area .right .game::after {
      content: "";
      position: absolute;
      background: url(./img/title_sprite.png);
      background-position: 0 0;
      width: 30px;
      height: 30px;
      /* 右边图标 */
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      /* 透明度 */
      opacity: 0.2;
      /* 旋转90度 */
      transform: rotate(90deg);
    }
    .top .area .right .game {
      padding-right: 30px;
    }
    .top .area .left .logo a {
      display: block;
      width: 150px;
      text-indent: -9999px;
      background: url(./img/logo.png) no-repeat center center;
    }
  </style>