08-渐变&过渡动画&变换 参考资料: 免费在线渐变色配色工具:https://uigradients.com/ 1. 渐变 gradientCSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 渐变效果的元素在放大时看起来效果更好,因为渐变是浏览器生成的。 1.1 线性渐变background: linear-gradient(...) 1background: linear-gradi 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #渐变 #过渡 #变换
09-关键帧动画&3D 参考资料: 动画库:https://www.dowebok.com/ animatecss动画库效果和使用方法:https://animatecss.node.org.cn/ 同上:https://animate.style/ github地址:https://github.com/animate-css/animate.css css动画库cdn:https://cdnjs.clou 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #关键帧动画 #3D
07-移动端rem布局 背景:设备缩放比 window.devicePixelRatio ,比如拿到设计稿是750px,设备缩放比是2.0,那么设备像素设置就应该为 375px。 1. rem等比例缩放 px: 50px,固定像素值 em:相对单位,相对于父元素的字体大小的倍数。width: 2em; rem:相对单位,相对于根元素(html)字体大小的倍数。width: 10rem; 示例: 1234567 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #rem布局
10-网格布局 1. 概念Grid 网格 含义:将网页划分成一个个网格,可以任意组合不同的风格,作出各种各样的布局 相同:Grid布局 与 Flex 布局都可以指定容器内部多个项目的位置。 不同: Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局。 Grid 布局则是将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以看作是二维布局。 1.1 容器和项目 容器:一个案例中最 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #关键帧动画 #3D
01-HTTP协议 协议:两个设备进行数据交换的约定。HTTP协议:超文本(字符/音频/视频/图片)传输协议,基于TCP协议。 1. HTTP 请求报文(图)HTTP 请求数据 - 抓包中核心内容:HTTP 请求报文的原始细节: 2. HTTP 响应报文(图)HTTP 响应数据 - 抓包中的核心内容:HTTP 响应报文的原始细节: 3. HTTP 请求-响应执行流程 发起请求(GET 2017-04-28 04_大前端 > 06_HTTP #HTTP #协议
02-HTTPS协议 HTTPS协议工作流程 443 端口 Client发起一个HTTPS(https:/demo.linianhui.dev)的请求,根据 RFC2818 的规定,Client知道需要连接Server的443(默认)端口。 Server把事先配置好的公钥证书(public key certificate)返回给客户端。 Client验证公钥证书:比如是否在有效期内,证书的用途是不是匹 2017-04-28 04_大前端 > 06_HTTP #协议 #HTTPS
03-CSS3特殊样式&字体图标 1. 阴影1.1 文本阴影text-shadow 设置文本的阴影。 第一个参数,水平方向阴影位移 第二个参数,垂直方向阴影位移 第三个参数,阴影模糊程度 第四个参数,阴影颜色 12345678910111213141516171819<!DOCTYPE html><html lang="en"><head> <meta ch 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #阴影 #字体
13-Sass教程 参考资料: sass官网:https://sass-lang.com.cn/ sass教程:https://sass-lang.com.cn/documentation/ 1. 介绍sass最成熟、最稳定、最强大的专业级css扩展语言 sass是css的预编译工具 更优雅的书写css 需要转换成css才能让浏览器认识和运行 安装一个插件:Easy Sass 可以自动将.scss的样式代 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #sass
99-CSS样式案例集锦 布局两栏布局1 效果: 三栏布局-横1 效果: 三栏布局-竖1 效果: 多栏布局1 效果: 多列布局-图片瀑布显示1 效果: 响应式布局1 效果: 自定义网格布局1 效果: 图文混排1 效果: 文字溢出显示省略号1 效果: 二级菜单1 效果: 六图定位展示1 效果: 菜单中的三角形折叠效果1 效果: 精灵图/雪碧图1 效果: 搜索框1 效果: 移动端金刚区1 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3
01-二分查找 二分查找 - 升降序逻辑处理又叫折半查找,要求待查找的序列有序。默认升序逻辑说明:每次取中间位置的值与待查关键字比较,如果中间位置的值比待查关键字大,则在前半部分循环这个查找的过程,如果中间位置的值比待查关键字小,则在后半部分循环这个查找的过程。直到查找到了为止,否则序列中没有待查的关键字。 示例代码:(严谨的判断、有序,升,降序的处理) 123456789101112131415161718 2017-04-28 03_数据结构 > 02_查找 #算法 #二分查找