随笔分类 - HTML/CSS
摘要：一、简介 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递 2、postMessage(data,origin)方法接受两个参数： （1）data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型
阅读全文
摘要：一、注释 ①工具：利用VS code的插件easyless，实时预览 ②行注释不会编译，块注释可以编译 ③最好在文件的开头加上@charset 'UTF-8'; 防止出现编码问题 二、变量 ①LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单 ②定义变量必须使用@
阅读全文
摘要：一、less环境安装 ①首先需要在电脑上安装nodejs，一般会内置npm，利用以下命令可以检测： ②利用npm在线安装less，运行 npm install –g less ③查看是否安装成功，Lessc –v 查看版本 二、less简介 ①CSS（层叠样式表）是一门历史悠久的标记性语言，同 HT
阅读全文
摘要：一、轮播图组件模板（官方文档） 二、分析轮播图组件结构 ①carousel 轮播图的模块， slide是否加上滑动效果，data-ride="carousel" 初始化轮播图属性 ②data-target="#carousel-example-generic" 控制目标轮播图，data-slide-
阅读全文
摘要：一、导航条模板（官方文档） 二、分析导航条模板结构 ①navbar导航模块 ，类navbar-default 表示默认样式(灰白)，还可以是navbar-inverse（反色，黑白），两种主题 ②container-fluid 表示的是导航的内容容器是流式布局，如果设置成container就是响应式
阅读全文
摘要：一、概念： ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局，网格状布局，通过一系列的行（row）与列（column）创建页面布局，你的内容就可以放入创建好的布局中。 二、行
阅读全文
摘要：一、概述 ①当下最流行的前端UI框架（有预制界面组件），组件简洁大方，代码规范精简，界面自定义性强，可以有效提高web开发效率 ②有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单，提高了开发的效率。 ③虽然界面组件样式已经定义好了，但是
阅读全文
摘要：一、多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上，用逗号隔开，然后用background-position把他们定位到你想要的位置 二、图片起始位置background-origin ①background-origin允许我
阅读全文
摘要：一、描述：圣杯布局与双飞翼布局针对的都是三列，左右栏固定，中间栏部分自适应的网页布局 二、圣杯布局 ①html代码中middle部分首先要放在container的最前部分，然后是left,right ②将三者都 float:left , 再加上一个position:relative (因为相对定位后
阅读全文
摘要：一、问题：一个盒子里包含一张图片，盒子不设大小，图片出现下间隙 二、解决办法 ①设置父对象的文字大小为0px ②将图片转换为块级对像 ③设置图片的垂直对齐方式（任选一种） ④改变父对象的属性 ⑤设置图片的浮动属性
阅读全文
摘要：一、绘制图片 ①加载图片 ②三个参数：drawImage（img，x，y） ③五个参数：drawImage（img，x，y，w，h） ④九个参数：drawImage（img，x，y，w，h，x1，y1，w1，h1） 二、帧动画 ①首先需要一张精灵图，里面有一组可以连续起来做动画的人或者物 ②可以动态
阅读全文
摘要：一、矩形绘制 ①rect（x，y，w，h）绘制矩形路径，不是独立路径，起点是x，y，宽是w，高是h ②strokeRect（x，y，w，h）绘制描边矩形，有独立路径 ③fillRect（x，y，w，h）绘制填充矩形，有独立路径 ④clear（x，y，w，h）擦除矩形区域 ⑤绘制一个颜色渐变的矩形 二
阅读全文
摘要：一、定义 canvas最早是由Apple引入Webkit的，<canvas>元素包含于HTML5中 HTML5的canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，可以控制其每一像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 二、基本使用（步骤） ①创建canv
阅读全文
摘要：一、离线应用cache manifes文件 HTML5中构建了一个离线（无网络状态）应用，只需创建一个cache manifest文件 可以配置需要的缓存的资源，网络无连接应用任然可以使用，本地读取缓存资源，有效提升访问速度，可以增强用户体验，并且减少请求，缓解服务器的负担 缓存清单是一个普通的文本
阅读全文
摘要：一、定义 input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口，文字表示对文件的描述（大部分情况下为文件名）；file类型的input会有files属性，保存着文件的相关信息。 FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
阅读全文
摘要：一、定义 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。Safari 5.1.2不支持拖动 二、使用 设置元素为
阅读全文
摘要：一、背景 在HTML规范中，增加了获取用户地理信息的API，这样使得可以基于用户位置开发互联网应用，即基于位置服务 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支
阅读全文
摘要：一、定义 随着互联网的快速发展,基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案 本地存储设置读取方便，容量较大，sessionStorage约5M，localStorage约20M，但是只能存储字符串，但是可以将对
阅读全文
摘要：一、history对象 ①history.back（）移动到上一个访问页面，等同于浏览器的后退键。 ②history.forward（）动到下一个访问页面，等同于浏览器的前进键。 ③history.go（）接受一个整数作为参数，移动到该整数指定的页面,相对当前，跳出多少条记录，前进参数为正，后退参数
阅读全文
摘要：一、自定义视频播放器的主要API（更多可以查看参考手册） ①属性 controls：如果出现该属性，则向用户显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量 autoplay：如果出现该属性，则视频在就绪后马上播放。如果不设置auto
阅读全文
浙公网安备 33010602011771号