有路网整体布局

最新推荐文章于 2024-07-18 20:18:47 发布

豆约翰

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量415

点赞数 6

分类专栏：前端相关文章标签： css css3 前端

本文链接：https://blog.csdn.net/douyh/article/details/139803574

版权

前端相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

有路网地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .header{
      height: 28px;
      background-color: gray;
    }
    .middle{
      height: 100px;
      background-color: green;
    }
    .nav{
      height: 40px;
      background-color: red;
    }
    .body{
      width: 1200px;
      height: 1000px;
      border: 1px solid red;
      margin: 0 auto;
      display: flex;
    }
    .body .body-left{
      flex-basis: 200px;
      background-color: blue;
    }
    .body .body-right{
      /* flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0; */
      flex: 1;
      background-color: pink;
    }
    .subnav{
      height: 40px;
      background-color: gray;
    }
    .main{
      display: flex;
      height:960px;
      background-color: aquamarine;
    }
    .main .main-right{
      flex-basis: 240px;
      background-color: darkmagenta;
    }
    .main .main-left{
      flex: 1;
      background-color: yellowgreen;
    }
    .lunbotu{
      height: 300px;
      background-color: blanchedalmond;
    }
    .main-right-up{
      height: 300px;
      background-color: darkolivegreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      您好，欢迎光临有路网
    </div>
    <div class="middle">
  
    </div>
    <div class="nav">
  
    </div>
    <div class="body">
      <div class="body-left">

      </div>
      <div class="body-right">
        <div class="subnav">
          subnav
        </div>
        <div class="main">
          <div class="main-left">
            <div class="lunbotu">
              lunbotu
            </div>
            <div class="book-list">
              book-list
            </div>
          </div>
          <div class="main-right">
            <div class="main-right-up">
              main-right-up
            </div>
            <div class="main-right-down">
              main-right-down
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>