1.实现第二个前端页面,大多是用纯HTML+css实现,是通过在第一个页面的额基础上,修改local的block文件指向位置,在3columns.ptml文件获取中间内容块:
<?php echo $this->getChildHtml('breadcrumbs') ?>
breadcrumbs.phtml 是今天实现中间页面的HTML代码
2、关于display:flex弹性布局
在写盒子模型的时候,经常需要并排盒子,调盒子位置经常通过大量嵌套盒子和 position属性 + float属性对盒子进行调整,接触display:flex弹性布局可以很好布局盒子模型
定义父类盒子为display:flex,可以设置六个布局属性对子盒子进行调整位置排列顺序:
- flex-direction 决定主轴顺序排列
- flex-wrap 当放不下多个子盒子时是否换行
- flex-flow 是flex-direction和flex-wrap的简写
- justify-content 定义盒子在主轴的排列方式
- align-item 定义单列主轴线的对齐方式
- align-content 定义多列主轴线的对齐方式
使用flex布局可以减少嵌套盒子的使用,方便多列盒子的布局,排列属性:order、页面的缩放flex-grow、flex-shrink属性中,设置对应的盒子还可以在屏幕大小发生改变时,起到屏幕自适应的效果
各个属性取值的作用效果:
1、flex-direction属性
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿
2、 flex-wrap属性
nowrap(默认):不换行
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3、 justify-content属性
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
4、align-items属性
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
5、align-content属性
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
参考链接:https://blog.csdn.net/u011300580/article/details/56011564