flexbox改写的一个响应式网页布局实例

最新推荐文章于 2022-11-19 14:37:14 发布

head_Me

最新推荐文章于 2022-11-19 14:37:14 发布

阅读量328

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxinghong199106/article/details/100894020

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>弹性盒子</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      body {
        margin: 0;
        background: #f1f1f1;
      }
      * {
        box-sizing: border-box;
      }
      .container {
        text-align: center;
        display: flex;
        flex-direction: column;
        margin: 15px;
      }
      .header {
        background: #ffffff;
      }
      .header h1 {
        font-size: 50px;
      }
      .header ul {
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        background: #333;
        margin: 0;
        padding: 0;
      }
      .header ul li {
        flex: 1;
        display: flex;
      }
      .header ul li a {
        flex: 1;
        text-decoration: none;
        color: white;
        padding: 15px;
      }
      .header ul li a:hover {
        background: #ddd;
        color: black;
      }
      .body {
        display: flex;
        align-items: flex-start;
        text-align: center;
        margin-top: 20px;
        text-align: left;
      }
      .content {
        flex: 3.5;
      }
      .article {
        background: #ffffff;
        padding: 20px;
        margin-bottom: 20px;
      }
      .fakeImg {
        height: 200px;
        background: #aaa;
        padding: 20px;
      }
      .sider {
        flex: 1;
        margin-left: 20px;
      }
      .sider > * {
        background: #ffffff;
        margin-bottom: 15px;
        padding: 20px;
      }
      .fakeImg2 {
        height: 100px;
        background: #aaa;
        padding: 20px;
      }
      .footer {
        background: #ddd;
        padding: 20px;
      }
      @media all and (max-width: 800px) {
        .body {
          flex-direction: column;
        }
        .sider {
          width: 100%;
          margin-left: 0;
        }
      }
    </style>
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <div class="container">
      <div class="header">
        <div>
          <h1>我的网页</h1>
          <p>重置浏览器大小看效果</p>
        </div>
        <ul>
          <div style="display: flex">
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
          </div>
          <div>
            <li><a href="#">链接</a></li>
          </div>
        </ul>
      </div>

      <div class="body">
        <div class="content">
          <div class="article">
            <h2>文章标题</h2>
            <h5>2019 年 4 月 17日</h5>
            <div class="fakeImg">图片</div>
            <p>一些文本. . .</p>
            <p>
              菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 -
              学的不仅是技术，更是梦想！菜鸟教程 -
              学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！
            </p>
          </div>
          <div class="article">
            <h2>文章标题</h2>
            <h5>2019 年 4 月 17日</h5>
            <div class="fakeImg">图片</div>
            <p>一些文本. . .</p>
            <p>
              菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 -
              学的不仅是技术，更是梦想！菜鸟教程 -
              学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！
            </p>
          </div>
        </div>

        <div class="sider">
          <div>
            <h3 style="margin-top: 0">关于我</h3>
            <div class="fakeImg2">图片</div>
            <p>关于我的一些信息..</p>
          </div>
          <div>
            <h3>热门文章</h3>
            <div class="fakeImg2">图片</div>
            <div class="fakeImg2">图片</div>
            <div class="fakeImg2">图片</div>
          </div>
          <div>
            <h3>关注我</h3>
            <p>一些文本..</p>
          </div>
        </div>
      </div>

      <div class="footer"><h2>底部区域</h2></div>
    </div>

    <script src="" async defer></script>
  </body>
</html>

整体效果如下，而且当屏幕宽度小于800px时右侧边栏变成垂直上下显示。