又过去3天,布局篇看完了。
感觉吃透这些基础知识,需要不停的实践与模仿。
单页来讲。
流式的百分比布局,是有的width都是100%的,但height都是固定的, 主要摸头position 和 margin 以及 padding 还有 float 就基本上差不多掌握了,这一点其实和pc端没差别,唯一的优势就是兼容性很好。
flex布局就是在原有的传统布局基础上添加css3 把盒子转换成 flex 属性,在根据 justify 以及 align 控制盒子的位置——多盒子可以快速排序,从开头的flex-start 到 end 在到 center
如果遇到复数盒子 需要 用 align 需要 从item 改写成 content 。
当然肯定需要加 warp。
另外flex 对于单行快速布局更加便捷,垂直水平居中可以瞬间完成。或者想要盒子两头对齐、彼此间存在相等的空隙。’利用到 space-around 以及 space-between。
如果确定2个盒子吃下父盒子的部分空间时候,第三个盒子可以不用设置width 利用flex:number;快速吃下剩余的空间。
第三个学到的不布局是less,flexible.js。这里黑马教程的pink提到需要下载px转less 单位的插件。但我感觉并不怎么好用,输入单位后,需要等一会才能转换公式,我觉得很不便捷。也许我还是新手的缘故把,不知道怎么配置。我就想了其他办法。
以前办公的时候经常用到Excel 可以快速跟换关键字,往后我找hift+ctrl+l 键 可以全部修改匹配的关键字。利用less自带的声明@ 我可以快速 更改px像素单位。
比如 px shift+ctrl+l 后 修改为 rem / @basefont ~~~~
less布局已经讲到媒体匹配 @然来运转 screen and () 因此可以放心大胆的设置宽度了。
总体来less的功能真心强大,是有盒子有了数值后,布局简直得心应手。当然学到这里之后,也可以多布局配合使用。
最后就是响应式布局,需要借助bootstrap 要记住大佬规定的类别,熟记12列格子。
.container row col-lg-num 这种布局感觉有点难,需要大量的时间去调样式,现在的我做一个就感觉到吃力。
这些死记硬背的东西,需要不停的练习才不会忘记。争取每天布局一个网页或者学会一个样式功能。
接下来就是进入js篇幅了,昨天就已经开始了,确实很讲究逻辑,有点吃力啊。
感觉吃透这些基础知识,需要不停的实践与模仿。
单页来讲。
流式的百分比布局,是有的width都是100%的,但height都是固定的, 主要摸头position 和 margin 以及 padding 还有 float 就基本上差不多掌握了,这一点其实和pc端没差别,唯一的优势就是兼容性很好。
flex布局就是在原有的传统布局基础上添加css3 把盒子转换成 flex 属性,在根据 justify 以及 align 控制盒子的位置——多盒子可以快速排序,从开头的flex-start 到 end 在到 center
如果遇到复数盒子 需要 用 align 需要 从item 改写成 content 。
当然肯定需要加 warp。
另外flex 对于单行快速布局更加便捷,垂直水平居中可以瞬间完成。或者想要盒子两头对齐、彼此间存在相等的空隙。’利用到 space-around 以及 space-between。
如果确定2个盒子吃下父盒子的部分空间时候,第三个盒子可以不用设置width 利用flex:number;快速吃下剩余的空间。
第三个学到的不布局是less,flexible.js。这里黑马教程的pink提到需要下载px转less 单位的插件。但我感觉并不怎么好用,输入单位后,需要等一会才能转换公式,我觉得很不便捷。也许我还是新手的缘故把,不知道怎么配置。我就想了其他办法。
以前办公的时候经常用到Excel 可以快速跟换关键字,往后我找hift+ctrl+l 键 可以全部修改匹配的关键字。利用less自带的声明@ 我可以快速 更改px像素单位。
比如 px shift+ctrl+l 后 修改为 rem / @basefont ~~~~
less布局已经讲到媒体匹配 @然来运转 screen and () 因此可以放心大胆的设置宽度了。
总体来less的功能真心强大,是有盒子有了数值后,布局简直得心应手。当然学到这里之后,也可以多布局配合使用。
最后就是响应式布局,需要借助bootstrap 要记住大佬规定的类别,熟记12列格子。
.container row col-lg-num 这种布局感觉有点难,需要大量的时间去调样式,现在的我做一个就感觉到吃力。
这些死记硬背的东西,需要不停的练习才不会忘记。争取每天布局一个网页或者学会一个样式功能。
接下来就是进入js篇幅了,昨天就已经开始了,确实很讲究逻辑,有点吃力啊。