返回介绍
文江博客 开发文档 EST 中文文档 文章详情

layout

发布于 2023-10-15 18:11:42 字数 14439 浏览 0 评论 0 收藏 0

提供常见的基础布局。

依赖于：
  • variables
  • compatibility
  • util

  • .est-layout-fixed-header()

    定高、相对视口固定页头布局。

    • .est-layout-fixed-header(@height, @header-selector, @body-selector)

      @height
      页头高度。
      @header-selector
      页头要应用的选择器。可选，默认值为 .est-header。
      @body-selector
      页面主体要应用的选择器。可选，默认值为 .est-body。
      <body>
<div class="header"></div>
<div class="est-body"></div>
</body>
      body {
.est-layout-fixed-header(80px, ~".header");
}
      body > .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
height: 80px;
}

body > .est-body {
margin-top: 80px;
*zoom: 1;
}

body > .est-body:before,
body > .est-body:after {
display: table;
content: "";
}

body > .est-body:after {
clear: both;
}

      如果不自定义选择器，则需要与 est-header、est-body 两个类名配合使用。页头的默认 z-index 为 @header-z-index。

  • .est-layout-fixed-footer()

    定高、相对视口固定页脚布局。

    • .est-layout-fixed-footer(@height, @body-selector, @footer-selector)

      @height
      页脚高度。
      @body-selector
      页面主体要应用的选择器。可选，默认值为 .est-body。
      @footer-selector
      页脚要应用的选择器。可选，默认值为 .est-footer。
      <body>
<div class="body"></div>
<div class="est-footer"></div>
</body>
      body {
.est-layout-fixed-footer(80px, ~".body");
}
      body > .body {
margin-bottom: 80px;
*zoom: 1;
}

body > .body:before,
body > .body:after {
display: table;
content: "";
}

body > .body:after {
clear: both;
}

body > .est-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
height: 80px;
}

      如果不自定义选择器，则需要与 est-footer、est-body 两个类名配合使用。页脚的默认 z-index 为 @footer-z-index。

  • .est-layout-sticky-footer()

    当内容高度小于容器时也有显示在底部的固定高度页脚，内容高于容器后页脚会被挤压到视口外。

    • .est-layout-sticky-footer(@height, @body-selector, @footer-selector, @footer-placeholder-selector)

      @height
      页脚高度。
      @body-selector
      页面主体要应用的选择器。可选，默认值为 .est-body。
      @footer-selector
      页脚要应用的选择器。可选，默认值为 .est-footer。
      @footer-placeholder-selector
      页脚占位元素要应用的选择器（如不需要支持 IE7- 则无需考虑）。可选，默认值为 .est-footer-placeholder。
      <body>
<div class="body">
<div>Content</div>

<!-- need when @support-ie-version < 8 -->
<div class="est-footer-placeholder"></div>
</div>
<div class="est-footer"></div>
</body>
      html,
body {
height: 100%;
}

body {
.est-layout-sticky-footer(100px, ~".body");
}
      html,
body {
height: 100%;
}

body > .body {
min-height: 100%;
margin-bottom: -100px;
*zoom: 1;
}

body > .body:before,
body > .body:after {
display: table;
content: "";
}

body > .body:after {
clear: both;
}

body > .body .est-footer-placeholder {
display: block;
height: 100px;
}

body > .est-footer {
height: 100px;
}

      如果不自定义选择器，则需要与 est-footer、est-body 两个类名配合使用，且须要保证外层所有 DOM 元素的高度为 100%。不支持与其他布局混用。

  • .est-layout-page()

    定宽居中页面布局。

    • .est-layout-page(@width)

      @width
      页面内容区域宽度。
      .page {
.est-layout-page(980px);
}
      .page {
width: 980px;
margin-right: auto;
margin-left: auto;
}

  • .est-layout-sidebar()

    支持左右两侧各最多一个定宽（单位可以是 px / em / %）侧边栏，主内容区域填充剩余宽度。

    • .est-layout-sidebar(@position, @width, @main-selector, @sidebar-selector)

      单侧边栏布局。

      @position
      边栏位置，可用值为 left / right。
      @width
      边栏宽度。
      @main-selector
      主区域应用的选择器。可选，默认值为 .est-main。
      @sidebar-selector
      侧边栏应用的选择器。可选，默认值为 .est-sidebar。
      <body>
<div class="main"></div>
<div class="est-sidebar"></div>
</body>
      body {
.est-layout-sidebar(left, 200px, ~".main");
}
      body {
position: relative;
}

body > .main {
overflow: hidden;
margin-left: 200px;
}

body > .est-sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
}

      如果不自定义选择器，则需要与 est-main、est-sidebar 两个类名配合使用。

    • .est-layout-sidebar(@primary-width, @secondary-width, @main-selector, @sidebar-primary-selector, @sidebar-secondary-selector)

      单侧边栏布局。

      @primary-width
      主侧边栏（左侧）宽度。
      @secondary-width
      次侧边栏（右侧）宽度。
      @main-selector
      主区域应用的选择器。可选，默认值为 .est-main。
      @sidebar-primary-selector
      主侧边栏应用的选择器。可选，默认值为 .est-primary。
      @sidebar-secondary-selector
      次侧边栏应用的选择器。可选，默认值为 .est-secondary。
      <body>
<div class="main"></div>
<div class="est-sidebar-primary"></div>
<div class="est-sidebar-secondary"></div>
</body>
      body {
.est-layout-sidebar(200px, 160px, ~".main");
}
      body {
position: relative;
}

body > .main {
overflow: hidden;
margin-right: 160px;
margin-left: 200px;
}

body > .est-sidebar-primary {
position: absolute;
top: 0;
left: 0;
width: 200px;
}

body > .est-sidebar-secondary {
position: absolute;
top: 0;
right: 0;
width: 160px;
}

      如果不自定义选择器，则需要与 est-main、est-sidebar-primary 及 est-sidebar-secondary 三个类名配合使用。

  • .est-layout-popup()

    弹出层布局。

    • est-layout-popup(@position, @overlay-opacity, @popup-selector, @valign-ghost-selector)

      @position
      弹出层的位置。可取值为 top / right / bottom / left / center，分别对应在视口顶部居中 / 右侧居中 / 底部居中 / 左侧居中 / 绝对居中。
      @overlay-opacity
      遮罩层的不透明度。可取 0 – 100。如果为 0 则遮罩不显示，可以与弹出层周围的页面内容进行交互，否则则无法交互。可选，默认值：0。
      @popup-selector
      弹出层应用的选择器。可选，默认值为 .est-popup。
      @valign-ghost-selector
      用于垂直居中的站伪元素应用的选择器（如不需要支持 IE7- 则无需考虑）。可选，默认值为 .est-valign-ghost。
      <body>
<div>Content</div>
<div class="overlay">

<!-- need when @support-ie-version < 8 -->
<div class="est-valign-ghost"></div>

<div class="popup">Popup Content</div>
</div>
</body>
      .overlay {
.est-layout-popup(center, 80, ~"popup");
}
      .overlay {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
width: 100%;
height: 100%;
letter-spacing: -0.5em;
text-align: center;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000)\0;
zoom: 1\0;
background: rgba(0, 0, 0, 0.8);
}

.overlay .est-valign-ghost {
display: inline-block;
height: 100%;
vertical-align: middle;
}

.overlay > popup {
display: inline-block;
vertical-align: middle;
}

:root .overlay {
filter: none\9;
}

      必须与类名 est-popup 配合使用。弹出层的默认 z-index 为 @modal-z-index。

  • .est-layout-horizontal-list()

    用于把列表变成水平，在做菜单样式或是卡片样式时有用。

    • est-layout-horizontal-list(@gap, @direction)

      @gap
      平方向上列表项之间的间隔长度（任意单位）。
      @direction
      水平浮动的方向。可用值为 right / left。可选，默认值：left。
      <div class="users">
<ul>
<li>Tony Stark</li>
<li>Steve Rogers</li>
<li>Hulk</li>
<li>Thor</li>
<li>Loki</li>
</ul>
</div>
      .users {
.est-layout-horizontal-list(10px, left);
}
      .users {
*zoom: 1;
overflow: hidden;
}

.users:before,
.users:after {
display: table;
content: "";
}

.users:after {
clear: both;
}

.users ul,
.users ol {
list-style: none;
float: left;
margin-left: -10px;
}

.users ul li,
.users ol li {
float: left;
margin-left: 10px;
}

  • .est-layout-fluid-fixed-ratio()

    在自适应宽度情况下，确保视频、Flash、图片、iframe 等内容的元素高宽比固定。

    • est-layout-fluid-fixed-ratio(@width, @height, @extra-height, @target-selector)

      @width
      内容宽度。
      @height
      内容高度。
      @extra-height
      除宽度比外，额外的固定高度，这部分高度不会随宽度的变化而变化。可选，默认值：0。
      @target-selector
      目标元素需要应用的选择器。可选，默认值：.est-fixed-ratio。
      <div class="fluid-wrap">
<img src="http://placehold.it/800x600" alt="" />
</div>
      .fluid-wrap {
.est-layout-fluid-fixed-ratio(800, 600);
}
      .fluid-wrap {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
}

.fluid-wrap object,
.fluid-wrap embed,
.fluid-wrap iframe,
.fluid-wrap img,
.fluid-wrap .est-fixed-ratio {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

      会生效的元素类型包括 <object> / <embed> / <iframe> / <img> 以及符合选择器 @target-selector 的元素。@width 和 @height 参数的单位需要统一。Demo 见此。可参考 Rundown of Handling Flexible Media。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文