【九月打卡】第二天 前端综合案列仿慕课首页-课程类别和轮播图

课程信息

● 学习课程：Java工程师2022版
● 章节名称：前端综合案例-仿慕课网首页-课程类别和轮播图
● 讲师：八戒猪

课程内容

1. 先搭建整个标签结构,分为三块，先分为上下两块，然后上面一块div分为左右两块div通过左右浮动定位
2. 先写左边板块课程类别的相关样式
   主要用到图标的右浮动，鼠标移动上去背景色变化，鼠标样式
   .course-list li {
   cursor:point;
   }
   .course-list li:hover {
   background-color: rgba(255,255,255,0.1)
   }
3. 轮播图div的样式
   a. 子绝父相
   b. 边框角度圆角 border-radius: 50%;
4. 下方的体系课div样式
   行内块 display: inline-block;
   图片设置background-size属性
   .sys-icon {
   transition: 0.2s;
   }
   .sys-icon:hover {
   transform: translateY(-2px)
   }
5. css动画属性
   a. transition: 过渡属性，让html标签从一个样式切换到另一样式时产生的动画效果
   连写 transition: poperty duration timing delay
   transition-duration 设置完成过度效果需要的时间（秒、毫秒）
   transition-property 设置参数过度效果的css属性（all全部属性参数）（none全部不参与）
   transition-timing-function 设置过度动画的速度曲线
   line 匀速执行动画
   ease 先慢中快后慢执行动画
   ease-in 先慢后快执行动画
   ease-out 先快后慢执行动画
   ease-in-out 先慢中快后慢执行动画
   cubic-bezier(n,n,n,n)自定义方式指定 贝塞尔曲线
   transition-delay 定义过度效果合适开始
   在div上设置transition div:hover会继承 反之div:hover设置，则div上不会继承
   在div和 div:hover可以都设置，切换到谁，就看谁身上的过度属性
   b. transform属性应用于元素的2D或3D转换。该属性可以将元素旋转，缩放，移动等
   2D移动： translate(x, y) translateX(x) translateY(y) 例：translate(-2px,1px)
   2D旋转 rotate(角度) 例：rotate(360deg)
   2D缩放 scale(倍数) 例：scale(2)

学习收获

先拆后单独写每块样式，复习巩固之前学习的样式写法。对于css动画属性学习，transform用于元素2D（移动，旋转，缩放）或3D转换。transition过渡属性，两者一般搭配使用

打卡截图