Erosvan-优快云博客

原创 H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影

一、怪异盒模型怪异盒模型 .reddiv { width: 200px; height: 200px; background-color: red; box-sizing: border-box; border: 20px blue solid; padding-left: 50px; /*怪异盒模型

2016-09-24 09:27:53 4050

原创 WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport

一、流式布局流式布局 body { margin: 0; } .reddiv { width: 30%; /* 单位 vw ViewWidth vh ViewHeight */ height: 30vw; background-color: red; } .big

2016-09-22 19:53:37 6289

原创 WEB前端 | H5基础——(2)2D/3D形变、过渡及渐变

一、2D变换 2D变换 div { width: 200px; height: 200px; background-color: red; margin-right: 100px; float: left; } .yuanshi { color: white; font-size: 50px;

2016-09-19 14:14:46 3296

原创 WEB前端 | HTML基础——(5)表格和表单

一、表格表格 1 表格标题 <!-- border 代表的是边框，是table的属性和css里的border不一样。可以直接设置大小来给单元格、表格添加边框 cellspacing 单元格的外间距 cellpadding 单元格的内边距可以通过width、height属性给整个表格设置宽和高。也可以单独

2016-09-13 19:22:37 3612

原创 WEB前端 | HTML基础——(3)a标签、隐藏及浮动

一、a标签 a标签 /*a的伪类按lvha顺序，顺序不能互换，但可只写某一种状态*/ /*访问之前的状态*/ a:link { color: black; } /*访问之后的状态*/ a:visited { color: green; } /*鼠标放上去的时候*/ a:hover { displ

2016-09-06 21:02:42 6915

原创 WEB前端 | HTML基础——(2)CSS标签、边框、内外边距及选择器

一、组合标签组合标签有序列表1 有序列表2 有序列表3 有序列表4 无序列表无序列表标题详情详情详情1 标题2 详情详情详情2 二、边框三

2016-09-03 15:24:01 3415

原创 WEB前端 | JS基础——(13)JQuery

jQuery div1 div2 div3 div4 p1 p2 div5 div6 div7 // jQuery 是一个可以帮助我们提升开发效率的框架，本质上就是别人写好的js文件，给我们提供了很多便捷的方法，想要使用jq，就必须在我们自己的js代码之前引入jq // $(document

2016-11-28 16:01:35 544

原创 WEB前端 | JS基础——(12)正则表达式

正则表达式 // 正则表达式就是一种规则 // 13702775678 112537427@qq.com // 手机号：11位，1开头 // 有@，@前面有2~7个字符 @后面2~4个 .com结尾 // 把我们一个判定的规则转成计算机能识别的表达式，就是正则表达式 // 用途：判断用户输入的是否是一个手机号、邮箱、身份证号码、有效的昵称 /

2016-11-24 21:23:05 755

原创 WEB前端 | JS基础——(11)移动端事件

移动端事件 .div { width: 200px; height: 200px; background-color: red; } var div = document.getElementsByClassName('div')[0];// div.onclick = function() {// docu

2016-11-19 13:53:45 590

原创 WEB前端 | JS基础——(10)存储

Cookie // var date1 = new Date();// date1.setDate(date1.getDate() + 10);// document.cookie = 'best=99;expires=' + date1;// document.cookie = 'userName=zhangsan;expires=' + date1;// d

2016-11-18 09:38:39 577

原创 WEB前端 | JS基础——(9-3)事件冒泡与绑定

事件冒泡和绑定 #reddiv { width: 600px; height: 400px; background-color: red; } #bluediv { width: 400px; height: 200px; background-color: blue; margin: 100px; } #

2016-11-11 19:03:03 551

原创 WEB前端 | JS基础——(9-2)键盘事件

键盘事件 var count = 0; // 键盘事件 // onkeydown 键盘按下去的时候触发，如果长按，就会连续触发绑定的方法 // onkeyup 键盘按下去并抬起来的时候触发， // document.onkeyup = function(ev) {// var evObj = window.e

2016-11-05 16:52:05 1415

原创 WEB前端 | JS基础——(9)JS事件01

JS事件01 .reddiv{ width: 200px; height: 200px; background-color: red; } // 事件 // onclick 鼠标点击 // onmouseover/onmouseenter 鼠标移入 // onmouseout/onmouseleave

2016-10-31 08:51:35 440

原创 WEB前端 | JS基础——(8)DOM

BOM // BOM对象就是可以对浏览器进行操作的对象 // JS里面所有的全局变量都是window对象的属性 a = 40; console.log(window.a); window.a = 50; console.log(a); // 所有的函数都是window对象的属性(成员变量) function test(

2016-10-29 10:31:14 453

原创 WEB前端 | JS基础——(7)DOM

DOM初识我是大哥文本你是P 你是三弟 // DOM Document Object Model var firstdiv = document.getElementById('firstdiv'); console.log(firstdiv); // 插入一个新节点 var h3 = do

2016-10-24 15:59:37 687

原创 WEB前端 | JS基础——(6)函数定时器

函数定时器 div { width: 200px; height: 200px; background: red; } // == === // == 代表值相等， === 代表除了值相等之外，类型也要一样。 // != !== // != 不等于 !== 不全等 // 一个等号不会判断类型，两个等号会判

2016-10-17 14:50:23 1088

原创 WEB前端 | JS基础——(5)字符串和时间

字符串和时间 // 创建一个字符串对象，空格也算一个字符 var string1 = new String("Hello baby"); console.log(string1); // charAt() 取字符串的第几个字符。 console.log(string1.charAt(1)); // search 在string1里面查找某个字符串，返回被

2016-10-13 17:29:50 606

Window对象是客户端javascript最高层对象之一，只要打开浏览器窗口，不管该窗口中是否有打开的网页，当遇到BODY、FRAMESET或FRAME元素时，都会自动建立window对象的实例。另外，该对象的实例也可由window.open()方法创建。由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.do

2016-10-09 14:23:45 591

原创 WEB前端 | JS基础——(4)数组、二维数组和this

一、数组数组 // 定义一个空数组arr。 var arr = []; var arr1 = [23, 45, 55, 75]; console.log(arr); console.log(arr1); // 数组的取值，直接是数组名[下标] // 注意：下标从0开始 console.log(arr1[2]); // 数组的

2016-10-08 11:37:35 3067

原创 WEB前端 | JS基础——(3)循环

循环 var isFirst = true; if (isFirst) { console.log("是真的"); } else { console.log("是假的"); } // for 循环 for(;;){} // for 循环就是让大括号里面的代码一直循环执行。 // 两个分号之间写的是控制语句，是个条件表达式(真，假)

2016-09-30 17:38:16 1354

原创 WEB前端 | JS基础——(2)布尔类型和关系运算符

布尔类型和关系运算符 /* 数据类型 1、number var a = 1; 2、string var a = "1"; 3、undefind var a; 4、null var a = null; */ // 5、布尔类型 var isboy = true; var isfirst = false;

2016-09-29 17:37:46 1422

原创 WEB前端 | JS基础——(1)JS初识

JS初识 .reddiv { width: 200px; height: 200px; background-color: red; } // window.onload // 你知道window.onload的含义吗？它是指：代码中的DOM已经加载就绪了，也就是文档流已经关闭。此时，你再用document.write()是启用了新的

2016-09-28 14:04:43 814

原创 WEB前端 | H5基础——(3)CSS3选择器

CSS3选择器 /* 子代(兄弟、兄弟相邻) nth-child / of-type after(before) 属性(2种) input(可用和不可用) */ /*1、子代选择器单指div子代(不包括孙子级..)里面的p标签*/ div > p { background-color: red; }

2016-09-20 18:46:11 740

原创 WEB前端 | H5基础——(1)H5新增标签

H5新增标签 fasdfasd 123123 1231 hello header section article aside nav footer hgroup 我是summary 我是summary 我是summary 我是summa

2016-09-18 14:37:16 867

原创 WEB前端 | HTML基础——(4)定位position

定位 body { height: 3000px; } .div { width: 200px; height: 200px; } .div1 { width: 600px; height: 600px; background-color: red; } .div2 { width: 400px

2016-09-12 20:10:19 1289

转载 CSS居中和多列布局

居中布局水平居中（父元素和子元素的宽度都未知）1、inline-block + text-ailgn.child{display:inline-block;}.parent{text-align:center;} 优点：兼容性好缺点：子元素文本继承了text-align属性，子元素要额外加text-al

2016-09-10 11:07:11 1197

原创 WEB前端 | HTML基础——(1)XHTML基础

一、初识html起始标记<>结束标记标记+特殊的字符组成标签标签的作用就是告诉浏览器内容的起始和结束的位置二、html基础模板 hello 你好呀. 为了规范书写，通常使用英文小写来书写代码，单标签需要闭合。

2016-09-03 14:17:15 669

Erosvan的博客