主页 › 网页制作 › 【CSS3】上左右下框架自适应支持手机

admin 发表于 2020-9-28 22:12:46

【CSS3】上左右下框架自适应支持手机

DIV：
<div class="header">$top[      DISCUZ_CODE_2      ]lt;/div>
<div class="flex">
      <div class="sider">$sider[      DISCUZ_CODE_2      ]lt;/div>
      <div class="frame">$body[      DISCUZ_CODE_2      ]lt;/div>
</div>
<div class="footer">$bottom[      DISCUZ_CODE_2      ]lt;/div>

CSS:
$fst: #cc0000 !default;
$sec: #ffff00 !default;
$thd: #82e0e8 !default;
$fth: #031618 !default;
$gray-600: #6c757d !default;
$gray-800: #343a40 !default;

body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
}

.header {
      background: $fth;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      justify-content: space-between;
      * {
                color: #fff;
      }

      .user {
                background: $fst;
                color: #fff;
                padding: 0 10px;
                border-radius: 10px;
                margin-right: 10px;
                border: 2px solid #800;
      }
}

.footer {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 30px;
      justify-content: center;
      align-items: center;
      background: $gray-600;
      padding-top: 5px;
      padding-bottom: 5px;

      * {
                color: #ccc;
                font-size: 12px;
      }

      label {
                margin: 0;
      }
}

.flex {
      display: flex;
      flex-direction: row;
      flex: 1;
      position: relative;
}

.sider {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 10;
      background: rgba($color:$gray-600,$alpha:.9);
      border-left: 10px solid rgba($color:$gray-600,$alpha:.9);

      &:hover {
                border-left: 0;
                width: 220px;

                ul {
                        display: block;
                }
      }

      ul {
                display: none;

                li {
                        background: rgba($color:$gray-800,$alpha:.9);

                        a {
                              display: flex;
                              padding: 8px 8px 8px 30px;
                              color: #ccc;

                              &:hover {
                                        color: #fff;
                              }
                        }

                        ul {

                              li {
                                        background: rgba($color:$gray-600,$alpha:.9);

                                        a {
                                                padding: 5px 8px 5px 30px;
                                                font-size: 12px;
                                        }
                              }
                        }
                }
      }
}

.frame {
      display: flex;
      flex: 1;
      padding: 20px;

      iframe {
                width: 100%;
      }
}

@media(min-width:576px) {
      .sider {
                position: relative;
                border-left: 0;
                flex: 0 1 220px;

                ul {
                        display: block;
                }
      }

      .footer {
                flex-direction: row;
                justify-content: flex-end;
      }
}


Hondy.Site.User.Login.css页面参考

查看完整版本: 【CSS3】上左右下框架自适应支持手机