一、基础班学习路线

Web服务器

什么是服务器




申请免费空间以及网站上传


四、HTML5和CSS3提高

1.CSS3 2D转换

2D转换之移动 translate


让一个盒子水平垂直居中


2D转换之旋转 rotate


案例-三角形




设置转换中心点transform-origin

旋转案例



2D转换之缩放 scale


图片放大案例



案例-分页按钮



2D转换综合写法及顺序问题

2D转换小结

2.CSS3 动画

CSS3动画基本使用

  • 动画比过渡更强大,不需要鼠标经过,自动播放




动画序列



CSS3 动画常见属性

CSS3 动画简写

大数据热点图案例






  • 注意权重的问题

  • 这里之所以用宽和高而不用scale,因为后者会把阴影一起放大,不好看

  • 前面的.city用top和right,这里要覆盖他不能用bottom或则left

速度曲线之steps步长


  • 打字机效果(一步打一个字):注意字体大小和宽度关系(10个20px的字和200px宽的盒子);分10步,每一步打一个字,steps(10)

案例-奔跑的熊大


  • 跑过来的效果:

3.CSS3 3D转换

认识3D转换



3D移动 translate3d

透视perspective

3D旋转 rotateX



3D呈现 transform-style


案例-两面翻转盒子








案例-3D导航栏

案例-旋转木马

浏览器私有前缀

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(CSS3)相关推荐

  1. 【黑马程序员pink老师前端】网页相关概念

    java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...

  2. 【黑马程序员pink老师前端】JavaScript对象

    java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...

  3. html, css学习笔记,自用(B站黑马程序员pink老师)

    附上教学视频链接黑马程序员pink老师前端入门教程 该博文是自己随手记的上述视频笔记 跳转到css, p61 P18 <div> </div>一行一个,<span> ...

  4. 学成在线案例——黑马程序员pink老师\思路讲解\完整源代码

    本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家 如有错误,欢迎指出.如有侵权,联系删除 文章目录 1. 案例准备工作 2 ...

  5. B站黑马程序员pink老师讲的JavaScript代码

    B站黑马程序员pink讲课的JavaScript代码(部分代码) <!DOCTYPE html> <html lang="en"> <head> ...

  6. 跟着黑马程序员pink老师学习的笔记及小破站学习的笔记

    网页 1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合 2.什么是网页? 网页是网站中的一"页",通常是HTML格式的文件,它要通过浏览器来 ...

  7. CSS 学习笔记总结(借鉴黑马程序员pink老师前端入门)

    1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...

  8. 黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(一)

    一.计算机编程基础 编程语言 编程语言与标记语言的区别 编程语言 有很强的逻辑和行为能力,有if else等具有逻辑性和行为能力的指令,主动 标记语言(html)不用于向计算机发出指令,常用于格式化和 ...

  9. 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(权重,盒子模型)

    一.基础班学习路线 三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性 行高的继承 CSS三大特性之优先级 CSS权重的叠加 十个在最后累加会变成0,0,0,10: ...

  10. 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(复合选择器,元素显示模式,背景)

    一.基础班学习路线 三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...

最新文章

  1. 用php获取本周,上周,本月,上月,本季度日期的代码
  2. 【设计干货】Facebook设计APP时的14个必考题
  3. java关键字及其作用解释_java 常见关键字及其作用
  4. Linux如何访问mmio空间,一文读懂Linux下如何访问I/O端口和I/O内存
  5. 电子设计大赛作品_第十四届电子设计大赛圆满结束!
  6. 行为设计模式 - 状态设计模式
  7. HDU 1002 大整数
  8. 计算机组成原理脱机运算器实验数据,实验三:脱机运算器实验报告.pdf
  9. 对自己深度学习方向的论文有idea,可是工程实践能力跟不上,实验搞不定怎么办?...
  10. redis之消息订阅发布
  11. 公司禁用U盘的方法总结
  12. Stencil计算GPU性能建模
  13. 链表问题归纳总结--C和C++
  14. (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航...
  15. 字节跳动推出在线医疗App“小荷” 品牌域名或要另辟蹊径?
  16. 0基础如何学习安卓开发
  17. 计算机网络的通信方式
  18. 局域网arp攻击_MAC与IP不得不说的故事--深入ARP工作原理
  19. MindFusion.Diagramming iOS 应用程序
  20. 你也可以成为VTuber

热门文章

  1. 【转】一文读懂数据分析平台的架构与设计
  2. JCO_(配置连接池)
  3. 数据库优化之统计分析实战篇
  4. abap中取内表中每一类中的一行的方法
  5. SAP概念之利润中心
  6. ABAP程序系统字段中英文详解
  7. 检查SELECTION-SCREEN 上面输入的参数是否合适
  8. 架构师接龙:百姓网潘晓良VS. 盛大许式伟
  9. c++ 字符串数组长度排序_C指针和字符串数组
  10. caliop 数据可视化_星载激光雷达CALIOP数据处理算法概述