flex布局实现仿PHP中文网布局

利用flex实现网站PC端布局实战：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿凡科网首页</title>
    <style>
      /* 初始化样式 */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      a,
      p {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.2em;
        margin: 0 1em;
      }
      body {
        display: flex;
        flex-flow: column nowrap;
        background-color: #f3f5f7;
      }
      /* 页眉 */
      header {
        background-color: rgb(0, 0, 0);
        padding: 1.5em;
        justify-content: center;
        align-items: center;
      }
      header {
        height: 2em;
        /* 将header转为flex弹性盒子后，后续的弹性项目才可以操作 */
        display: flex;
        text-align: center;
      }
      /* 设置logo距离顶部菜单栏右侧一定距离 */
      header > a:first-of-type {
        background: url(https://www.php.cn/static/images/logo.png) no-repeat;
        width: 9em;
        height: 4em;
      }
      /* 设置登录和注册在最右侧 */
      header > a:nth-of-type(7) {
        margin-left: auto;
      }
      /* 设置鼠标放置在a标签上的样式，并排除logo变色 */
      header > a:hover:not(:first-of-type) {
        color: red;
      }
      /* 主体区 */
      .container {
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 83.7vh;
        margin-top: 2em;
      }
      .container > aside,
      .container > main {
        border: 1px solid #000;
      }
      .container > aside {
        flex: 0 0 15vw;
      }
      .container > main {
        flex: 0 0 70vw;
      }
      .container main a {
        color: rgb(51, 51, 51);
      }
      .header-a {
        background-color: #ffffff;
        padding: 0.5em 0;
      }
      .header-a {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -1em;
      }
      .search {
        margin-left: auto;
        margin-right: 3em;
      }
      .container main img:first-of-type {
        width: 100%;
        display: flex;
      }
      .container > .search {
        display: flex;
      }
      .container .search input {
        outline: none;
        border-radius: 0.5em;
        width: 13em;
        height: 2em;
      }
      .container main div:last-of-type {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 1.8em;
      }
      .container main div:last-of-type img {
        border-radius: 0.5em;
        width: 100%;
      }
      /* 页脚 */
      footer {
        background-color: rgb(0, 0, 0);
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <header>
      <a href=""></a>
      <a href="">首页</a>
      <a href="">视频教程</a>
      <a href="">入门教程</a>
      <a href="">社区问答</a>
      <a href="">技术文章</a>
      <a href="">登录</a>
      <a href="">注册</a>
    </header>
    <div class="container">
      <aside></aside>
      <main>
        <div class="header-a">
          <a href="">PHP头条</a>
          <a href="">独孤九剑</a>
          <a href="">学习路线</a>
          <a href="">在线工具</a>
          <a href="">趣味课堂</a>
          <div class="search">
            <input type="text" placeholder="想查找什么？" id="search" />
            <button>搜索</button>
          </div>
        </div>
        <div>
          <a href=""
            ><img
              src="https://www.php.cn/static/images/index_banner1.png"
              alt=""
          /></a>
        </div>
        <div>
          <a href=""
            ><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""
          /></a>
          <a href=""
            ><img
              src="https://www.php.cn/static/images/index_php_item2_.png?1"
              alt=""
          /></a>
          <a href=""
            ><img
              src="https://www.php.cn/static/images/index_php_item3.jpg?1"
              alt=""
          /></a>
          <a href=""
            ><img
              src="https://www.php.cn/static/images/index_php_new4.jpg?1"
              alt=""
          /></a>
        </div>
      </main>
      <aside>侧边栏2</aside>
    </div>
    <footer>
      <p>
        php中文网&copy;版权所有(2015-2022) | 备案号:
        <a href="">皖ICP-150********</a>
      </p>
      <p>中国.合肥政务新区置地广场 | 电话: 0551-888999**</p>
    </footer>
  </body>
</html>
效果：
相关文章
