search

博客列表 >定位三列布局与导航，flex弹性盒子布局，容器项目对齐方式，order控制项目顺序-web前端第9章6.22

定位三列布局与导航，flex弹性盒子布局，容器项目对齐方式，order控制项目顺序-web前端第9章6.22

希望
希望原创
2020年06月23日 16:05:04691浏览

1.定位三列布局与导航

  • 如下图导航与三列布局图例：
    定位三列布局与导航

  • 代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>导航和三列布局</title>
    7.   <style>
    8.     /* 初始化 */
    9.     * {
    10.       margin: 0;
    11.       padding: 0;
    12.       box-sizing: border-box;
    13.     }
    15.     a {
    16.       text-decoration: none;
    17.       color: #666;
    18.     }
    19.     nav {
    20.       height: 40px;
    21.       background-color: lightsteelblue;
    22.       padding: 0 50px;
    23.       /* 转为弹性盒布局 */
    24.       display: flex;
    25.     }
    26.     nav a {
    27.       height: inherit;
    28.       line-height: 40px;
    29.       padding: 0 15px;
    30.     }
    31.     nav a:hover {
    32.       background-color: seagreen;
    33.       color: white;
    34.     }
    35.     /* 登录注册要靠右 */
    36.     nav a:last-of-type {
    37.       margin-left: auto;
    38.     }
    39.     /* 页眉与页脚 */
    40.     .header,
    41.     .footer {
    42.       height: 40px;
    43.       background-color: lightsteelblue;
    44.     }
    45.     .content {
    46.       width: 960px;
    47.       margin: auto;
    48.       /* background-color: #ccc; */
    49.     }
    50.     .content ul li {
    51.       float: left;
    52.       line-height: 40px;
    53.       padding: 0 15px;
    54.     }
    55.     .content ul li:hover {
    56.       background-color: limegreen;
    57.     }
    58.     /* 页脚 */
    59.     .content p {
    60.       text-align: center;
    61.       line-height: 40px;
    62.     }
    64.     /* 主体用定位来做 */
    65.     .container {
    66.       width: 1600px;
    67.       margin: 10px auto;
    68.       /* background-color: seashell; */
    69.       min-height: 800px;
    70.       /* 防止浮动元素塌陷 */
    71.       overflow: hidden;
    72.     }
    73.     .container > .left {
    74.       width: 300px;
    75.       background-color: navajowhite;
    76.       min-height: 950px;
    77.       float: left;
    78.     }
    79.     .container > .right {
    80.       width: 300px;
    81.       background-color: navajowhite;
    82.       min-height: 950px;
    83.       float: right;
    84.     }
    85.     .container > .main {
    86.       background-color: plum;
    87.       min-height: 950px;
    88.       width: 980px;
    89.       float: left;
    90.       margin-left: 10px;
    91.     }
    92.   </style>
    93. </head>
    94. <body>
    95.   <header>
    96.     <nav>
    97.       <div class="content">
    98.         <a href="">首页</a>
    99.         <a href="">公司产品</a>
    100.         <a href="">行业新闻</a>
    101.         <a href="">联系我们</a>
    102.       </div>
    103.       <a href="">注册/登录</a>
    104.     </nav>
    105.   </header>
    106.   <!-- 主体 -->
    107.   <div class="container">
    108.     <div class="left">左</div>
    109.     <div class="main">中</div>
    110.     <div class="right">右</div>
    111.   </div>
    112.   <!-- 页脚 -->
    113.   <div class="footer">
    114.     <div class="content">
    115.       <p>脚部</p>
    116.     </div>
    117.   </div>
    118. </body>
    119. </html>

    2.内容多行或多列，分3列并在中间加分割竖线

    1. <style>
    2.     div {
    3.       border: 1px solid #000;
    4.       padding: 1rem;
    5.       width: 60rem;
    6.       margin: 30px auto;
    7.     }
    8.     div {
    9.       /* 分列显示 */
    10.       column-count: 3;
    11.       /* 加分割条 */
    12.       column-rule: 1px solid red;
    13.     }
    14. </style>

    3.flex弹性盒子布局

  • FlexBox弹性盒子多行布局
  • 单行容器的项目对齐方式
  • 多行容器的项目对齐方式
  • 主轴为垂直方向时的项目对齐方式
  • 交叉轴时的项目对齐方式
  • 主轴方向与项目排列简写
  • 如下图：
    flex弹性盒子布局

  • 例举其中一个flex弹性盒子多行布局代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>FlexBox弹性盒子多行布局</title>
    7.   <style>
    8.     .container {
    9.       width: 300px;
    10.       /* 弹性容器，用火狐 */
    11.       display: flex;
    12.     }
    14.     .container > .item {
    15.       width: 60px;
    16.       width: 50px;
    17.       width: 150px;
    18.     }
    19.     /* 宽度过多时，换行显示 */
    20.     .container {
    21.       flex-wrap: wrap;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26.   <div class="container">
    27.     <div class="item">1</div>
    28.     <div class="item">2</div>
    29.     <div class="item">3</div>
    30.     <div class="item">4</div>
    31.     <div class="item">5</div>
    32.     <!-- <div class="item">6</div> -->
    33.     <!-- <div class="item">7</div> -->
    34.     <!-- <div class="item">8</div> -->
    35.   </div>
    36. </body>
    37. </html>

    4.order控制项目顺序

  • 注意代码使用：
    1.   <style>
    2.     .container > .item:first-of-type {
    3.       order: 3;
    4.     }
    5.     .container > .item:last-of-type {
    6.       order: 5;
    7.     }
    8.   </style>

    5.order调整元素顺序,例如小相册

  • 进行上下顺序调整，如图：
    order调整元素顺序

  • 代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>order调整元素顺序，小相册</title>
    7.   <style>
    8.     .container {
    9.       width: 300px;
    11.       display: flex;
    12.       flex-direction: column;
    13.     }
    14.     .container > .item {
    15.       border: 1px solid #000;
    16.       padding: 10px;
    17.       display: flex;
    18.       /* 加以下定位才能上下移动 */
    19.       position: relative;
    20.     }
    21.     .container > .item > div {
    22.       display: flex;
    23.     }
    24.   </style>
    25. </head>
    26. <body>
    27.   <div class="container">
    28.     <div class="item">
    29.       images-1.jpg
    30.       <div>
    31.         <button onclick="up(this)">Up</button
    32.         ><button onclick="down(this)">Down</button>
    33.       </div>
    34.     </div>
    35.     <div class="item">
    36.       images-2.jpg
    37.       <div>
    38.         <button onclick="up(this)">Up</button
    39.         ><button onclick="down(this)">Down</button>
    40.       </div>
    41.     </div>
    42.     <div class="item">
    43.       images-3.jpg
    44.       <div>
    45.         <button onclick="up(this)">Up</button
    46.         ><button onclick="down(this)">Down</button>
    47.       </div>
    48.     </div>
    49.   </div>
    50.   <!-- 运用到以下js -->
    51.   <script>
    52.     let up = (ele) => (ele.offsetParent.style.order -= 1);
    53.     let down = (ele) => (ele.offsetParent.style.order += 1);
    54.   </script>
    55. </body>
    56. </html>
上一条：Flex Box（弹性布局）相关知识下一条：flex属性实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多