::-webkit-input-placeholder { /* WebKit browsers */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #909;
}
给一个字符的左右两边应用两种不同的颜色，像下面的一样
纯css，利用伪类实现，需要给每个字符添加类
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: black; /* or transparent, any color */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: #f00;
}
如果希望作用于一行字符，则可以使用js (download)
function locatePoint(oInputElem, start, end){
if (oInputElem.setSelectionRange) { //FF
setTimeout(function() {
oInputElem.setSelectionRange(start, end); //将光标定位在textarea的开头，需要定位到其他位置的请自行修改
oInputElem.focus();
}, 0);
}else if (oInputElem.createTextRange) { //IE
var tempText=oInputElem.createTextRange();
tempText.moveStart("character",0-tempText.text.length+start);
tempText.moveEnd("character",0-tempText.text.length+end); //结束点在容器起始位置,配合moveStart可以选中指定位置的字符
tempText.select();
}
}
$('.auto input').click(function(){
var o = document.getElementById("a");
$('.auto input').val('年');
locatePoint(o, 0, 0);
//$('.auto input').focus();
//document.getElementById("a").setSelectionRange(0,0);
});
本文链接：javascript光标的定位
参数设置：
animation: "fade", //Select your animation type (fade/slide/show)
slideshow: true, //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 500, //Set the speed of animations, in milliseconds
directionNav: true, //Create navigation for previous/next navigation? (true/false)
controlNav: true, //Create navigation for paging control of each clide? (true/false)
keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true, //Touch swipe gestures for left/right slide navigation (true/false)
prevText: "Previous", //Set the text for the "previous" directionNav item
nextText: "Next", //Set the text for the "next" directionNav item
randomize: false, //Randomize slide order on page load? (true/false)
slideToStart: 0, //The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
pauseOnHover: false, //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
controlsContainer: "", //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "" //Advanced property: Can declare custom control navigation. Example would be ".flex-control-nav" or "#tabs-nav", etc. The number of elements in your controlNav should match the number of slides/tabs (obviously).
浏览器兼容：
Safari 4+,
Chrome 4+,
Firefox 3.6+,
Opera 10+,
IE7+,
iOS and Android.
jQuery版本要求：
jQuery versions 1.3+.
Gulp自动化工具，可以做啥？代码的编译（sass、less）、合并、压缩、测试；图片的压缩；浏览器自动刷新…
gulp是基于node的，需要安装。
检查node是否安装成功
node -v
安装gulp
$ npm install gulp -g //-g表示在全局环境安装，以便任何项目都能使用它
进入项目目录（确保你根目录存在package.json文件,没有就新建个）
$ npm install gulp --save-dev //—save-dev这个属性会将条目保存到你package.json的devDependencies里面
安装Gulp插件
我们的任务是通过gulp插件完成的，需要啥就安装啥插件。
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
常用的Gulp插件：
* sass的编译（gulp-ruby-sass）
* 自动添加css前缀（gulp-autoprefixer）
* 压缩css（gulp-minify-css）
* js代码校验（gulp-jshint）
* 合并js文件（gulp-concat）
* 压缩js代码（gulp-uglify）
* 压缩图片（gulp-imagemin）
* 自动刷新页面（gulp-livereload）
* 图片缓存，只有图片替换了才压缩（gulp-cache）
* 更改提醒（gulp-notify）
* 清除文件（del）
加载Gulp插件
在根目录下新建文件gulpfile.js，然后在里面通过以下方式加载插件：
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
建立Gulp任务
建立任务编译sass、自动添加css前缀和压缩首先我们编译sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还要压缩，给文件添加.min后缀再输出压缩文件到指定目录，最后提醒任务完成了：
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
所有任务放一起
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
本文链接：gulp前端自动化工具
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>download pic file</title>
</head>
<body>
<a href="download.php?filename=slider.jpg">下载slide.png</a>
<a href="download.php?filename=img/350.png">下载slide.png</a>
</body>
</html>
filename=slider.jpg
filename=img/slider.jpg //文件所在路径
php文件download.php:
<?php
$filename = $_GET['filename'];
header('content-disposition:attachment;filename='.basename($filename));
header('content-length:'.filesize($filename));
readfile($filename);
filename = basename($filename) //设置下载下来的文件名称
basename($filename) //返回路径中的文件名部分
filesize($filename) //返回指定文件的大小
readfile($filename) //输出一个文件
本文链接：php 实现图片等文件的直接下载
最近在做优化，发现网站的js文件没有启用Gzip压缩，已确定服务器开启了Gzip压缩了，但是单单对js无效，最后才发现原来是配置文件里的gzip_types没有设置对，不同网站js的content-type类型可能不一样，有的可能是text/javascript，有的可能是application/javascript，具体可以查看文件的header信息，也可用chrome开发者工具的网络板块中查看文件的type类型:
本文链接：服务器开启Gzip压缩但js文件并无压缩
今天看到国外的一个slider插件感觉好酷哦~ 效果很丰富~ 看到最后，发现有人评论说在ie下好像有问题，就去看了下，发现还真有问题，ie6,7下slider下面的控制按钮不见了，去看了人家的js，貌似没什么情况啊，最后发现原来是text-indent和display:inline-block;惹的祸，改成display:block; float:left;就能在ie7,8下正常显示了哦。
本文链接：一个超酷slider插件
居中有水平居中和垂直居中，各种居中又分多种情况。
行内元素居中：text-align: center;
块级元素居中：
A. 元素宽度确定： margin: x auto;
B. 元素宽度不确定（三种实现方法）：
父元素高度不确定：父元素设置上下padding
父元素高度确定:
A. 单行文本：设置父元素line-height的值等于height的值
B. 多行文本（两种实现方式）：
本文链接：元素的各种居中问题
之前在项目中要用到一个点击切换的slider，本来这是比较常见的效果，成熟插件也已经有好多，但这次要的效果有点不一样。所以自己搞了个。顺便学了下如何写插件，嘿嘿~
本文链接：一个简单的slider插件