2017年11月_lelara

原创第100天：CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；一、Animation定义动画CSS3的Animation是由“keyframes”这个属性来实现这样的效果，keyframes就是关键帧。下面先来看看Keyframes:Keyframes语法规则： @keyframes 动画名 { from{开始状态} ...

2017-11-30 22:48:00 986

原创第99天：CSS3中透视perspective

CSS3中透视视角透视原理：近大远小。浏览器透视：把近大远小的所有图像，透视在屏幕上。理解浏览器的坐标系：浏览器平面为Z = 0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。 perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。 perspectiveOrigin：个人理解为视点的xy坐标，perspective factor...

2017-11-29 22:55:00 430

原创第98天：CSS3中transform变换详解

变换变换详解本文主要介绍变形变换。变换字面上就是变形，改变的意思。在CSS3中变换主要包括以下几种：旋转旋转，扭曲倾斜，缩放尺度和移动翻译以及矩阵变形矩。下面我们一起来看看CSS3中变的旋转旋转，扭曲倾斜，缩放规模和移动翻译具体如何实现，老样子，我们就从变换的语法开始吧。语法： transform ： none | <transform-function> [ &lt...

2017-11-28 23:06:00 173

原创第97天：CSS3渐变和过渡详解

一，渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变，径向渐变1，线性渐变（gradient变化）　　线性梯度线性渐变指沿着某条直线朝一个方向产生渐变效果。 linear-gradient:方向，起始颜色，终止颜色方向：to left/ to right...

2017-11-27 23:05:00 268

原创第96天：CSS3 背景详解

一、背景大小background: url("images/bg.jpg") no-repeat;控制背景的大小1、具体数值background-size: 500px 500px;2、百分比background-size: 50% 50%;3、cover、contain参数cover 完全覆盖盒子，不一定全部显示 background-size: cover; con...

2017-11-26 22:40:00 139

　　1，CSS3边框：border-radius：CSS3圆角边框。在CSS2中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在CSS3中，创建圆角是非常容易的，在CSS3中，border-radius属性用于创建圆角.border：2px solid; box-shadow：CSS3边框阴影。在CSS3中，box-shadow用于向方框添加阴影.box-shadow：10px 1...

2017-11-25 22:30:00 139

原创第94天：CSS3 盒模型详解

CSS3盒模型详解盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定盒模型即可以指定属性width的计算方式 ...

2017-11-24 22:13:00 92

原创第93天：CSS3 中边框详解

CSS3边框详解其中边框圆角，边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。一，边框圆角 border-radius 每个角可以设置两个值，x值，y值圆角处理时，脑中要形成圆，圆心，横轴，纵轴的概念，正圆是椭圆的一种特殊情况。柯林斯椭圆分别设置长，短半径，以“/”进行分隔，遵循“1,2,3,4”规则，“/”前面的1〜...

2017-11-23 23:00:00 113

原创第92天：CSS3中颜色和文本属性

一，颜色的表示方式1，rgba（255,0,0,0.1） rgba是代表红（红色）绿（绿色）蓝（蓝色）和Alpha 透明度。虽然它有的时候被描描为一个颜色空间新增了RGBA，HSLA模式，其中的甲表示透明度通道，即可以设置颜色值的透明度，相较不透明度，它们不具有继承性，即不会影响子元素的透明度。红，绿，蓝，阿尔法即RGBA2，色调，饱和度，亮度，阿尔法即HSLAR，G，B...

2017-11-22 23:01:00 132

原创第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

一，属性选择器特点其通过的英文属性来选择元素，具体有以下5种形式：1，E [attr]表示存在attr属性即可; DIV [类]2，E [attr = val]表示属性值完全等于val ; DIV [类= mydemo]3，E [ATTR * = VAL]表示的属性值里所有游戏VAL字符并且在“ 任意 ”位置; div [class * = mydemo...

2017-11-21 22:47:00 162

原创第90天：HTML5中文件API和拖放操作

一，文件APIFile API：提供客户端本地操作文件的可能multiple是让文件域可以多选 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文件API</titl

2017-11-20 23:05:00 83

原创第89天：HTML5中访问历史、全屏和网页存储API

一，访问历史API通过历史对象实现前进，后退和刷新之类的操作历史上新增的两个方法history.replaceState（）和history.pushState（）方法属于HTML5浏览器新增的属性，所以IE9以下的是不支持的。1、history.replaceState() ；顾名思义就是替换的意思，所以它的作用就是替换当前地址栏的urlhistory.replaceState(...

2017-11-19 23:01:00 89

原创第88天：HTML5中使用classList操作css类

在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增，删除，修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。一，Element.classList这个classList对象里有很多最有用的方法：1 {2 length: {number}, /* # o...

2017-11-18 23:31:00 167

原创第87天：HTML5中新选择器querySelector的使用

一，HTML5新选择器1，文件。querySelector（“selector”）; 选择器：根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null ; 支持：Chrome 4.0 +，FireFox 3.5 +，Safari 3.2 +，Opera 10.1 +，IE 8+ 2，文档。querySelectorAll（“selector”）; 选择器：根据CSS选择器返回所有...

2017-11-17 23:00:00 526

原创第86天：HTML5应用程序标签和智能表单

一，HTML5应用程序标签1，数据列表需要数据载体输入列表属性指向数据源2，进步进度条-webkit-appearance：none; / *如果要改变默认样式要先取消默认样式* / .my-progress :: - moz-progress-bar { / *选中背景元素* / / *兼容火狐浏览器* / 黄色;} .my-progress :: - w...

2017-11-16 23:30:00 154

原创第85天：HTML5语义化标签

一，语义标签语义标签对于我们并不陌生，如<p>表示一个段落，<ul>表示一个无序列表<h1>〜<h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。传统的做法我们或许通过增加类名如类= “标题”，类= “页脚”，使HTML页面具有语义性，但是不具有通用性。HTML5则是...

2017-11-15 23:00:00 92

原创第84天：jQuery动态创建表格

jQuery的动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src=&q

2017-11-14 22:55:00 102

原创第83天：jQuery中操作form表单

操作形式表单1，属性操作设置属性：//第一个参数表示：要设置的属性名称//第二个参数表示：该属性名称对应的值$（selector）.attr（“title”，“传智播客”）;获取属性：//参数为：要获取的属性的名称，改操作会返回指定属性对应的值$（selector）.attr（“title”）;此时，返回指定属性的值移除属性：//参数为：要移除的属性...

2017-11-13 23:42:00 82

原创第82天：jQuery中prop()和attr()的区别

在高版本的jQuery的引入道具方法后，什么时候该用的道具？什么时候用ATTR？它们两个之间有什么区别？这些问题就出现了。关于它们两个的区别，网上的答案很多这里谈谈我的心得，我的心得很简单：对于HTML本身元素就带有的固有属性，在处理时，使用道具方法。对于HTML我们元素自己自定义的DOM属性，在处理时，使用ATTR方法。上面的描述也许有点模糊，举几个例子就知道了。 <a...

2017-11-12 22:40:00 70

原创第81天：jQuery 插件使用方法

在追求页面互动效果的时代，大家都想把页面效果做的美轮美奂，这一切都离不开前端技术脚本Javascript，而最近常被人用到的Javascript库文件则是jQuery.jQuery的使用具体步骤如下：一，调用库文件使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如： <script type =“text / javas...

2017-11-11 18:04:00 106

原创第80天：jQuery插件使用

jQuery其他补充+ 4.1链式编程：end（）补充*补充五角星评论案例*第一步：鼠标移入，当前五角星和前面的五角星变实体。后面的变空心五角星*第二步：鼠标点击的时候，为当前元素添加点击类，其他的移除点击类*第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实心+ 4.2隐式迭代*默认情况下，会自动迭代执行jQuery选择出来所有dom元素的操作。*如果获取的是多元素的...

2017-11-10 22:28:00 102

原创第79天：jQuery事件总结（二）

上一篇讲到的jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery的事件中的合成事件，事件冒泡和事件移除等内容。　　一，合成事件　　jQuery有两个合成事件 - hover（）方法和toggle（）方法，同就绪（）方法一样，这些都是jQuery自定义的方法。　　hover（）方法： hover（）方法的语法结构为：hover(...

2017-11-09 23:01:00 99

原创第78天：jQuery事件总结（一）

jQuery的事件总结（一）　现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery的。　　JavaScript的HTML和之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器就会自动生成一个事件。当然使用传统的JavaScript的也能完成这些交互，但是jQuery的增加并扩展了基本的事件处理机制.j...

2017-11-08 23:38:00 73

原创第77天：jQuery事件绑定触发

一，元素操作如图1所示，高度和宽度$（“格”），高度（）。//高度$（“DIV”）宽（）; //宽度.height（）方法和的CSS（“高度”）的区别：返回值不同，.height（）方法返回的是数字类型（20）,. css（“height”）返回的是字符串类型（20px），因此.height（）方法常用在参与数学计算的时候2，坐标值$（“div”）。offset（）...

2017-11-07 23:14:00 84

原创第76天：jQuery中的宽高

窗口对象和文档对象的区别1，窗口表示对象浏览器中打开的窗口显示2，窗口对象可以省略，比如警报（）也可以写成window.alert（）文档对象是窗口的对象一部分浏览器的HTML文档成为dicument对象 window.location的和document.location窗口对象的位置属性饮用的是定位对象，表示该窗口中当前显示文档的URL文档对象的位置属性也是引用...

2017-11-06 22:40:00 69

原创第75天：jQuery中DOM操作

一，基础操作1.HTML（）使用html（）方法读取或者设置元素的innerHTML。就是相当于JavaScript的里头的innerHTML之中。2.text（）使用文本（）方法读取或者设置元素的innerText属性。就是相当于JavaScript的里头的innerText属性。3. attr（）使用ATTR（）方法读取或者设置元素的属性，对于jQuery的没...

2017-11-05 21:30:00 118

原创第74天：jQuery实现图片导航效果

图片导航效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7

2017-11-04 23:00:00 158

原创第73天：jQuery基本动画总结

一，DOM对象跟jQuery对象相互转换jQuery的对象转换成DOM对象：方式一：$（“＃btn”）[0]方式二：$（“＃btn”）。get（0）DOM对象转换成jQuery的对象：$（document） - >把DOM对象转成了jQuery对象var btn = document.getElementById（“bt n”）;btn - > $（b...

2017-11-03 21:15:00 139

原创第72天：jQuery实现下拉菜单

jQuery实现下拉菜单一、居中1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度2、行内块元素居中：给元素父级设置text-algin:center; 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT...

2017-11-02 22:15:00 92

原创第71天：jQuery基本选择器（二）

jQuery的选择器一，内容过滤选择器选择器描述返回示例：包含（文本）匹配含有字幕：内容文本的元素集合元素 $（“P：包含（今天）”）：空匹配不含子元素或字幕：元素的空元素...

2017-11-01 23:04:00 73 1

lelara的博客