为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 CSS 如何布局

CSS 如何布局

2019.04.25 12:44 1181浏览

布局在前端开发中非常重要,布局是骨架是结构,就像房子的地基框架,设计优良的结构对整个页面的可维护性和扩展性都有很好的帮助。网页的样式可以变化多端,但是万变不离其宗,我们总结一下网页布局有哪些?他们如何设计比较合理。

经典布局

页面的经典布局如下图,它非常实用并且经久不衰,很多新的布局也是基于这种布局演变出来。

webp

layout-classical.png

我们看看它的一些特点:

  • 三列布局,中间宽度自适应,两边固定宽度;

  • 整体水平居中;

  • 整体宽度可以任意调整;

  • 允许任意列的高度最高;

管理界面布局

管理界面的布局可以说是经典布局的一个演变:

webp

layout-manage.png

  • 三列或两列,中间宽度自适应,两边固定宽度;

  • 整体宽度 100%;

  • 整体高度相对浏览器可是区域 100%;

  • 中间区域有滚动条;

流式布局

列表布局

列表的布局数据局部布局,但是也是一个非常常用的布局方式。

webp

layout-list.png

  • 整体宽度自适应;

  • 每一列高度大于某一高度后自动变高;

  • 左边可能有封面图或者 icon,宽度固定;

表单布局

表单布局非常常见:

webp

layout-form.png

  • 两列布局,左边固定右边自适应;

  • 整体宽度自适应;

  • 左边是表单项的名称,右边是表单输入项;

  • 表单输入项内部的输入空间分情况占满输入项列;

其它

还有其它很多种不同的布局方式,我们未来再一一探讨:

  • 手风琴布局

  • 相应式布局




点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
133

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

145篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消