H5C3移动Web网页开发
文章平均质量分 95
W蘭
这个作者很懒,什么都没留下…
展开
-
4.HTML5新特性:拖拽API与本地数据库
``本地文件介绍:通过使用在 HTML5 中加入到 DOM 的 File API,使在web内容中让用户选择本地文件然后读取这些文件的内容。概念:FileReader接口 主要是用来把文件读入内存,并且读取文件中的数据,fileReader接口提供异步API在学习FileReader接口之前我们先来了解下如何通过<input>元素获取单个/多个文件单个文件<input type="file" id="input"><script>// 获取in原创 2021-09-05 22:53:55 · 1012 阅读 · 3 评论 -
2.CSS Transforms 三维 HTML新增属性
CSS Transforms 三维transform-style概念:该属性设置元素的子元素是位于 3D 空间中还是平面中。可选值:flat: 设置元素的子元素位于该元素的平面中。preserve-3d:示元素的子元素应位于 3D 空间中。<style>.transition-all { transform-style: preserve-3d; background: #f69d3c; border-radius: .75rem; width:原创 2021-09-02 22:32:09 · 283 阅读 · 0 评论 -
1.CSS3 教程-> 多列布局 > image模块 > cssTransition 过渡 > CSS Animations 动画 > Transform二维
CSS3 教程介绍CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到推荐状态,主要原因是被一些次原创 2021-08-31 16:35:31 · 593 阅读 · 0 评论 -
移动web开发之响应式布局、响应式开发 、 Bootstrap前端开发框架 、 Bootstrap栅格系统 、 阿里百秀首页案例
移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:1.2 响应式布局容器响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。父容器版心的尺寸划分平时我们的响应式尺寸划分超小屏幕(手机,小于 768px):设置宽度原创 2021-06-14 20:15:30 · 284 阅读 · 0 评论 -
移动web开发_rem布局、rem 基础、媒体查询、Less 基础 、rem 适配方案、 苏宁首页案例制作
学习目标:能够使用 rem 单位能够使用媒体查询的基本语法能够使用 Less 的基本语法能够使用 Less 中的嵌套能够使用 Less 中的运算能够使用 2 种 rem 适配方案能够独立完成苏宁移动端首页移动web开发之rem布局1.rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换.原创 2021-06-14 15:33:57 · 183 阅读 · 0 评论 -
移动web开发_flex布局-、 flex 布局体验、 flex 布局原理、flex 布局父项常见属性、 flex 布局子项常见属性、携程网首页案例制作
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活原创 2021-06-13 16:22:43 · 167 阅读 · 0 评论 -
移动web开发_流式布局、移动端基础 、视口 、二倍图 、 移动端调试 、 移动端技术解决方案、移动端常见布局
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Web原创 2021-06-13 09:45:47 · 143 阅读 · 0 评论 -
01-H5C3-H5 新增语义化标签、H5 新增多媒体标签、 H5 新增 input 表单、表单属性CSS3、 属性选择器、 CSS3 结构伪类选择器、CSS3 伪元素选择器
学习内容:了解 H5 新变化掌握 H5 新增语义化标签掌握 H5 新增多媒体标签掌握 H5 新增 input 表单、表单属性一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5.原创 2021-06-09 22:19:15 · 185 阅读 · 1 评论 -
02- CSS3 2D转换、 动画 、3D转换、透视perspective的原理 、3D旋转、3D导航案例、旋转木马综合案例、浏览器私有前缀
十四、2D 转换之 translate2D 转换2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scaletranslate 语法x 就是 x 轴上水平移动y 就是 y 轴上水平移动transform: translate(x, y)transform: translateX(n)transfrom: translateY(n)重点知识点2D 的移动主要是指 水平、垂直方向上的移动trans原创 2021-06-12 11:22:25 · 294 阅读 · 0 评论