CSS魔法和布局示例-创新互联
这篇文章主要介绍CSS魔法和布局示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销网站、网站程序开发、HTML5响应式网站建设公司、成都做手机网站、微商城、网站托管及成都网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都三维植被网行业客户提供了网站设计服务。前言:布局和样式,是每个前端的必修课。在日常的工作中,也会碰到一些特定场景的布局需求,配合上样式,就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局,以及浏览各大网站时碰巧发现的神奇特效写法,在此做个分享。
由于篇幅原因,会分为 2 篇。今天,会先介绍一些有趣而又实用的布局的写法。之后的一篇,将展现样式的神奇魔法。
懒加载占位图自适应
在商城中展示商品图片时,如果图片较多,一种比较好的体验是:会先有一个占位图,目的是为了让页面无抖动,也就是所谓的图片懒加载效果。但是,当遇到适配时就比较头痛,特别是手机的横竖屏切换。如果是通过 JavaScript 计算的话,就可能会出现抖动现象。
本着能用 CSS,就不用 JS 去实现的原则,就有了下面这种方案:
.img-ratio { width: 100%; position: relative; padding-top: 75%; } .img-ratio > img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
可以适配不同屏幕,只要 UI 提供一张 4:3 的占位图即可。下图展示了不同宽高,但比例相同的 2 张图,都能完美地居中显示。
它的原理是:
- 根据容器的宽度,按照宽高比例,自动计算出容器的实际大小,并且让容器内的如 img 等子元素自适应宽高。
- 图片父容器宽度 100%,父容器的高度百分比为:100 * 3 / 4 = 75%。
- 图片 absolute 并且完全铺满父容器。
移动端的横向滚动条
移动端的界面,寸土寸金。有时为了控制屏幕的滚动长度,会将一些模块横向排列。但是,横向排列会产生一些布局问题。
比如,移动端的滚动条样式,依赖与手机浏览器,各不相同。一种解决方案是:把滚动轴隐藏掉,但不能 overflow-x:hidden;
,不然就滚不动了。然后算好每一个横向的块的宽度,让最右侧的块露出一部分,这样用户就知道右侧的屏幕之外还有内容,可以横向滑动。
又如果横向滚动的宽度是未知的,因为可能会随着业务的需要,改变横向模块的个数,那么横向排布就没法用 float 了。因为用了浮动,就得知道整个横向滚动的宽度,整个的宽度要比浮动块累加起来的宽度更宽,才能保证浮动不换行。
所以,就有了下面这样的写法:
- 1
- 2
- 3
- 4
- 5
- 6
.wrapper { width: 340px; height: 80px; overflow: hidden; } .wrapper ul { height: 96px; width: 100%; white-space: nowrap; overflow-x: scroll; padding: 0; margin: 0; } .wrapper li { display: inline-block; width: 80px; height: 80px; background-color: #ddd; line-height: 80px; text-align: center; font-size: 20px; margin-right: 10px; }
它的思路是:ul 设置 white-space:nowrap;,li 设置 display:inline-block;。最外层的 p 利用高度差,把横向滚动条藏起来。
顶部导航不定宽的居中展示
一些官网,有顶部导航栏,导航栏的内容区往往需要居中展示,两旁则留白,导航栏的下方可能还有根线或者阴影,作为区分顶部与主体内容。
.center-float { float: left; position: relative; left: 50%; } .center-float > ul { position: relative; left: -50%; }
这是居中浮动的一种做法,再配合相对定位。
footer 置底
当页面主内容区高度不够时,footer 依然显示在最下面。这里当然不是指 position: fixed,footer是紧跟在内容区下方的。有 2 种方法。
html 结构如下:
....
1、margin & padding
html, body { height: 100%; } $footer-height: 30px; #content { min-height: 100%; margin-bottom: -$footer-height; padding-bottom: $footer-height; } #footer { line-height: $footer-height; text-align: center; }
2、flex 布局
$footer-height: 30px; html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #content { flex: 1; } #footer { line-height: $footer-height; text-align: center; }
超宽的背景图片居中
一些传统的门户网站,它们的主内容区宽度大致为 980px 或 1000px 这样的经典宽度。有时候,会把较宽的图片作为整体背景图,居中放置,并且不要横向滚动轴,可以这么做:
.wrapper { min-width: 1000px; height: 800px; background: url(test.jpg) no-repeat center top; } .mainContent { position: relative; width: 1000px; margin: 0 auto; }
::after 实现水平垂直居中
伪元素也能用来实现居中么?当时看到的一感觉就觉得挺神奇的,看下面这个例子:
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; } .wrapper::after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .wrapper > img { vertical-align: middle; }
水平方向很好理解。垂直方向,可以理解为 ::after 把 img 往下拉到了中间。
以上是“CSS魔法和布局示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:CSS魔法和布局示例-创新互联
当前地址:http://myzitong.com/article/dgecdo.html