03 2022 档案
摘要：制作最上面的 注意图片和文字默认是基线对齐的，如果想要垂直居中对齐的话。那么需要添加vertical-align:middle的属性 body { width: 100%; min-width: 320px; max-width: 640px; /* body居中 */ margin: 0 auto
阅读全文
摘要：对于行内块（比如说图片）元素如果设置了text-align 和line-height 出现了不居中的情况下，因为图片和文字是基线对齐的。 如下图所示： 解决方案：我们需要设置图片的vertical-align属性，将这个属性设置为vertical-align:middle; 通过上边的例子，我们可以
阅读全文
摘要：body { width: 100%; min-width: 320px; max-width: 640px; /* body居中 */ margin: 0 auto; /* 移动端字体14px */ font-size:14px; /* 设置字体类型 */ font-family: -apple-
阅读全文
摘要：①初始化视口以及引入normalize.css文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置
阅读全文
摘要：移动端布局和我们以前学习的PC端有所区别： 单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 响应式页面兼容移动端（其次） 媒体查询 bootstrap 流式布局 流式布局，就是使用百分比布局，也称为非固定像素布局。 通过合资
阅读全文
摘要：移动端主流方案 1、单独制作移动端页面（主流） 京东、淘宝 苏宁易购手机版 2、响应式页面兼容移动端（其次） 三星手机官网 通过判断设备，如果是移动端设备打开，则跳到移动端页面。 移动端技术解决方案： 移动端浏览器基本以webkit内核为主，因此我们需要考虑webkit兼容性问题。 浏览器私有前缀考
阅读全文
摘要：background-size属性规定背景图像的尺寸 background-size:背景图片宽度 背景图片的高度； 可取如下的值： 例：我们有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是 需要准备2倍，100*100。我们需要把这个图片缩放一半 50*50，我们使用backgro
阅读全文
摘要：物理像素和物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是产商在出厂时就设置好了，比如苹果6\7\8 是750*133 我们开发时候的1px不是一定等于1个物理像素的。PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同 1px可以显示的物理像素点的个数，称为物理像素比
阅读全文
摘要：视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起的PC端页面在手机上显示的问题 IOS，Android基本都将这个视口分辨率设置为980px，所
阅读全文
摘要：今天看到京东的图片格式使用的是webp 然后研究了一下webp到底是什么样的图片格式，以后自己学习的时候，可以用起来 具体的内容可以看链接：https://www.jianshu.com/p/cd6f21e1cfdd
阅读全文
摘要：知道移动问的开发现状 写出标准的viewport 会移动web的调试方法 说出移动端常见的布局方案 能描述流式布局 独立完成移动端布局 需要的知识：移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见布局、移动端开发之流式布局、移动端首页制作 移动端调试方法： Chrome DevT
阅读全文
摘要：控制子元素是否开启三维立体环境 transform-style:flat 子元素不开启3D立体空间 默认的 transform-style:perserve-3d 子元素开启立体空间 代码写给父级，但是影响的是子盒子 这个属性和重要，写3D的时候会用到 实现如下效果 思路：两个盒子，相对于父元素进行
阅读全文
摘要：透视 perspective 在2D平面产生近大远小视觉立体，但是只是效果二维的 如果想要再网页产生3D效果需要透视（理解成3D物体投影在2D平面内） 模拟人类的视觉位置，可认为安排一只眼睛去看 透视我们也称之为视距：视距就是人的眼睛到屏幕的距离 距离视觉点越近的电脑平面成像越大，越远成像越小 透视
阅读全文
摘要：3D是有三维坐标系的 三维坐标系其实就是立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意：y下面是正值，上面是负值 z轴：垂直屏幕 注意：z往外是正值，往里是负值 主要学习知识 3D位移：translate3d(x,y,z) 3D旋转：r
阅读全文
摘要：实现下图的功能 思路： 利用动画拖动背景图片，动画设置步长，这种情况要特别注意动画在100%的时候最后落的位置，我这个代码就是100%最后设置为right bottom没有到达预期的效果，最后设置-1600px才可以 <!DOCTYPE html> <html lang="en"> <head> <
阅读全文
摘要：动画的速度曲线如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要：如图所示：显示如下功能： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
阅读全文
摘要：实现如上功能，需要分为五个状态，状态如下： 代码如下； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
阅读全文
摘要：动画 animation是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 动画的基本使用 先定义动画 再使用（调用）动画 用keyframes定义动画（类似定义类选择器） @key
阅读全文
摘要：如下效果的实现是通过scale来完成的 使用hover配合scale以及transition过渡来实现 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
阅读全文
摘要：2D转换之缩放scale 顾明思义，scale可以放大和缩小 语法： transform:scale(x,y); 注意： scale中的x和y以逗号分割 transform:scale(1,1) 宽和高都放大一倍 transform:scale(2,2) 宽和高都放大了2倍 transform:sc
阅读全文
摘要：可以设置元素转换的中心点 语法：transform-origin:x y; 注意后面的参数x和y用空格隔开 x y默认转换的中心点是元素的中心点（50% 50%） 还可以给x y 设置像素 或则 方位名词（top bottom left right center） 利用旋转做出如下内容： 思路：一个
阅读全文
摘要：transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform） 移动：transform 旋转：rotate 缩放：scale 2D转换是改变标签在二位平面上的位置和形状的一种技术 2D转换之移动 translate 2D移动是2D转换里面的一种功
阅读全文
摘要：audio标签 无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。 视频如下： HTML5新增input表单如下： H5新增表单属性
阅读全文
摘要：导读 1、能够写出sessionStorage数据的存储以及获取 2、能够写出localStorage数据的存储以及获取 3、能够写出它们两者的区别 本地存储的特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大、sessionStorage约5M、localS
阅读全文
摘要：// 移动端的浏览器兼容性比较好，不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。 // 比如触屏事件touch（也称触摸事件），Android和IOS都有 // touch对象代表一个触摸点。触摸点可能是一跟手指，也可以是一根触摸笔。触屏事件可能影响
阅读全文
摘要：//用JS实现轮播图：// 主要功能 /* 1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 2、点击右按钮依次，图片往左播放一张，依次类推，左按钮同理 3、图片播放的时候，下面的小圆圈跟着一起变化 4、点击小圆圈，可以播放相应图片 5、鼠标不经过轮播图，轮播图也会自动播放图片 6、鼠标经过，
阅读全文
