学成在线:前端开发工程师区域(其他区域类似) ,版权区域
前端开发工程师区域
因为该模块头部样式跟课程部分相同,所以直接复制一样的 html
然后样式就是直接引用的 精品推荐课程部分的,所以不再需要为父级 ul设置专门的 flex
竖着和横着的那两个部分盒子不再设置宽高,直接由内容撑开
并且 right的盒子中bottom盒子中四个 li标签的样式跟上面精品推荐课程是一样的,直接用的是公共样式,所以不再需要设置 父级ul 的 flex
版权区域
版权区域布局 :
先将大的盒子 footer内外上边距和高度背景色设置
然后给版心 wrapper 作为left 和 right 的父级设置 flex布局,并且设置主轴对齐方式
设置 left 宽度和背景色
版权区域 left 内容填充 :
左侧:
首先logo是能点击跳转,所以使用 a 标签
其次 p 中内容 的换行是通过固定了整个left 盒子然后固定字号来控制的,设置行高让内容垂直居中
最后点击下载是点击之后能跳转,所以设置为 a 标签,为了区别跟logo 的 a 标签,设置了一个类 download,将其转换为块级元素设置宽高以及边框
右侧: