自助建站、网页设计教程

通过学习路线图,零基础学习专业网页设计、小程序UI设计技巧,成就网页设计高手。

布局组件—栏

分栏是比较好用的一个布局组件,其最大的作用是排版页面,可以将相同结构不同内容的区域分割显示。下面来看下分栏的一些功能。

预置分栏

基于响应式桌面布局原理,在cool site360中栏使用了预定义的网格类, row 可用于快速创建网格布局。

桌面端定义栏十款排版样式。

iPad端和手机端根据PC端适配样式,注意:调节PC端分栏会同时影响手机端和iPad端,而调节手机端不影响PC端。具体的适配规则请看教程: 响应式布局 调整

以四栏布局为例:

PC端设置为四栏布局,效果如下:

平板端设置为四栏布局,效果如下:

手机端设置为竖排布局,效果如下:

自定义分栏

除了使用预定的分栏样式,cool site360还支持自定义分栏,只需要通过 CSS样式设置面板 为分栏中的每一列自定义百分比就可以了,如以下是一个布局为四栏2:3:3:2的列设置。

列属性设置

设置分栏后,同时也会生成相应数量的列,在元素设定面板可以对列进行移动、删除操作。

按住列可拖动次序。如列2与列3互换位置。效果如下:

移动前:

移动后:

提交成功,谢谢反馈!

请完整填写表单的信息后,再进行提交!