html5
文章平均质量分 81
weixin_45965632
这个作者很懒,什么都没留下…
展开
-
webpack配置优化
webpack详细配置和优化原创 2023-03-06 20:35:50 · 106 阅读 · 0 评论 -
JAVASCRIPT
DOM常见兼容汇总 //1. 滚动条距顶端的距离 var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop); //2. 滚动条距左端的距离 var scroll_left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft); //3. byClassName //byClassNam原创 2021-04-22 15:41:13 · 67 阅读 · 0 评论 -
js 宿主对象的属性和方法总结
js 宿主对象的属性和方法总结 (1)属性: //height,width; a=document.documentElement.clientHeight; //文档可视高度,由浏览器决定 b=document.documentElement.scrollHeight; //文档可滚动高度,由文档内容决定 c=document.body.clientHeight; //文档内容body体高度,由文档内容决定 d=document.documentElement.scrollTop; //文档滚动高度,由已转载 2020-07-21 15:42:56 · 158 阅读 · 0 评论 -
移动web开发之响应式布局___day07小白到大神
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和原创 2020-07-03 23:42:56 · 109 阅读 · 0 评论 -
移动web开发_rem布局___day06小白到大神
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size:原创 2020-06-30 23:46:25 · 128 阅读 · 0 评论 -
移动web开发_flex布局___day05小白到大神
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活原创 2020-06-30 00:56:29 · 82 阅读 · 0 评论 -
移动web开发_流式布局___day04小白到大神
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。 总结:兼容移动端主流浏览器,处理Web原创 2020-06-28 23:07:44 · 270 阅读 · 0 评论 -
HTML5---CSS3___day03小白到大神
cHTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值 z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值 二、3D 转换 3D 转换知识要点 3D 位移:translate3d(x, y, z) 3D 旋转:rotate3d(x, y, z) 透视:perspctive 3D呈现 tran原创 2020-06-27 21:23:45 · 108 阅读 · 0 评论 -
HTML5---CSS3___day02小白到大神
HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二、三角 代码演示 二、设置元素旋转中心点(transform-origin) transform-origin 基础语法 transform-origin:原创 2020-06-26 16:42:24 · 89 阅读 · 0 评论 -
HTML5---CSS3___day01小白到大神
HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 H原创 2020-06-25 13:49:20 · 117 阅读 · 0 评论