前端
文章平均质量分 69
姜皓
胸藏文墨怀若谷 腹有诗书气自华
展开
-
项目目录标准结构
(学习自慕课网中《所向披靡的响应式开发》课程中)一.如何组织项目目录结构1.约定优于配置2.约定代码结构或命名规范来减少配置数量(没有最好的组织方式,只有合适的组织方式)样式放入CSS文件下,main.css是通用样式,normalize.css是引用样式,login是的登录样式。脚本放入js文件下,main.js是通用脚本,vendor文件夹来存放第三方库和框架;压缩版可加上min前缀。othe...原创 2018-05-04 10:41:46 · 1894 阅读 · 0 评论 -
JavaScript 基础 --- (数据类型/循环/条件)
一、js 输出1.window.alert() 警告框2.document.write() 写到 HTML 文档中3.innerHTML 写到 HTML 元素 4.console.log() 写到浏览器的控制台二、js 语句与注释1. ; (var a = 1;) ;表示语句的结尾 2. 语句标识符:var / if / for 等...原创 2018-06-19 19:09:47 · 238 阅读 · 0 评论 -
JavaScript 基础--- (运算符/数组/函数/变量)
基本概念:1.javascript的组成:三部分组成(1)ECMAScript - ECMA : 欧洲计算机协会 - 有ECMA组织制定的js的语法,语句.....(2)BOM: - broswer object model: 浏览器对象模型(3)DOM: - document object model:文档对象模型2. ...原创 2018-07-30 11:56:25 · 190 阅读 · 0 评论 -
JavaScript 基础--- (对象)
1、js的String对象 ** 创建String对象 *** var str = "abc"; ** 方法和属性(文档) *** 属性 length:字符串的长度 *** 方法 (1)与html相关的方法 - bold():加粗 - fontcolor()...原创 2018-07-30 20:05:49 · 214 阅读 · 0 评论 -
初识 Vue(22)---(Vue中CSS动画原理)
Vue中CSS动画原理动画流程:(动画从无到有)1.在动画即将被执行的一瞬间,会往内部的 div 添加 两个 class 名字,分别是 fade-enter 和 fade-enter-active;2.当动画第一帧执行结束后,transition 标签分析知道这个 div 的动画效果,会在动画第二帧时做两件事:将之前添加的 fade-enter这个 class 标签去掉,再增加 f...原创 2018-07-31 21:04:59 · 812 阅读 · 0 评论 -
初识 Vue(24)---(Vue 中同时使用过渡和动画)
Vue 中同时使用过渡和动画在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客在上篇博客中,完成了 引入 animate.css 库 且实现动画的效果,但发现,在刚开始时元素并没有动画效果若想让元素刚开始时也具备动画效果,则<!DOCTYPE html><html lang="en"><head> <met...原创 2018-07-31 22:21:51 · 319 阅读 · 0 评论 -
JavaScript 基础--- (经典案例)
案例一:全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 - checked=false:不选中 * 创建一个页面 ** 复选框和按钮 - 四个复选框表示爱好 - 还有一个复选框操作 全选和选不选,也有一...原创 2018-08-01 14:17:13 · 21676 阅读 · 8 评论 -
JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式创建正则表达式:方法一: var reg = /pattern/;方法二:var reg = new RegExp('pattern');RegExp 对象的常用方法:示例:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...原创 2018-08-01 20:52:02 · 441 阅读 · 0 评论 -
前端笔试题(01)
问题一、难度系数: ★★★★相关技术点: 1). 引用变量赋值 2). 内存分析 3). 函数调用传参 4). 运算符的优先级预热1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_百度&l原创 2018-08-18 22:13:06 · 2179 阅读 · 0 评论 -
前端笔试题(02)
问题一1. 难度系数: ★★★2. 技术点: 1). 变量提升 2). 函数提升 3). 预处理预热一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_阿里1</title>原创 2018-08-18 23:27:24 · 266 阅读 · 0 评论 -
初识 Vue(01)---(输出 Hello World)
如何输出原生 JS 使用 Vue.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src =原创 2018-06-24 11:41:39 · 1361 阅读 · 0 评论 -
JavaScript 基础---( window 总结)
window 概念:1.表示浏览器窗口 2.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员3.全局变量是 window 对象的属性4.全局函数是 window 对象的方法一、方法:实例1(新建窗口)运行:实例2 (更改窗口大小) 实例3(移动窗口)(700,500 是 x 轴 和 Y 轴)实...原创 2018-06-22 22:56:55 · 217 阅读 · 0 评论 -
五分钟上手 Markdown
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。------百度百科话不多说,开始发车!总共10个标签,五分钟足矣,毕竟基本没难度。https://dillinger.io/ 这是一个Markdown的在线编辑器,可以立马体验Markdown带给我们的便利。1.#为标题,类比<h1>标签。#——######对...原创 2018-05-04 10:46:21 · 156 阅读 · 0 评论 -
JS(原型和原型链)
(学习自慕课网《前端JavaScript 面试技巧》JS(原型和原型链)题目1.如何准确判断一个变量是数组类型使用 instanceof 方法题目2.写一个原型链继承的例子实例:封装 DOM 查询定义构造函数 Elem,属性封装成 id 打印出所有的 html 将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’...原创 2018-05-10 22:28:47 · 39745 阅读 · 9 评论 -
CSS 布局小结
常见布局方式布局基础:1.盒子模型2.display:确定元素显示类型(block、inline、inline-block)3.position:确定元素位置(static/静态(按文档流挨着布局)、relative/相对(以元素本身做参考点,不改变其占据的空间)、absolute/绝对(脱离文档流,不会对其他元素布局产生影响,相对于最近的absolute或relative属性的元素)、fixed...原创 2018-05-19 23:35:26 · 214 阅读 · 0 评论 -
HTML(标签)
HTML标签分类1.块级标签 :每个块级标签独自占一行 h1--h6 标题 p 段落 hr : 水平线 ol li 有序列表 ul li : 无序列表 div : 2.行级标签 : 按行逐一显示,不会自动换行 img ,a,b,i,em,strong,small,br,span img 图片 src:图片地址 alt:提示文字 a:超链接 属性 href : 要连...原创 2018-05-20 15:13:08 · 409 阅读 · 0 评论 -
CSS效果小结
效果属性1.box-shadow(盒子阴影)示例加上 box-shadow内阴影复杂例子阴影的形状跟原来的形状是一样的 结果:box-shadow 作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果 2.text-shadow(文本阴影)作用:1.立体感 2.印刷品质感(边缘有模糊效果)比较:3.border-radius圆角矩形圆形半圆/扇形只有左上角,...原创 2018-05-21 09:29:44 · 377 阅读 · 0 评论 -
CSS动画小结
CSS动画原理:1.画面之间变化 2.视觉暂留作用常见问题1.CSS 动画的实现方式有几种1.transition 2. keyframes(animation)2.过渡动画和关键帧动画的区别1.过渡动画需要状态变化 2.关键帧动画不需要状态变化 3.关键帧动画能控制更精细3.如何使用逐帧动画1.使用关键帧动画 2.去掉补间动画(steps)4.CSS动画性能1.和 JS 动画很难比较出谁更...原创 2018-05-21 17:38:34 · 198 阅读 · 0 评论 -
CSS预处理器(less 和 sass)
CSS预处理器1.基于CSS的另一种语言2.通过工具编译成CSS3.添加了很多CSS不具备的特性4.能提升CSS文件的组织提供功能:1.嵌套 反映层级和约束 2.变量和计算,减少重复戴拿 3.Extend 和 Mixin 代码片段4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化知识点:1.less(嵌套)body{ padding:0; margin:0;}...原创 2018-05-23 18:49:02 · 884 阅读 · 0 评论 -
Angular Vue React 框架中的 CSS
框架中的 CSSAngular Vue React 三大框架Angular Vue 内置样式集成React 一些业界实践Angular Angular . js (1.x):没有样式集成能力Angular (2+):提供了样式封装能力 2.与组件深度集成ShadowDOM(谈一谈神奇的ShadowDOM):1.逻辑上一个DOM 2.结构上存在子集结构Scoped CSS (Scoped CSS...原创 2018-05-24 11:44:01 · 205 阅读 · 0 评论 -
JavaScript 基础--- (DOM 总结)
一、DOM 树模型二、获得元素三、 DOM HTML1.修改 HTML 内容 输出:helloWorld2.修改 HTML 属性四、 DOM CSS修改样式输出:四、 DOM 事件不同写法实例1实例2实例3五、 DOM 节点添加和删除节点实例输出:...原创 2018-06-20 23:14:29 · 240 阅读 · 0 评论 -
前端笔试题(03)
问题一1. 难度系数: ★★★2. 技术点: 1). this 2). 闭包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08_阿里3</title></head&a原创 2018-08-19 00:05:21 · 496 阅读 · 2 评论