- 博客(21)
- 收藏
- 关注
RSS订阅原创 css3h5中的结构伪类选择器
最近用的比较多,就总结一下1.first-child和last-child <ul> <li>一</li> <li>二</li> <li>三</li> <li>四</li> </ul>//匹配到...
2019-07-10 22:11:04
379
转载 响应式布局媒体查询
媒体查询主要是对各种移动端设备的一个响应式兼容，可以在@media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要兼容的模块}中设置你想要的浏览器屏幕大小与浏览器中内容随浏览器的大小改变，来改变自己的整体布局。解决页面乱码问题。但是我们在遇到不同的设备时我们也需要来设置不同的屏幕宽度，（注：屏幕的高度最好使用...
2019-07-08 00:29:41
183
转载 css中的background属性
一、background属性可以设置一个元素的背景样式，当然前提是这个元素有具体的宽高值。先来一个简单的背景设置：#show-box { width: 800px; height: 500px; background: #000; background-image: url(image url);...
2019-07-04 13:34:21
330
转载 响应式布局与字体大小
原理：利用rem和js：1.js设置html根节点的字体大小；window宽度/每行多少个字2、rem是参照html节点的<html><head> <title></title> <meta charset="utf8"> <script type="text/javascript" src="jq...
2019-07-04 06:38:13
399
转载 canvas的线性渐变和径向渐变
渐变是两种或多种颜色之间的平滑过渡。以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。渐变又分为线性渐变和径向渐变两种。以下是css背景颜色渐变：线性渐变和径向渐变效果实际案例一、线性渐变（linear-gradient）实现线性渐变，...
2019-06-26 23:23:46
813
转载 选择标签方法querySelector和querySelectorAll
个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式，因为他们接受的参数是类CSS选择符的字符串。因此，感觉它们的功能远超传统的getElementById或者getElementsByTagName之类的，它们的主要区别在于，querySelector 只找一个标签，querySelectorAll 是找多个标签。举例说明：有如下HTML...
2019-06-24 23:01:10
1834
原创 Jquery的inArray()方法
inArray的定义与用法:$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）$.inArray(value,array) --value是要查找的值，array是被查找的数组。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
2019-06-23 21:47:54
413
转载 HTML5自定义标签使用
以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性：在标签里设置自定义属性然后获取里面的值是使用getAttribute来获取自定义属性里面的值：var myDiv = document.getElementById(“myDiv”);var theValue = myDiv.getAttribute(“user-defined-attribute”);现在...
2019-06-21 00:26:24
5105
转载 HTML5自定义标签使用
以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性：在标签里设置自定义属性然后获取里面的值是使用getAttribute来获取自定义属性里面的值：var myDiv = document.getElementById(“myDiv”);var theValue = myDiv.getAttribute(“user-defined-attribute”);现在...
2019-06-21 00:26:23
1257
原创 css3伸缩布局之携程网案例
最近学习了css3的伸缩布局,就运用这个来写一个简单的案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ m...
2019-06-17 22:19:05
629
转载 jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别var a = 元素本身的宽度；width() = a；innerWidth() = a+padding;outerWidth() = a+padding+border;outerWidth(true) = a+padding+border+margin;在jQuer...
2019-06-16 23:32:24
316
原创 jquery的方法
1.操作样式①css操作//操作单个样式(name,value)//设置多个样式(obj)//获取样式(name)②class操作//addClass(name):添加类//removeClass(name):移出类//hasClass(name):判断类//toggleClass(name):切换类2.操作属性①attr//设置单个属性//设置多个属性//获取属性②...
2019-06-13 01:12:46
117
原创 jquery实现点击增加和移除样式
用jquery实现增加和移除样式代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:...
2019-06-10 20:25:44
2649
原创 字符串和正则相关的方法
这里介绍一下正则表达式的其他用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //split ...
2019-06-06 05:31:51
165
原创 Js中的继承关系
继承是一种关系,父类与子类的继承关系,通过原型来实现继承,继承就是为了数据共享.例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...
2019-06-02 22:29:17
268
原创 js实现键盘移动div
今天学到了几个新的指令,我们来利用这些指令来实现一个移动div的功能onkeydown//键盘按下onkeyup//键盘松开keyCode//获取键盘按下的值代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titl...
2019-05-29 23:47:01
528
原创 用Js实现图片跟着鼠标移动
我们用js来写一个图片跟着鼠标移动的功能详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #img{ po...
2019-05-28 23:46:05
3275
原创 Js实现简单的表格内容添加
我们来用原装js来实现一个简单的表格内容添加html代码<body> <table border="1" width="200" height="30" id="table"> <tbody id="tb"> <tr> <td>青椒肉丝</td> ...
2019-05-26 23:45:18
1348
原创 关于location对象
location对象是window对象下的一个属性,有时候可以省略window对象location可以获取或者设置浏览器地址栏的URL//location对象:地址栏对象,也属于windowconsole.log(window.location);//获取地址栏上#及后面的内容console.log(location.hash);//主机名和端口号console.log(locati...
2019-05-25 00:06:51
153
原创 用js实现一个随机点名
html代码<h1>随机点名系统</h1><div id="time"></div><div id="box"> <ul> <li>张三</li> <li>李四</li> <li>王五</li>...
2019-05-24 00:23:39
2560
翻译 使用js实现数目加与减
**用js做一个简便的点击按钮,数量增加与减少html代码<input type="button" value="-" id="jian" > <input type="text" value="1" id="txt"> <input type="button" value="+" id="jia">js代码`var add=document.get...
2019-05-23 00:04:19
1303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人