整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端开发中全屏布局解决方案,常见管理系统布局方案

迎关注。

全屏布局方案

全屏布局方案常用于管理系统,监控与统计平台,传统企业官网。使用全屏布局方案可以简单快速的搭建出一个网站的首页结构。

下图为全屏布局效果图,该全屏布局中使用的是定宽和自适应的布局方式。top和bottom部分宽度固定,left部分宽度和高度固定,right部分自适应页面内容,滚动条出现在right内部,滚动滚动条时right部分内容滚动,全屏不动。放大或缩小浏览器窗口时不会只有right部分的宽高会改变,其余部分均保持不变。

全屏布局结构效果图

使用position实现

使用position实现全屏布局

首先在html、body、.parent上设置height为100%和hidden,去除浏览器自带的滚动条。接着设置top、left、right和bottom为绝对定位元素,并利用绝对定位元素的top、left、right和bottom属性将元素撑开,占据整个页面。其中inner元素是用来实现滚动条的,在实际的页面制作中,滚动条会因为内容的高度而自动出现,此处为了演示效果添加了该滚动条。

如果需要将定宽改为百分比值,可直接将相应的数值改为百分比,例如height:100px;可直接改为height:10%;

该方案在兼容IE6时还需要做一些处理,其他浏览器都有较好的支持。

使用flex实现

使用flex实现全屏布局

基本思路与position一致,但是使用flex来实现,首先实现三行排的效果,再在中间列上实现两列效果。inner元素仍然作为滚动条效果展示辅助元素出现。

完全自适应的全屏布局方案

完全自适应的全屏布局要求除right部分空间占据剩余位置外,其余部分所需空间均需要根据内容来分配,效果图如下:

完全自适应的全屏布局

目前实现该布局的方法有两种,flex和grid,但是grid方法还处于w3c的草案阶段,大部分浏览器都没有支持,所以此处只展示flex实现方法的代码。

使用flex实现

flex实现自适应全屏布局


我们看到该方案与前面flex实现全屏布局的方案比较起来很相似,只是移除了关于元素宽度和高度的设置,我们移除了宽度和高度的设置后,元素的宽高就会依据内容的宽度自动调整,从而实现自适应。

收藏转发请先关注,谢谢支持~

里巴巴店铺装修中离不开全屏轮换广告,由于阿里店铺装修原配的轮换图有点呆板,所以通过自己编写的特效代码来制作全屏轮换广告还是很有必要的。

(源代码特效观看及代码请在文末)

1. 先上全屏轮换的效果图

阿里店铺装修全屏广告轮换效果图

(由于画面问题,缩放显示了,正常宽度是 1920px或100%)

2. 店铺装修中全屏轮换特效的html代码

阿里店铺装修全屏广告轮换html代码

全屏广告轮换html代码解释:

① 属性的设置,这里nav(触发切换的标签)不使用默认,对应的是.lht_nav里面的li元素,切换的面板设置为.lht_pane,上下页按钮设置如图,触发动作设置成点击触发.

② li的触发标签个数与lht_pane面板的数量必须要一致。

3. 店铺装修中全屏轮换特效的CSS代码

阿里店铺装修全屏广告轮换css代码

全屏广告特效css部分说明:

① 这里涉及到一个css小技巧分享,对触发标签容器.lht设置文本居中,然后子元素设置为display:inline-block; (内联块状的意思,区别于float:left),这样里面的小模块就会在容器.lht里面居中了,这样能确保触发切换的按钮能一直画面中间

② 此处只是外部的箭头图片路径地址

③ .disabled类是当上下页失效(第一页和最后一页时)的特定类,小耐这里设置成不显示,也可以考虑设置成透明。

阿里巴巴国内店铺装修的全屏广告特效的基本代码就如上所示,此特效实际就是基于切换组件fx.tabs变通出来的特效,部分全屏特效是可以有缩率小图在左边或者右边,实际只要将触发标签里面的元素换成图片即可。

由于自媒体文章避免贴出代码展示网址,所以如果有意获取源代码,请访问小耐博客获取或阅读原文后获取。

-- 关于html和body的那些事

还记得我们开发全屏页面或者是移动端页面时经常会设置一句话

html, body { height: 100%; }

是不是只知道用?却不知道怎么回事?

原因是,当没有内容撑开高度时,html和body的默认高度是0,如果内容想要按照比例或是撑满全屏时,就没办法正常使用百分比

而如果只设置body { height: 100%; },这时body以html的高度为基准,但html默认高度也是0,所以需要设置html与body高度同与浏览器等高

但!

当我们没有设置任何高度的情况下,给body设置背景色,颜色竟然是可以布满浏览器的,然而可以看到控制台中,body实实在在是没有高度的,这究竟是为什么呢?

body {
    background: pink;
}

事实上,当我们单独给body设置背景颜色时,并不是body标签被赋予了背景色,而是【 浏览器画布 】赋上了颜色,可以理解为,body的背景色被浏浏览器”吃掉“

那如果我们同时给html与body设置背景色,会发生什么样的结果呢

html {
    background: orange;
}

body {
    background: pink;
}

可以看到,我们设置的body背景色竟然“失效了”,浏览器被赋予了html的背景色

而在我看来,实际是我们设置的body背景色[生效了],但因body默认高度为0,所以在页面中并没有粉色区块显示,那我们尝试在body中添加一些内容

可以看出,body的高度被撑开,而body的背景色则是实实在在只给了body

所以我们可以得出一个结论

浏览器会“吸收”html与body的背景色

当只设置了body背景色时,浏览器发现了,于是把这个背景色“占为己有”

而如果html设置了背景色,浏览器则会认为html离我更近,所以会“拿走”html的背景色当成自己的颜色

当然,到现在为止,我们实验的都是纯色背景,那如果我们设置成渐变色,还是相同的结果吗?

疑问产生,开始实验

首先,只设置body的背景为线性渐变粉色pink到白色#fff,预想结果应该是和背景一样,直接浏览器从上往下的渐变

body {
    background: linear-gradient(pink, #fff);
}

嗯?这怎么和预想不一样,再放大页面看一下渐变,就可以发现每个渐变的高度和html的高度是一致的,而html的高度则是body的默认margin撑开

于是开始设置

* {
    margin: 0;
    padding: 0;
}

同样,如果渐变给html设置的,也不会作用到浏览器上

说明浏览器并不会把渐变色据为己有,那如果想要设置全屏渐变,就需要用到我们文章开头说到的

html, body { height: 100%; }

你晓得了吧!!!