AdiHuang

Posted 2016-10-10Note

gulpfile.js放置在根目录下，
启动命令’gulp serve’

// 组件
gulp
browser-sync // 自动刷新

Posted 2016-10-10Note

常用的base.css初始化样式


@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

html, body {
  color: #333;
  background: #fff;
  line-height: 1.2;
}

a {
  color: #D7171F;
}

a:hover {
  color: #D7171F;
  text-decoration: none;
}

html {
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

button,
input,
select {
  vertical-align: middle;
  outline: none;
}

textarea {
  outline: none;
  resize: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #b3b3b3;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b3b3b3;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b3b3b3;
}

/*::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background-color:#fff;}
::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:4px;}
::-webkit-scrollbar-thumb:hover {background-color:#ccc}
::-webkit-scrollbar-thumb:active {background-color:#ccc}*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

ol,
ul {
  list-style: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

Posted 2016-10-04Note

retinajs使用摘要

官方文档：retinajs

注：需要准备的图片名称格式

image.png
image@2x.png
image@3x.png

现在有4种实现方式：

自动交换“img”标签的”src”路径。
在内联样式中自动交换背景图像的网址。
手动指定一个高分辨率的图像不同位置。
自动创建CSS背景图像媒体查询。

Posted 2016-10-04Note

Retina屏幕下border 1px解决方案

retinal屏幕下@2x, @3x会使css设定好的border 1px变成2倍或者3倍。
以@2x为例，用css解决这个放大的问题（此方法能解决直线）

.scale{
  position: relative;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #ddd;
  -webkit-transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
}

Posted 2016-09-27Note

jQuery插件的基本格式写法

(function($) {

  // funName 是控件名称
  $.fn.funName = function(options) {

    // 设置默认值
    var defaults = {
      choose: 'red',
      out: '#000'
    }

    // 如果options有的话就用options，或者使用default参数
    var options = $.extend(defaults, options);

    // 遍历 return 链式操作
    return this.each(function() { // 这里的this是jQuery对象

      var $this = $(this); // 这里的this是当前循环的dom

      // 例当前dom和同级其它dom分别添加颜色属性
      $this.css('color', options.choose).siblings().css('color', options.out);

    });

  }

})(jQuery);

$(function() {
  // 调用
  $('#demo').funName({'choose':'green', 'out':'#f00'});
});

Posted 2016-08-16Manual

SASS用法指南

一、什么是SASS

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

二、安装和使用

2.1 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

然后，就可以使用了。

Posted 2016-08-16Note

fastclick.js插件使用简单说明

资源下载：fastclick.js

为什么存在延迟？

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？因为它想看看你是不是要进行双击（double tap）操作。

引入插件步骤

1.在HTML页面中添加

<script type='application/javascript' src='/path/to/fastclick.js'></script>

注：必须在页面所有Element之前加载脚本文件先实例化fastclick

2.在JS中添加fastclick的身体，推荐以下做法：

if ('addEventListener' in document) {  
  document.addEventListener('DOMContentLoaded', function() {  
    FastClick.attach(document.body);  
  }, false);  
}

如果你使用了JQuery，那么JS引入就可以改用下面的写法：

$(function() {  
  FastClick.attach(document.body);  
});

如果你使用Browserify或者其他CommonJS-style 系统,当你调用require('fastclick')时，FastClick.attach事件会被返回，加载FastClick最简单的方式就是下面的方法了：

var attachFastClick = require('fastclick');  
attachFastClick(document.body);

Posted 2016-07-23Note

php发出http(post,get)请求

web service model很多时候需要使用别的web service来建造自己的web service，这就需要到使用服务器端进行请求http操作，post或者get请求。

/**
 * PHP发送请求获取数据
 * @param  [type] $url       [description]
 * @param  [type] $post_data [description]
 * @return [type] $result    [description]
 */
function send_post($url, $post_data) {
  $postdata = http_build_query($post_data);
  $options = array(
    'http' => array(
    'method' => 'POST',//or GET
    'header' => 'Content-type:application/x-www-form-urlencoded',
    'content' => $postdata,
    'timeout' => 15 * 60 // 超时时间（单位:s）
    )
  );
  $context = stream_context_create($options);
  $result = file_get_contents($url, false, $context);
  return $result;
}

以上是发送请求的函数，具体操作如下：

//使用方法
$post_data = array(
  'username' => 'stclair2201',
  'password' => 'handan'
);
$result=send_post('http://localhost/ServiceProvider/index.php/Index/getService', $post_data);

Posted 2016-07-18Note

mac下 navicat 如何连接本地 mysql（mamp pro 服务器）

打开mac 下的 navicat
建立相应的连接，点击设置连接属性。
点击advanced
use socket ,打勾。输入/Applications/MAMP/tmp/mysql/mysql.sock

Posted 2016-06-20Note

php提取文字并去除html标记，超出省略号表示

function cutArticle($data) {
  $data=strip_tags($data);//去除html标记
  $pattern = "/&[a-zA-Z]+;/";//去除特殊符号
  $data=preg_replace($pattern,'',$data);
  $data = mb_strimwidth($data,0,150,'....','UTF-8');
  return $data;
}

一、什么是SASS

二、安装和使用

为什么存在延迟？

引入插件步骤

Tags