2017年07月_qiphon3650

12月 11月 10月 09月 08月 07月 06月 05月

转载关于浏览器出现滚动条和消失页面不跳动

html { overflow-y: scroll;}:root { overflow-y: auto; overflow-x: hidden;}:root body { position: absolute;}body { width: 100vw; overflow: hidden;}转载自：http://www.zhan

2017-07-31 15:45:00 1726

原创全屏蒙板添加

divclass="address_runyuan"style="margin:0 auto;width:1200px;">style>.runyuanAddr{text-align:center;font-size:40px;}.address_runyuan h4{text-align:center;height:50px;margin:20px a

2017-07-31 15:25:22 1235

原创使元素居中

position：basolute;top:0;bottom:0;left:0;right:0;margin:auto;方法二position：absolute；left：50%；top：50%；margin：-height/2 0 0 -width/2;

2017-07-31 13:20:04 283

原创 visual studio code 快捷键

Ctrl+Shift+Alt+DownArrow, Ctrl+Shift+Alt+RightArrow, Ctrl+Shift+Alt+UpArrow, Ctrl+Shift+Alt+LeftArrow多光标选择Ctrl+Alt+UpArrow or Ctrl+Alt+DownArrow同样是多光标选择，但是和上面的有些不一样Shift+Alt+DownArrow or Shi

2017-07-31 10:20:43 370

转载 object-position

object-position要比object-fit单纯的多，就是控制替换内容位置的。默认值是50% 50%，也就是居中效果，所以，无论上一节object-fit值为那般，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit.与background-position类似，object-position的值类型为类型值。也就是说，CSS

2017-07-30 11:38:50 2051

转载 object-fit

CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit:

2017-07-30 11:13:32 1315

2017-07-29 10:12:55 575

原创 fullpage.js options笔记2

OptionscontrolArrows: (default true) 轮播是否出现箭头Determines whether to use control arrows for the slides to move right or left.verticalCentered: (default true) section中的内容自动居中显示 Vertically

2017-07-27 17:33:40 2210

原创 fullPage.js学习笔记1

fullPage下载地址https://github.com/alvarotrigo/fullPage.js/archive/master.zipfullPage github地址https://github.com/alvarotrigo/fullPage.js/工具下载方法// With bowerbower install fullpage.js// With

2017-07-27 11:57:33 1064

转载编程词汇

application 应用程式应用、应用程序 application framework 应用程式框架、应用框架应用程序框架 architecture 架构、系统架构体系结构 argument 引数（传给函式的值）。叁见 parameter 叁数、实质叁数、实叁、自变量 array 阵列数组 arrow operator arrow（箭头）运算子箭头操作符 as

2017-07-25 15:21:05 687

转载 css属性兼容

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高\9：选择IE6+\0：选择IE8+和Opera[;property:value;];：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内

2017-07-25 15:17:09 337

转载 css图形

网站，简单的注解一下和归纳了一下，其中并没涉及到复杂的css画图形。其中用了css3.0的一些属性，所以这里声明：请用支持css3.0的浏览器看此文章！正方形矩形梯形平行四边形上面这几个相对比较简单,没什么可解释的,看下面源码：/*正方形*/.Square { width: 100px; height:

2017-07-25 15:09:29 299 1

转载移动端注意点

首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />meta content="yes" name="apple-

2017-07-25 15:03:22 290

原创前端学习文档列表

1 Underscore 中文文档 github地址英文文档2 Express中文文档 github地址3 Backbone中文文档 Backbone英文文档 github地址4 Jquery中文文档（适合1.0--2,0）5 Bootstrap中文6 Less中文7 NodeJs中文API8 node.js相关的

2017-07-25 14:44:48 1157

转载 HTML 5 Canvas

HTML 5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML 5 页面添加 canvas元素。规定元素的 id、宽度和高度：通过 JavaScript 来绘制canvas 元素本身是没有绘图

2017-07-22 17:32:04 312

转载 HTML 5 音频

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML 5规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。音频格式当前，audio 元素支持三种音频格式： IE 9 Firefox 3.5 Opera 1

2017-07-22 17:22:04 346

原创 html5 video 元素

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML 5规定了一种通过 video 元素来包含视频的标准方法。视频格式当前，video 元素支持三种视频格式：格式 IE Firefox Opera Chrome Safari

2017-07-22 17:17:19 520

原创 html5 标签

标签描述 4 5 定义注释。 4 5 定义文档类型。 4 5 定义超链接。 4 5 定义缩写。 4 5 HTML 5 中不支持。定义首字母缩写。 4 定义地址元素。 4 5 HTML 5 中不支持。定义 applet。 4 定义图像映射中的区域。 4 5 定义 article。 5 定义页面内容之外的内容。 5 定义声音内

2017-07-22 17:06:22 303

原创 HTML5: 标签的改变

HTML5 吸取了 XHTML 2 一些建议，包括一些用来改善文档结构的功能，比如，新的 HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在这些场合是一律使用 div 的。HTML5 还包含了一些将内容和展示分离的努力，开发者们也许会惊讶， b和 i 标签依然存在，但它们

2017-07-22 17:02:34 342

转载两个inline-block之间的空格去除方法

方法一、移除空格元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。可取方法： 1 2 3 1</a >2</a >3 123方法二、使用margin负值.space a { displa

2017-07-22 14:50:53 879

原创 Font Awesome图标字体库

下载地址 http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip官网 http://fontawesome.dashgame.com/Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。最简单的方式：Boots

2017-07-20 15:46:52 1426

原创 jquery-plugin-circliful 画圆插件

插件地址https://github.com/pguso/jquery-plugin-circliful/archive/master.zipgit地址https://github.com/pguso/jquery-plugin-circliful必需的引用下面是一个bootstrap实例： Circliful

2017-07-20 11:54:49 1842

原创回到顶部的几种写法

1、html标签 a链接锚点跳转，回到顶部在顶部的元素上加入id例如：2、js写法回到顶部document.getELementById('top').onclick=function(){document.body.scrollTop=0;}3、html a标签写法回到顶部

2017-07-19 09:58:33 1863

转载 php表单

php中的$_GET和$_POST用于接收表单传来的信息PHP 表单处理有一点很重要的事情值得注意，当处理 HTML 表单时，PHP 能把来自 HTML 页面中的表单元素自动变成可供 PHP 脚本使用。实例qiphon名字: 年龄: php代码如下欢迎 !你的年龄表单验证

2017-07-17 16:12:30 328

原创 jQuery获取元素位置、滚动条高度

获取浏览器显示区域（可视区域）的高度： $(window).height(); 获取浏览器显示区域（可视区域）的宽度：$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度：$(document).width(); 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)

2017-07-17 11:51:03 9565

转载 svg兼容ie

本文引自：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/svg image标签降级技术如果浏览器支持SVG，则SVG显示；对于不支持的浏览器，例如IE8浏览器，会忽略svg标签的存在，直接渲染image，在其看来，这就是个img标签，于是，图像就以svg.png的形式显示了。如果你使用SV

2017-07-16 17:32:19 11776

原创 animation动画

浏览器支持ie10+、chrome、Firefoxanimation 取值animation-name :动画名称（自己定义的@keyframes名字）animation-duration动画完成的时间 sanimation-timing-function 动画如何完成一个周期（过渡效果）linear匀速easeease-inease-in-out

2017-07-15 09:08:47 462

原创 php虚拟主机配置

1、配置本地的DNS文件——hosts文件路径：C:\Windows\System32\drivers\etc\hosts实例：#此段为注释 ip地址在前，域名在后，中间用空格隔开127.0.0.1localhost127.0.0.1www.qiphon.com2、配置Apache的主配置文件——httpd.confApache主配置文件路径：你的...

2017-07-14 23:08:03 907

原创 -webkit-text-fill-color

-webkit-text-fill-color文字填充色-webkit-text-fill-color:yellowgreen;镂空字体-webkit-text-fill-color:transparent;-webkit-text-stroke:1px#000;字体添加过渡色backgro

2017-07-13 16:10:37 11550 2

原创 background-clip

p{width:200px;height:200px;margin:0 auto;border:3px dotted#973;padding:8px;background:gray;background-clip:content-box;}默认值 border-box 背景包含边框padding-box 背景包含paddingcont

2017-07-13 15:41:12 214

原创 -webkit-text-stroke

-webkit-text-stroke 文字描边-webkit-text-stroke-width: 描边宽度-webkit-text-stroke-color：描边颜色实例：-webkit-text-stroke:2pxred;火狐、chrome已经支持

2017-07-13 15:07:57 1973

原创 placeholder支持ie

ie低版本不支持placeholder的情况可以解决了只需简单的计步1、文档引入jQuery2、文档引入jquery-placeholder.js （压缩版仅仅3.21k）3、简单的js$(function(){$('input').placeholder();})大功告成，是不是很简单呢！

2017-07-13 10:26:10 261

原创 a标签实现下载

直接在a标签内加入一个download属性就ok了点击下载如果要设置文件的名字可以将文件名写在download属性的里面点击下载ie和iOS好像还不支持该功能

2017-07-11 17:20:28 1585

转载 CSS font-family中文字体英文名称展示

CSS font-family中文字体英文名称展示一些常见中文字体，例如“宋体”，“微软雅黑”等，直接使用中文名称作为CSS font-family的属性值也能生效，但我们一般都不使用中文名称，而是使用英文名称，主要是规避乱码的风险。还有一些中文字体，直接使用中文名称作为CSS font-family的属性值是没有效果的，如“思源黑体”， “兰亭黑体”等，需要使用对应的英文字体名称才可以。

2017-07-11 16:39:13 750

转载 css3 pipe

下载该项目详尽原始的下载资源在这里：http://github.com/lojjic/PIE/downloads官方下载频道http://css3pie.com/download/压缩包里的htc文件和js文件要放在同一个目录，.red{background:red;/* 圆角 */border-radius:50%;behavior:url(js/pi

2017-07-11 15:05:04 396

转载 respond.js media query

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)使用：原文链接：http://caibaojian.com/respondjs.html1.在css中正常用 min/max-width media queries·//code from http:/

2017-07-11 12:00:31 357

转载 ie兼容

IE8中有一个“兼容性视图”的概念，当初IE8发布时，相对于IE6/7已经做出了非常大的改进，但是很多老站点仅针对IE6/7进行了优化，使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师，IE8加入了“兼容性视图”功能，这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的，所以需要使用meta标签来强制IE8使用最新的内核渲染页面IE=edge表示强制使用

2017-07-11 10:57:00 275

转载 PHP 面向对象

在面向对象的程序设计（英语：Object-oriented programming，缩写：OOP）中，对象是一个由信息及对信息进行处理的描述所组成的整体，是对现实世界的抽象。在现实世界里我们所面对的事情都是对象，如计算机、电视机、自行车等。对象的主要三个特性：对象的行为：可以对对象施加那些操作，开灯，关灯就是行为。对象的形态：当施加那些方法是对

2017-07-09 17:27:12 345

转载 PHP 命名空间

PHP 命名空间(namespace)是在PHP 5.3中加入的，如果你学过C#和Java，那命名空间就不算什么新事物。不过在PHP当中还是有着相当重要的意义。PHP 命名空间可以解决以下两类问题：用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突。为很长的标识符名称(通常是为了缓解第一类问题而定义的)创建一个别名（或简短）的名称，

2017-07-09 16:45:38 261

转载实现背景透明，文字不透明，兼容所有浏览器

实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8（使用opacity实现《背景透明，文字不透明》是不可取的，opacity会使所有的内容都变透明）css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,25

2017-07-09 11:33:05 1182