前端
文章平均质量分 52
oiaa
前端工程师
展开
-
Font Awesome介绍
Font Awesome 是一套完美的图标字体库及CSS架构,主要目的是和 Bootstrap 搭配使用。Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。Font Awesome已经为你准备了将近500个常用icon图标(还在不断更新),能大能小,能随便修改颜色,完全开源,完全免费。可以让程...原创 2018-10-06 16:01:20 · 2787 阅读 · 0 评论 -
了解CSS中的@import
我们知道,css文件引入方式有两种:1. HTML中使用link标签<link rel="stylesheet" href="style.css" />CSS中@import@import "style.css";第一种方式最为常见最为主流,第二种方式则很少见到有人这么写,因而也常被开发工程师所忽略。这篇文章就详细解剖之。语法@import语法有两种:...原创 2018-10-06 16:15:22 · 20654 阅读 · 1 评论 -
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
简单来说meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta name="viewport" content="width=device-width,initial-scale=1.0"> content属性值 : width:可视区域的宽度,值可为数字或关键...转载 2018-10-06 16:32:26 · 458 阅读 · 0 评论 -
什么是框架
框架(Framework)是一个框子——指其约束性,也是一个架子——指其支撑性。IT语境中的框架,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构。在此结构上可以根据具体问题扩展、安插更多的组成部分,从而更迅速和方便地构建完整的解决问题的方案。(1)框架本身一般不完整到可以解决特定问题(2)框架天生就是为扩展而设计的(3)框架里面可以为后续扩展的组件提供很多辅助性、支撑性的方...原创 2018-10-06 17:12:22 · 162 阅读 · 0 评论 -
pug使用方法
安装npm install pug-cli -g 全局安装开始监听pug -w ./ -o ./html -P-w 开始监听./html 放入文件夹-P 规范代码 基j基本语法 id 和 class 标签中的属性doctype htmlhtml head body input(typ...原创 2018-10-13 14:48:46 · 2789 阅读 · 1 评论 -
position属性( absolute | relative | static | fixed )详解
一,什么是文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流,分别是:浮动、绝对定位和相对定位。二,定位分类静态定位(static)html元素默认的定位方式,top, right, bottom, left 和 z-index 属性无效相对定位(relative) (1)相对定位相对的是它原本在文档流中...原创 2018-10-07 12:29:41 · 242 阅读 · 0 评论 -
css中display解析
常见属性值(1)inline(2)block(3)inline-block(4)none(5)flex(6)table行级元素特点(1)和其它元素在同一行上(2)元素的高度、宽度、行高及顶部和底部边距不可设置(3)元素的宽度就是它包含的文字或图片的宽度,不可改变块级元素特点(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行(2)元素的高...原创 2018-10-07 13:40:49 · 621 阅读 · 0 评论 -
什么是浏览器内核
定义(1)内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎(2)它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机(3)浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同(4)JS 引擎则是解析 Javascr...原创 2018-10-07 14:17:05 · 9138 阅读 · 0 评论 -
sass用法
一、什么是SASSSASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。假定...转载 2018-10-13 20:25:36 · 83 阅读 · 0 评论 -
css弹性盒子 | flex布局讲解
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地...原创 2018-10-07 18:52:02 · 152 阅读 · 0 评论 -
css弹性盒子 | flex布局讲解 | 实例
今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看...原创 2018-10-07 18:53:03 · 3070 阅读 · 0 评论 -
Ajax请求详解
ajax简介:Ajax 的全称是Asynchronous JavaScript and XML,意思是:异步 JavaScript 和 XML Ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言 可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。 AJAX可以无需刷新页面而与服务器端进行通信。 允许你根据用户事件来更新部分页面内容。Ajax工...原创 2018-10-09 10:23:25 · 1176 阅读 · 0 评论 -
box-sizing布局
盒子模型关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如: padding + border + width= 盒子的宽度 padding+ border + height = 盒子的高度 这看起来并不是那么直观...原创 2018-10-16 09:46:59 · 83 阅读 · 0 评论 -
-webkit-appearance样式
说明:改变按钮和其他控件的外观,使其类似于原生控件。-webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。语法:-webkit-appearance:none | button | button-bevel .....原创 2018-10-16 10:10:10 · 7110 阅读 · 0 评论 -
random quote machine | 随机格言 | fcc项目
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-10-09 19:30:11 · 313 阅读 · 0 评论 -
HTML5 Geolocation(地理定位)| 参考资料
http://www.runoob.com/html/html5-geolocation.htmlhttps://blog.csdn.net/DeepLies/article/details/77582307https://www.ibm.com/developerworks/cn/web/1208_wangjian_html5geo/#N10077https://www.renfei...原创 2018-10-10 20:15:54 · 144 阅读 · 0 评论 -
简单版-本地天气
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-10-10 21:13:59 · 150 阅读 · 0 评论 -
jquery实现--自定义视频播放器
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2018-10-22 18:21:36 · 2846 阅读 · 1 评论 -
wiki viewer 仿版
参考:https://www.jianshu.com/p/d48ae4ca707e项目简介根据用户输入的文本检索维基百科的条目,显示前若干条结果,结果包含词条标题和内容摘要。技术点利用wikipedia的API检索维基百科数据库, API文档地址是http://www.mediawiki.org/wiki/API:Main_page API在线实验地址:https://en.w...原创 2018-10-17 19:30:51 · 653 阅读 · 0 评论 -
去除表单输入类型为数字时出现的上下箭头
<input type="number">--------------------------------------------------------------input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none;}原创 2018-10-23 17:55:08 · 513 阅读 · 0 评论 -
js学习杂记
1.函数内的代码可访问:参数、局部变量、父函数作用域变量、全局变量2.作用域链:从内向外3.var声明的全局变量作为window对象的属性4.每个函数都有闭包,每个函数都有作用域5.闭包就是能够读取其他函数内部变量的函数;return 一个函数。6.闭包应用:形成一个私有变量,并保存它的状态7.闭包不可被垃圾回收8.立即执行函数IIFE,可以创建一个私有作用域来保护变量...原创 2018-11-01 16:34:12 · 85 阅读 · 0 评论 -
网站无无障碍性Accessibility
良好的无障碍性(简称“a11y”)对确保所有用户都能访问网站和应用中的内容来说很关键。在开发流程的初始阶段就考虑到无障碍性将确保最终产品更加完善,并适合更多用户使用。注意: 我们经常将单词“accessibility”简称为“a11y”,因为在单词“Accessibility”中的“A”和”Y”之间有 11 个字母。有时,你还会见到其他形式的简称,例如“internationalization...原创 2018-11-06 18:25:04 · 648 阅读 · 0 评论 -
ES6语法学习杂记
提升是浏览器解析 JavaScript 的结果。本质上,在执行任何 JavaScript 代码之前,所有变量都会被“提升”,也就是提升到函数作用域的顶部 let 和 const它们的作用域是到块,而不是函数 使用 var 时,变量要么为全局作用域,要么为本地作用域,也就是整个函数作用域 使用 let 声明的变量可以重新赋值,但是不能在同一作用域内重新声明 ...原创 2018-11-02 19:21:41 · 156 阅读 · 0 评论 -
ES6函数学习杂记
将现有的"普通"函数转换为箭头函数只需几步:删掉关键字 function -》 删掉圆括号 -》 删掉左右花括号 -》 删掉关键字 return -》 删掉分号 -》 在参数列表和函数主体之间添加一个箭头(=>) 普通函数可以是函数声明或函数表达式,但是箭头函数始终是表达式。因此仅在表达式有效时才能使用:存储在变量中、当做参数传递给函数、存储在对象的属性中 如...原创 2018-11-04 21:25:02 · 94 阅读 · 0 评论 -
ES6内置功能杂记
Symbol 是一种独特的且不可变的数据类型,经常用来标识对象属性 可迭代协议用来定义和自定义对象的迭代行为。也就是说在 ES6 中,你可以灵活地指定循环访问对象中的值的方式 迭代器方法(可通过常量 [Symbol.iterator] 获得)是一个无参数的函数,返回的是迭代器对象。迭代器对象是遵守迭代器协议的对象 迭代器协议用来定义对象生成一系列值的标准方式。实际...原创 2018-11-05 15:12:59 · 110 阅读 · 0 评论 -
Proxy
要创建 Proxy(代理)对象,我们使用 Proxy 构造函数 new Proxy();。Proxy 构造函数接收两个项目:它将要代理的对象 包含将为被代理对象处理的方法列表的对象第二个对象叫做处理器.Proxy 内的一个传递创建 Proxy 的最简单方式是提供对象和空的 handler(处理器)对象。var richard = {status: 'looking for w...原创 2018-11-05 15:59:22 · 125 阅读 · 0 评论 -
ES6-生成器
每当函数被调用时,JavaScript 引擎就会在函数顶部启动,并运行每行代码,直到到达底部。无法中途停止运行代码,并稍后重新开始。一直都是这种“运行到结束”的工作方式:function getEmployee() { console.log('the function has started'); const names = ['Amanda', 'Diego', 'Fa...原创 2018-11-05 16:23:20 · 92 阅读 · 0 评论 -
JavaScript 转译器 Babel
最热门的 JavaScript 转译器是 Babel / 英。Babel 的原始名称更具描述性——6to5。这是因为,一开始 Babel 专门将 ES6 代码转换为 ES5 代码,但是现在 Babel 具有更多功能了。它可以将 ES6 转换为 ES5、将 JSX 转换为 JavaScript,并将 Flow 转换为 JavaScript。在计算机上查看转译代码之前,我们快速做个测验,直接在...原创 2018-11-05 20:31:59 · 797 阅读 · 0 评论 -
移动端meta标签
设置这些meta标签的主要作用是描述网页,便于搜索引擎抓取;兼容浏览器,适配移动端;开启或者是禁止一些默认的样式和默认的事件等等。1、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />作用:IE = edge告诉IE使用最新的引擎渲染网页,chrome = 1则可以激活Chrome Frame ....原创 2018-11-11 15:34:51 · 2780 阅读 · 0 评论 -
bootstrap笔记
整个bootstrap中分了8大类型:基础样式(统一字号,背景,内外边距),颜色(常用5种:信息提示:蓝色。警告:橙色。报错:红色等),尺寸(4种常用:xs:小于768px。sm:768~992px。md:992~1200px。lg:大于1200px),状态(active高亮,disable,hover,link等),特殊元素(nav标签,button标签),并列元素(li标签,按钮)...原创 2018-11-12 08:34:23 · 336 阅读 · 0 评论 -
CSS命名规范(规则)常用的CSS命名规则
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot ...原创 2018-11-14 19:05:05 · 200 阅读 · 0 评论 -
实现一个事有过期机制的localstorage
不仅能存储字符串,还能存其它类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2018-11-16 19:23:32 · 555 阅读 · 0 评论 -
bootstrap弹出窗口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-05 18:04:36 · 3945 阅读 · 0 评论 -
bootstrap滚动监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-05 18:15:33 · 305 阅读 · 0 评论 -
bootstrap选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-05 18:27:37 · 750 阅读 · 0 评论 -
bootstrap弹出框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-12-05 18:39:03 · 377 阅读 · 0 评论 -
水平垂直居中大全
absolute+负margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2019-02-28 15:19:06 · 128 阅读 · 0 评论 -
面试:css盒模型
面试官追问方式路线图:标准模型和ie模型标准模型ie模型css如何设置这两种模型box-sizing: conten-box 默认标准盒模型box-sizing: border-box 设置为ie盒模型js如何设置盒模型的宽和高dom.style.width / height只能取到内联的样式,取不到外联和style节点dom.cruu...原创 2019-03-01 13:58:16 · 125 阅读 · 0 评论 -
面试:DOM事件
常考问题DOM事件的级别 DOM事件模型。DOM事件模型是什么? DOM事件流 描述DOM事件捕获的具体流程 Event对象的常见应用 自定义事件事件级别dom1标准制定的时候没有涉及事件。dom3中增加了许多事件类型,鼠标键盘等等。事件模型捕获、冒泡事件流定义:事件流所描述的就是从页面中接受事件的顺序。当点击按钮时,是按钮最外层的父元素先收到事件...原创 2019-03-01 15:19:05 · 215 阅读 · 0 评论 -
原生js实现Ajax && 过程记录
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js realize ajax</title></head><style>#原创 2019-03-05 15:10:55 · 165 阅读 · 0 评论