2.1 布局
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
scss
css
@mixin transition($v) { transition: $v; } @mixin transform($v) { transform: $v; } /*2.1 布局 name: hui-layout-content */ .hui-container-wrapper { background-color:#fff; position: relative; z-index: 100; zoom: 1; top: 0px; @include transition(transform .2s ease-out); .hui-container-bg{ display: none} } .hui-side-box {display:none} .hui-layout-content, .hui-layout-content-fluid { padding-right: 15px; padding-left: 15px; margin-left: auto; margin-right: auto; } @media ( min-width: 992px) { .hui-layout-content {width: 960px} } @media ( min-width: 1200px) { .hui-layout-content {width: 1170px} } @media ( min-width: 1300px) { .hui-layout-content {width: 1270px} } @media print { .hui-layout-content {width: auto} } @media (max-width: 767px) { html, body { overflow: hidden; height: 100%; } body, .hui-article-content {font-size:16px; line-height: 1.6} .hui-ad-img img { width: 100%; height: auto} .hui-container-wrapper { position:fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; width: auto; .hui-container-bg { position: fixed; width: 100%; top: 0; left: 0; display: block; z-index:2000; } .hui-container-wap{ height: 100%; width: 100%; min-width: 320px; overflow: auto; } } /*隐藏的菜单*/ .hui-side-box { position:absolute; display:block; z-index:99; right:0; top:0; bottom:0; width:250px; background-color:#303135; .hui-nav { display:block; li { border-bottom:1px solid #222; display:block; a { color: #fff; display: block; padding-left: 20px; padding: 10px 30px; &:hover {text-decoration: none;} } } } } body.hui-side-box-open { .hui-container-wrapper{ @include transform(translate3d(-250px,0,0)); backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; .hui-container-bg { bottom:0; right:0; } } } }
/*2.1 布局 name: hui-layout */ .hui-container-wrapper { background-color: #fff; position: relative; z-index: 100; zoom: 1; top: 0px; transition: transform 0.2s ease-out; } .hui-container-wrapper .hui-container-bg { display: none; } .hui-side-box { display: none; } .hui-layout-content, .hui-layout-content-fluid { padding-right: 15px; padding-left: 15px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .hui-layout-content { width: 960px; } } @media (min-width: 1200px) { .hui-layout-content { width: 1170px; } } @media (min-width: 1300px) { .hui-layout-content { width: 1270px; } } @media print { .hui-layout-content { width: auto; } } @media (max-width: 767px) { html, body { overflow: hidden; height: 100%; } body, .hui-article-content { font-size: 16px; line-height: 1.6; } .hui-ad-img img { width: 100%; height: auto; } .hui-container-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; width: auto; } .hui-container-wrapper .hui-container-bg { position: fixed; width: 100%; top: 0; left: 0; display: block; z-index: 2000; } .hui-container-wrapper .hui-container-wap { height: 100%; width: 100%; min-width: 320px; overflow: auto; } /*隐藏的菜单*/ .hui-side-box { position: absolute; display: block; z-index: 99; right: 0; top: 0; bottom: 0; width: 250px; background-color: #303135; } .hui-side-box .hui-nav { display: block; } .hui-side-box .hui-nav li { border-bottom: 1px solid #222; display: block; } .hui-side-box .hui-nav li a { color: #fff; display: block; padding-left: 20px; padding: 10px 30px; } .hui-side-box .hui-nav li a:hover { text-decoration: none; } body.hui-side-box-open .hui-container-wrapper { transform: translate3d(-250px, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } body.hui-side-box-open .hui-container-wrapper .hui-container-bg { bottom: 0; right: 0; } }