美文网首页
前端练习-第四周

前端练习-第四周

作者: TinkleJane | 来源:发表于2020-08-04 23:53 被阅读0次

推荐一个小视频 掌握CSS的5个技巧
里面讲到的5个技巧分别是

  1. 样式调整
    包括基本的颜色、大小、边距等调整
  2. 布局调整
    脱离文档流:position:absolute / position:fixed / float
    不脱离文档流:transform:translate[X|Y|Z]
    响应式布局:@media
  3. 形状、特效的拆解和合并
    三角:设置边框border可以获得不同的三角形状;
    水波特效:背景圆半径变大同时opacity从1到0
  4. 页面组件设计原则
    在设计组件时,首先分析设计稿中哪些组件大体相同,然后把他们的公共样式抽离出来,有特殊情况时通过组合class来覆盖已有的样式
    公共类、utility class
  5. 模块化
  • 通过选择器选择对应的html元素,应用样式
  • 设置元素外观、比如颜色、背景、字体等
  • 调整元素的位置和与其他元素的间距
  • 安排一组元素或者整个页面的布局
  • 覆盖或继承已有样式

上周复盘

共完成5个作业


image.png

钟表难度比较大,关键的是:位置旋转及文字反转
CSS transform中的rotate的旋转中心通过transform-origin设置,默认变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
下面这张图比较直观


image.png

何同学的关键是结构设计和布局

width: calc(100%/12); //将width分成12份
display:inline-block; //行内快元素,支持宽度设置
//每一部分的动画,延迟执行,用宽度控制控制每一页的显示隐藏
@keyframes part {
    0% {
      width: 0px;
    }
    100% {
      width: 100%;
    }
  }

B站一剑三连更加复杂,利用before、after伪元素添加添加很多对称修饰的形状,元素旋转形成向四周辐射的效果,元素位置变换形成点击抖动的效果。

下周任务

本周是这次计划的最后一天,安排两个新任务


image.png

增加李立超老师课程中的背景练习、电影卡片练习、淘宝导航。

相关文章

  • 前端练习-第四周

    推荐一个小视频 掌握CSS的5个技巧里面讲到的5个技巧分别是 样式调整包括基本的颜色、大小、边距等调整 布局调整脱...

  • 知行家精力管理践行.2之四:情绪管理

    212班11.0践行第四周作业安排(2021.9.11~9.17) 第四周主题:情绪管理 作业:练习在日常生活中觉...

  • 艺术疗愈•一期一涂鸦:我那些奇怪的恐惧

    第四周练习1:找出我的恐惧和辨识非理性恐惧 ​​本周进入涂鸦日记第四周任务的练习当中,本周的主要议题是通过涂鸦日记...

  • 前端练习-第五周

    扎实的基础,包括基础知识以及基本思维方法,分析问题解决问题的方法,是铺垫成功之路的一级级台阶。 上周的计划稍微有点...

  • 前端练习-第二周

    昨天在B站看了技术胖的一个视频 硅谷大佬都在用的程序十步学习法(上),他讲到一个程序员十步学习法: 1.了解全局;...

  • 前端开源项目周报0103

    由OpenDigg 出品的前端开源项目周报第四期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的...

  • 数据库2018-6-25

    数据库没有诀窍:唯有练习 命令 ===== Linux 前三周的课程: 1、两周的时间讲解前端部分(UI): HT...

  • 易效能一阶309第五周周总结

    一锦囊收获: 第一周:启动仪式 第二周:记录练习 第三周:排程 第四周:精力管理 第五周:日历 高能要事: ...

  • 前端练习-第三周

    上周少写了一天作业,然后在群里发了100块20个红包,结果只有6个人领了,竟然退回来88+元,太尴尬了,我都怀疑是...

  • 飞乐鸟手账小课堂(第四课-第1周)

    第四课-第1周素材包 2017-03-28飞乐鸟 自由练习使用

网友评论

      本文标题:前端练习-第四周

      本文链接:https://www.haomeiwen.com/subject/zfqgrktx.html