样式名称其实也就是我们调整的样式存储起来的名称如下图名称为ue6faa,而我们只添加了高度为7.6em
最后我们生成的样式代码为
.ue6faa{
height:7.6em;
}
了解了代码生成的原理之后,我们就可以直接将ue6faa改为自己的样式名称了。
从而达到样式的定制,如果对样式名称没有要求的也可以直接使用系统生成的名称。
注意:guiplanspan标签添加修改样式无效,因为生成代码之后会自动过滤掉该标签
公共样式也就是我们html标签中的class属性值,也就是公共样式类。
比如这里的内容为bg-red white红色背景,白色字体,最后生成的html代码为:<div class="bg-red white"></div>"
了解生成代码的原理之后,我们还可以通过样式名称生成的样式来充当公共样式,让其他html标签也能使用。
比如下图创建一个样式ue6faa内容为高度7.6em还设置了一个背景
这样我们就可以在其他元素上加上此类名也会将高度设置为7.6em,如下图不仅设置了高度而且还添加了背景
默认单位如下,大家可以根据自己的喜好,项目的要求来选择对应的单位。
默认单位选好之后以下布局尺寸的调整会自动添加所选的默认单位。
比如所选单位为百分比,则拖拽或点击加减按钮尺寸变化的同时后面会自带默认单位。如下图:
当然这个单位也可以手动修改,比如上图的18% 可改为 18rem 后续拖拽调整尺寸会以你修改的单位为主。
guiplan2.0之后常用的css样式都可以进行可视化调整,再也不需要依赖其他的框架或手写样式代码来进行调整了。
如下图可以看到所选元素的高宽值
字体模块中可以配置字体的各种样式
按快捷键I快速插入图片
拖拽电脑任意图片即可替换图片中的src地址,并且软件会自动将图片存放到自己的项目中。
通过调整高度与宽度即可调整图片尺寸。
如果只调整宽度,则图片的高度会随之原有的高宽比例自动变化
同理如果只调整高度,宽度也会自动变化。
高宽都设置的话,图片会被拉升。
背景配置如下,可以选颜色也可以选择图片
最下方有关于定位的配置
每一个颜色调节这块都有吸色器工具。
相信大家对盒子布局应该并不陌生,早年间我们都用左对齐布局,要写很多的样式,什么居中对齐,水平对齐,均匀排列还要写很多的边距行高等等。而有了盒子布局之后几乎可以省下一大半的代码就能实现想要的效果。
盒子布局不太懂的可以看视频教程
后续有更多的布局排版教程,可以尝试着多练习练习。
主轴对齐方向为水平方向。
默认则是左对齐。子元素所有内容都会靠左对齐如下图
主轴居中则所有内容居中对齐
右对齐
均匀分布贴着两端
主轴对齐方向为垂直平方向
默认则是上对齐
同理居中也是垂直方向的居中,均匀分布则是垂直方向的均匀分布。
如继续调整水平方向的布局,可以再配合副轴对齐。
副轴对齐也会根据盒子布局方向而变化。
如果实在难理解,只需要记住副轴就是与主轴不同的方向即可。
比如主轴是水平,副轴则是垂直方向。
主轴为垂直方向,则副轴为水平方向。
如下图布局方向为水平布局,主轴为水平左对齐,副轴则表示垂直方向,比如垂直方向下对齐。
停靠样式也就是对应的css中的:hover伪类。
也就是光标停靠在所选元素之后要显示的效果
选择好悬浮样式之后,以下样式配置都会自动存放到hover里,
如上图最终生成之后的代码为
.u8e180 :hover {
}
除了常用的停靠伪类以外,我们还支持其他的伪类样式。
我们去查看css伪类表发现也非常之多
具体是什么意思大家可以了解一下测试一样。这些都是css基础相关的知识点。
下拉列表中有个自定义伪类
下方有个加号按钮,点击加号弹出弹框
这里我们手动的输入伪类名称,也可以关键字搜索伪类。
如果大家不懂的话也都有对应的中文说明,也可以通过搜索中文关键字进行快速搜索伪类
子元素样式类则表示所选元素的子元素,可以为空。为空则表示设置当前所选元素的伪类样式。
不为空则表示设置当前元素的伪类里的子元素样式。
当然这个子元素选择器也可以直接用标签名称比如span
比如当前元素名称为mybtn,所选伪类名称为:disabled,子元素样式类为.u8e180 生成的代码为
.mybtn :disabled .u8e180{
}
当然子元素也可以是标签比如为span
.mybtn :disabled span{
}
其实也就是当按钮的状态为禁用状态时,按钮里的span标签的样式可以定制
自适应也就是不同的屏幕定制不同的样式。
样式类型中选择自适应定制
选择要定制的屏幕
比如选择屏幕大于576px屏,将宽度设置为50%,
则屏幕只要大于576px,宽度自动设置为50%,
同理如果再设置屏幕宽度大于768px,宽度设置为33%,
默认宽度如果是100%,则最终的效果为576px到768px之间宽度为50%,
大于768px则宽度为33%。
当然这只是屏幕的自适应,还可以定制其他的样式比如屏幕的不同背景颜色变化。
不同的屏幕隐藏部分内容。
不同的屏幕修改排版布局方式等。
生成之后的css代码如下,会自动将样式代码存放到自适应对应的位置
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
不了解的可以看视频学习。
元素id则是为给所选元素添加id
生成之后的代码如下:
如果生成之后的代码不需要这些多余的id,可以勾选“优化”
优化之后的代码则不会再有id了。如下图
但要注意:guiplan是通过id来判断所选的是哪个元素,所以优化之后不可再进行可视化开发。并且元素选择器也尽量不要用id选择器,代码优化之后会去掉id。
如果想继续可视化开发,可点击“解锁页面继续研发”
为所选元素添加阴影。
box-shadow:0px 2px 14px 0px rgba(0,0,0,0.2);
生成之后的代码如上
这里的缩放是指缩放倍数,2则表示放大两倍大小,如想缩小一半则可设置为0.5
生成之后的代码也就是scale属性
transform: scale(2,1.3) ;
这里的位移与margin边距,或者绝对定位都是有区别的。如下图:中间文字实际还是占用了该有的位置,所以中间会空出来,然后显示的时候中间文字进行了移动,导致文字重叠。
而margin边距移动的话,后面的所有元素都会被挤出去跟着一起移动位置。
下位移同理显示的时候往下移动,实际所占位置并没有变化,所以哪怕显示的时候超出了父元素,也不会将父元素的高度撑开,所以超出的部分会被遮挡。
transform: translate(25px,19px) ;