在CSS2中，要弄阴影效果几乎要靠图片完成
在CSS3中，阴影只需要一句话，并且文字也可以加上阴影
语法
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Code
div {
box-shadow:5px 6px 3px #999;
}
以上代码即可给页面所有div加上阴影效果。现在来解析下各个参数的使用
5px，代表上下偏移，正数往下，负数往上，值越大偏移距离越大6px，代表左右偏移，正数往右，负数往左，值越大偏移距离越大3px，代表模糊程度，值越大，越模糊#999，代表阴影颜色...
小站刚加上搜索功能，由于懒惰就没有给搜索框加上样式，直接input标签了事。
昨天看HTML5相关介绍的时候发现在HTML5中的input标签有search类型，于是赶紧试用了一下
<input type="search" />
把type中的text类型改成search值后，其实也没有多大改变，只不过在搜索框右侧多了一个删除按钮，点击删除可以清楚搜索框里的内容
于是又是根据资料加了一个results属性
<input results="s" type="search" />
...
此验证码类直接拿去就可以用，也可以参考！
此验证码特性：
其中类成员codestr是生成的验证码字符串，默认每一个子的宽度为20像素，依赖GD图像库，请先安装
<?php
/**
* 验证码
* 琼台博客 www.qttc.net
*/
class Code{
// 1. 定义各个成员 有宽、高、画布、字数、类型、画类型
private $width; //宽度
private $height; //高度
private $num; //验证码字数
private $imgType; //生成图片类型
private $Type; //字串类型 1,2,3 三个选项 1 纯数字 2 纯小写字母 3 大小写数字混合
private $hb; //画布
public $codestr; // 验证码字串
public function __construct($height=20,$num=4,$imgType="jpeg",$Type=1){
$this->width = $num*20;
$this->height = $height;
$this->num = $num;
$this->imgType = $imgType;
$this->Type = $Type;
$this->codestr = $this->codestr();
$this->zuhe();
}
// 2. 定义随机获取字符串函数
private function codestr(){
switch($this->Type){
case 1: // 类型为1 获取1-9随机数
$str = implode("",array_rand(range(0,9),$this->num));
break;
case 2: // 类型为2 获取a-z随机小写字母
$str = implode("",array_rand(array_flip(range(a,z)),$this->num));
break;
case 3: // 类型为3 获取数字,小写字母,大写字母 混合
for($i=0;$i<$this->num;$i++){
$m = rand(0,2);
switch($m){
case 0:
$o = rand(48,57);
break;
case 1:
$o = rand(65,90);
break;
case 2:
$o = rand(97,122);
break;
}
$str .= sprintf("%c",$o);
}
break;
}
return $str;
}
// 3. 初始化画布图像资源
private function Hb(){
$this->hb = imagecreatetruecolor($this->width,$this->height);
}
// 4. 生成背景颜色
private function Bg(){
return imagecolorallocate($this->hb,rand(130,250),rand(130,250),rand(130,250));
}
// 5. 生成字体颜色
private function Font(){
return imagecolorallocate($this->hb,rand(0,100),rand(0,100),rand(0,100));
}
// 6. 填充背景颜色
private function BgColor(){
imagefilledrectangle($this->hb,0,0,$this->width,$this->height,$this->Bg());
}
// 7. 干扰点
private function ganrao(){
$sum=floor(($this->width)*($this->height)/3);
for($i=0;$i<$sum;$i++){
imagesetpixel($this->hb,rand(0,$this->width),rand(0,$this->height),$this->Bg());
}
}
// 8. 随机直线 弧线
private function huxian(){
for($i=0;$i<$this->num;$i++){
imageArc($this->hb,rand(0,$this->width),rand(0,$this->height),rand(0,$this->width),rand(0,$this->height),rand(0,360),rand(0,360),$this->Bg());
}
}
// 9. 写字
private function xiezi(){
for($i=0;$i<$this->num;$i++){
$x=ceil($this->width/$this->num)*$i;
$y=rand(1,$this->height-15);
imagechar($this->hb,5,$x+4,$y,$this->codestr[$i],$this->Font());
}
}
// 10. 输出
private function OutImg(){
$shuchu="image".$this->imgType;
$header="Content-type:image/".$this->imgType;
if(function_exists($shuchu)){
header($header);
$shuchu($this->hb);
}else{
exit("GD库没有此类图像");
}
}
// 11. 拼装
private function zuhe(){
$this->Hb();
$this->BgColor();
$this->ganrao();
$this->huxian();
$this->xiezi();
$this->OutImg();
}
public function getCodeStr(){
return $this->codestr;
}
}
...
JavaScript里使用typeof判断不了一个变量是不是数组
typeof []
"object"
typeof {}
"object"
typeof null
"object"
其实默认提供了一个判断是不是数组的函数Array.isArray()
Array.isArray([])
true
Array.isArray({})
false
还有其它一种方式可以判断，使用instanceof关键字
[] instanceof Array
true
当然，它也属于Object
[] instanceof Object
true
...
早之前，要实现透明效果是非常麻烦的一件事，要用gif图片代替。
现在，只需要在CSS里声明一段话即可实现透明效果
还可以修改值来实现透明程度
img {
opacity: .5; /* 兼容 Standard: 火狐 1.5 以上, Opera, Safari */
filter: alpha(opacity=5); /* 兼容 IE8 以下 */
-ms-filter: "alpha(opacity=5)"; /* 兼容 IE 8 */
-khtml-opacity: .5; /* Safari 1.x */
-moz-opacity: .5; /* 火狐 1.5 以下, Netscape */
}
...
直接看代码示例
在遍历数组中注意count的使用次数，不要每次都去计算数组长度
// 琼台博客 www.qttc.net
// Bad
$array = array(1,2,3,4,5,6,7,8,9,10,....);
for($i=0;$k<count($array);$i++){
echo $array[$i];
}
// Good
$array = array(1,2,3,4,5,6,7,8,9,10,....);
for($i=0,$k<count($array);$i<$k;$i++){
echo $array[$i];
}
...
CSS原来只能给图片定义一个固定值，很难做到等比例缩放。因为这里边涉及到运算，而CSS语言中一直都不存在运算的写法。
由于建站中有几块地方需要CSS控制图片等比例缩放，想到今日CSS3高调宣传，感觉CSS3应该能完成此功能。于是上网搜了搜，果然有CSS等比例缩放图片的方法，可惜它并不是CSS3的新特性，但也能用。
img {
max-width: 600px;
max-height: 600px;
scale: expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 600 ? "600px" : "auto"):(this.style.height = this.offsetHeight >= 600 ? "600px" : "auto"));
display:inline;
}
...
经典的冒泡排序法一直是许多程序沿用的其中一种排序法，话说冒泡排序法在效率上比PHP系统函数sort()更高效。这里不讨论性能，所以就不拿它来跟系统性能做对比了。
冒泡排序大概的意思是依次比较相邻的两个数，然后根据大小做出排序，直至最后两位数。由于在排序过程中总是小数往前放，大数往后放，相当于气泡往上升，所以称作冒泡排序。但其实在实际过程中也可以根据自己需要反过来用，大树往前放，小数往后放。
/**
* PHP中的冒泡排序法使用
* 琼台博客 www.qttc.net
*/
// 预先声明一个数组
$arr = array (12,45,28,30,88,67);
echo "原数组";
print_r($arr);
echo "<br/>";
//冒泡排序
function bubbleSort ($arr) {
// 进行第一层遍历
for($i=0,$k=count($arr);$i<$k;$i++) {
// 进行第二层遍历 将数组中每一个元素都与外层元素比较
// 这里的i+1意思是外层遍历当前元素往后的
for ($j=$i+1;$j<$k;$j++) {
// 内外层两个数比较
if($arr[$i]<$arr[$j]){
// 先把其中一个数组赋值给临时变量
$temp = $arr[$j];
// 交换位置
$arr[$j] = $arr[$i];
// 再从临时变量中赋值回来
$arr[$i] = $temp;
}
}
}
// 返回排序后的数组
return $arr;
}
// 直接打印排序后的数组
echo '排序后';
print_r(bubbleSort($arr));
...
几乎只要建站用的VPS都以Linux居多，免费又好用。
虽不能把全部Liunx命令记住，但必要的命令还是要记下为好，今天介绍的命令是df磁盘空间占用情况查看命令
看看帮助文档:
[nicholas@qttc ~]$ df --help
Usage: df [OPTION]... [FILE]...
Show information about the file system on which each FILE resides,
or all file systems by default.
Mandatory arguments to long options are mandatory for short options too.
-a, --all include dummy file systems
-B, --block-size=SIZE use SIZE-byte blocks
--direct show statistics for a file instead of mount point
--total produce a grand total
-h, --human-readable print sizes in human readable format (e.g., 1K 234M 2G)
-H, --si likewise, but use powers of 1000 not 1024
-i, --inodes list inode information instead of block usage
-k like --block-size=1K
-l, --local limit listing to local file systems
--no-sync do not invoke sync before getting usage info (default)
-P, --portability use the POSIX output format
--sync invoke sync before getting usage info
-t, --type=TYPE limit listing to file systems of type TYPE
-T, --print-type print file system type
-x, --exclude-type=TYPE limit listing to file systems not of type TYPE
-v (ignored)
--help display this help and exit
--version output version information and exit
Display values are in units of the first available SIZE from --block-size,
and the DF_BLOCK_SIZE, BLOCK_SIZE and BLOCKSIZE environment variables.
Otherwise, units default to 1024 bytes (or 512 if POSIXLY_CORRECT is set).
SIZE may be (or may be an integer optionally followed by) one of following:
KB 1000, K 1024, MB 1000*1000, M 1024*1024, and so on for G, T, P, E, Z, Y.
Report df bugs to bug-coreutils@gnu.org
GNU coreutils home page: <http://www.gnu.org/software/coreutils/>
General help using GNU software: <http://www.gnu.org/gethelp/>
For complete documentation, run: info coreutils 'df invocation'
...
小站建成之初，就想试试基于jQuery的图片懒加载插件lazyload。看到别的站点实现懒加载看着很炫，虽不知道是否也使用的是jQuery的lazyload插件，但感觉jQuery的lazyload会更方便。按照jQuery的风格，以更少的代码去实现更多的功能想必lazyload也是一样，用法
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$('img').lazyload();
</script>
...