自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(85)
  • 收藏
  • 关注

原创 精灵图好处

CSS Sprites 的优点: 1、减少图片的字节 2、减少了网页的http请求,从而大大的提高了页面的性能 3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

2017-10-29 20:55:10 5671

原创 js点击图片更换头像,input file

html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width = device-width,initial-scale=1,maximum-scale = 1.0,minimum-scale=1,user-scalable=0"> title>事件冒泡title>

2017-10-24 14:23:11 7878

转载 input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

input type="file" id="camera" multiple="multiple"capture="camera" accept="image/*" >$(function () { //解决上传图片时capture="camera"在安卓与IOS的兼容性问题(在IOS只能拍照,不能选相册) var ua = navigator.userAgent.toLower

2017-10-24 14:21:04 7174 1

转载 URL地址的拼接

//URL地址的拼接function jiontUrl(data,url) {//url要跳转的那个页面的地址,即A到B,其中的B var studentStr=""; for(var i in data){ studentStr +="&"+i+"="+data[i] } studentStr =studentStr.substr(1);

2017-10-24 09:26:15 7554 1

转载 获取URL地址参数的方法

//获取URL地址参数的方法function GetQueryString(name,url){//name是你要获取参数的键名 url = url||window.location.search.substr(1); url=decodeURIComponent(url); var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|

2017-10-24 09:17:24 621

原创 tortoisesvn安装

tortoisesvn安装即乌龟SVN服务器 去首页https://tortoisesvn.net/找到你电脑位数相对应的压缩包 然后傻瓜式的安装,直到完成,当右击出现小乌龟的图标时,就表示你安装完成了 去官网里面下载一个中文汉化包,然后傻瓜式安装好之后,然后在桌面上右击找到setting,接下来就是选择语言中文就好 (当然你如果英语比较好,或者说你想锻炼英语,那么不用汉化)

2017-10-17 15:53:07 557

原创 常用dos命令

cd     改变当前目录       copy    拷贝文件    del    删除文件

2017-10-16 11:33:57 444

原创 node安装

首先就是安装node,这个相对于比较简单 第一步进入http://nodejs.cn/download/ 选中与电脑想对应的位数,里面有几个系统都不一样,建议使用windows(.msi)的因为这个已经自动帮你配置好了 下载之后唯一需要注意的是:看一下自己的安装路径,最好不要放在c盘,到后期东西会很多会影响内存 使用快捷键 Windows+r 输入cmd 打开黑框框 输入node -v

2017-10-16 11:28:52 399

原创 wamp 安装

1.首先更自己电脑的类型下载想对应的wamp文件双击wamp的exe文件出现的第一个界面,主要是一些欢迎使用信息,不用看直接点击next进行下一步操作第二个界面是wamp的用户协议信息,主要是wamp的一些使用作者和使用声明信息,可以不用看,点击接受,点击next第三个界面就是安装wamp到哪一个盘,你可以根据自己的情况,填写安装位置,尽量不要安装到c盘第四个界面是:是

2017-10-16 10:25:17 546

转载 农历的js 代码

、农历的js 代码/*获取当前农历*/function showCal(){ var D=new Date(); var yy=D.getFullYear(); var mm=D.getMonth()+1; var dd=D.getDate(); var ww=D.getDay(); var ss=parseInt(D.getTime() / 1000); if (yy100)

2017-10-16 09:40:01 869

转载 swiper的使用教程

swiper的使用教程今天要分享的是swiper这个插件的使用,什么是swiper呢?Swiper常用于移动端网站的内容触摸滑动;Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。初学者使用swiper的时候,可以在官网(http://www.swiper.com.cn/)学,但是一开始的时候,建议不要直接看它的API文档

2017-10-16 09:38:19 7620

原创 js相关知识点

1.对动态生成的标签添加监听事件("hot-content").on("click","span",function(){alert("我被点击了")})即点击热门城市下的span标签就会出现弹出框2.模拟触发•trigger•$("")谁触发,trigger怎么触发,change触发什么事件•$("#selCity").trigger("change");

2017-10-15 20:21:46 339

原创 js 获取时间戳

•(1) var timestamp = Date.parse(newDate());•(2) var timestamp = (newDate()).valueOf();•(3) var timestamp=(newDate()).getTime();√注意:使用第三种比较多

2017-10-15 20:05:52 388

原创 mui list (列表) ipnut (表单)

list(列表)class="mui-table-view">    class="mui-table-view-cell">        class="mui-navigate-right">Item 1        class="mui-table-view-cell">Item 2        <spanclass="mui-badge mui-

2017-10-13 10:55:11 1613

原创 mui dialog(对话框)

2.3 dialog(对话框)警告框$.alert('警告内容\n可以使用\n换行','警告的标题','按钮文字',function() {    //点击确认之后的回调})注意.alert( message, title, btnValue, callback [, type] )message必须是字符串确认框varbtnArray = ['否',

2017-10-13 10:00:25 1695

原创 MUI介绍

1.1 MUI是什么,解决了什么问题。1)性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;(如果开发者需要解决这些问题,需要处理很多兼容性问题,需要花费大把时间和精力)2)浏览器默认控件样式又

2017-10-11 16:11:57 1059

转载 js获取农历

/*获取当前农历*/function show_lunar_calendar(){ var D=new Date(); var yy=D.getFullYear(); var mm=D.getMonth()+1; var dd=D.getDate(); var ww=D.getDay(); var ss=parseInt(D.getTime() /

2017-10-09 10:10:48 3813 1

原创 6CSS3渐变

渐变为css3新增属性,分为两种:线性渐变和径向渐变1)-webkit-gradient参数多,但是容易调整()background:-webkit-gradient(linear,0%0%,100%0%,from(red),to(yellow));参数:linear:线性,后面的两组参数代表的是起始和终止的位置from(起始)to(终止)的颜色            

2017-10-08 14:47:51 526

原创 CSS3背景

(1)         body{            /*background-image: url(../img2/timg.jpg);            background-repeat:no-repeat;            background-color: #00BFFF;            background-position: center

2017-10-08 14:40:42 342

原创 CSS3圆角

优点:一、减少网站的维护量二、提高网站的性能,少了对图片的http请求,网页加载速度加快三、增强视觉美观          #div1{            width:200px;            height:60px;            border:2px solid red;            border-radius:

2017-10-08 14:38:29 350

原创 css3属性选择器

1.11属性选择器根据属性特征来选择应用的样式,所以从这个意义上来讲,它包含了id,class选择器[title]:选择设置了title属性的元素[title^=”tt”]:选择了title属性以”tt”开头的元素[title$=”tt”]:选择了title属性以”tt”结尾的元素[title ~=”tt”]:选择了title属性包含完整”tt”单词的元素[title*=”

2017-10-08 14:21:47 359

原创 iconfont

iconfont 是什么?icon是图标的意思,font是字体的意思,iconfont的意思就是字体图标。首先他必须是一个字体第二是一个图标就是指文字文件代替图片文件,来展示图片的一种方式iconfont的优势1)轻量型用字体文件要比图片文件小很多,一旦加载完成就可以显示,不需要去下载一个图片,这样的好处就是速度快2)灵活性我们可以通过css样式,去修改他的颜色大小

2017-10-08 10:58:42 730

转载 .XML

.XML的优点  A.格式统一,符合标准;  B.容易与其他系统进行远程交互,数据共享比较方便。.XML的缺点  A.XML文件庞大,文件格式复杂,传输占带宽;  B.服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;  C.客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;  D.服务器端和客户端解析XML花费

2017-10-08 10:54:31 354

原创 Flex

6 Flex一、Flex布局是什么?在之前我们的布局方式:display+position+float,这种方式布局基本可以解决所有的布局问题,但是一些特殊的布局实现起来却不容易,比如垂直方向居中.Flex,弹性布局。用来为盒子模型提供最大的灵活性.所有元素都可以设置为flex布局注意:如果使用了flex布局,所有的子元素float、clear、vertial-align等属性

2017-10-07 20:40:17 187

原创 meta rem

4 meta我们可以通过meta标签,对viewport进行控制,一般我们的设置之后想要的效果:1)viewport的宽度==屏幕的宽度2)同时不允许用户手动缩放。一般情况下,设置viewport的代码放到模板里面去name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0,m

2017-10-07 20:38:25 416

原创 webApp介绍webApp介绍

1 webApp介绍app:(native):指的是原生态APP,直接运行在操作系统上运用。主流的移动端操作系统:Andriod:JAVA、eclipse;苹果电脑或者windowsiOS:object-c(OC)、swift、xcode;苹果电脑webApp:用HTML5编写的移动web运用,依赖于浏览器(微信浏览器。QQ浏览器)。可以不加修改直接运行在Andriod/i

2017-10-07 20:36:11 9400

原创 css3 transition 动画

10 CSS3过渡特点:1)本质上是一帧动画,一帧结束后,就没有了2)过渡的效果的实现,必须通过用户的行为,可能触发,行为:hover,focus,click,JS代码1、transition的属性transition-property:指定元素的过渡属性transition-duration:规定了过渡时间。transition-timming-function:

2017-09-25 09:51:44 882

原创 css3 shadow阴影

阴影部分Shadow(阴影)text-shadow是给文本添加阴影效果,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中又恢复了。text-shadow:5px 2px 2px rgba(64, 64, 64, 0.5),后面的参数分别是 水平偏移量,垂直偏

2017-09-25 09:38:21 2654

原创 css3 Transform

1、Transform转换属性所有的二维变形(转化),都是刷的一声就变过去了,没有任何效果2、Transform 方法(1)转换:translate(x,y)x表示水平方向的移动,y表示竖直方向的移动。负值表示往相反的方向移动。使用该方法,可以实现水平居中        #div{            width:100px;            hei

2017-09-22 14:54:34 346

原创 HTML5 Web 存储

HTML5 Web 存储cookie特点:键值对的形式存储数据在本地浏览器上存储数据有效期:未来的时间“expires=今天以后的时间”存储数据的容量:所有的http请求都带回cookie信息。(联想http get请求的可以传送的数据容量,从某种意义上来说,用cookie不是那么的安全)  (1)localStorage2.1用法 2.1.1保存数据

2017-09-19 13:59:01 481

原创 SASS安装

2 SASS安装1、ruby安装sass依赖于ruby,所以在安装参数sass之前先把ruby安装好ruby的下载地址https://rubyinstaller.org/downloads/注意根据你的电脑是64位还是86位的,然后在来判断哪一个软件,和自己电脑的属性相对应,还有建议最好不要下载最新版本的 在下图位置中输入ruby然后右击以管理员身份运行 2

2017-09-12 10:36:32 391

原创 overflow: hidden;

overflow: hidden;这个属性是多样的,简单来说: 如果 是对块级元素这只这个属性,将撑起父元素的高度如果是对内联元素设置了这个属性,超出内容将被隐藏

2017-09-12 09:10:35 344

原创 display:none和visibility:hidden的区别

display:none:隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢, 就当他从来不存在。(通俗来说,就是display的隐藏,不仅仅是隐藏就连他原本的位置也会消失)visibility:hidden:隐藏对应的元素,但是在文档布局中仍保留原来的空间。(然而这个隐藏只是隐藏了元素,并没有去掉他原本的位置)

2017-09-11 20:06:14 352

原创 &&的使用

&&的使用弹出的a和b分别是?结果:a=3,b=1;注意:(1)&& “前面” 计算结果如果是false,&&后面的就不运行了。(2)if()后面有一个“;”。

2017-09-11 20:00:31 1181

原创 解决 display:inline-block 之间显示间隙

1、移除空格(div之间回车)2、使用margin 负值3、使用 font-size:04、letter-spacing 5、word-spacing

2017-09-11 19:58:28 506

原创 css选择器

属性选择器根据属性特征来选择应用的样式,所以从这个意义上来讲,它包含了id,class选择器[title]:选择设置了title属性的元素[title^=”tt”]:选择了title属性以”tt”开头的元素[title$=”tt”]:选择了title属性以”tt”结尾的元素[title ~=”tt”]:选择了title属性包含完整”tt”单词的元素[title*=”tt”]

2017-09-11 19:56:22 303

原创 js有哪些内置对象

数据封装类对象:Object、Array、Boolean、Number 和 String其他对象:Function、Arguments、Math、Date、RegExp、Error数据封装类对象:Object、Array、Boolean、Number 和 String其他对象:Function、Arguments、Math、Date、RegExp、Error

2017-09-11 19:52:10 1139

转载 JQuery插件之(四)--轮播图nivo-slider使用教程

现在市面上基于jQuery的轮播图插件种类繁多,各具特色,这对于具有选择困难症的童鞋来说就痛苦了,不知道选哪个,那么,今天小编就来帮你选择一款,号称最好的jquery幻灯片插件,Nivo-Slider,这款插件无论是在交互效果,还是轮播效果,还是使用方法及功能都堪称完美。其效果可与Flash的幻灯片媲美,例如: 这个flash的幻灯显示主要特性:号称世界最棒的jQuery幻

2017-08-31 13:51:41 1375

原创 HTML5推出的理由

HTML5推出的理由推出的缘由和目标 目前web端存在一些问题,比如兼容性问题,同样的页面,在不同浏览器上显示的效果不一样,那么开发人员需要做很多额外的工作去解决这一问题,需要花费大量的时间在这上面,一些特殊的权限没有开发给开发人员,比如:定位权限,拉起拍照权限,动画。绘画。那么h5的推出就是为了解决这一序列问题。h5解决了什么问题:(1)开发了一些特殊的权限给开发者:有了这些权限

2017-08-22 21:39:47 432

原创 JQuery插件(三)之growl

提示框:(1)title消息提示的标题messag提示的内容1)growl后面不写某些关键词,使用默认样式$.growl({title:"消息提示框",message:"提示内容" 2)notice$.growl.notice({title:"消息提示框",message:"提示内容" 3)warning$.growl.warning

2017-08-22 10:08:01 567

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除