2010年12月 文章归类

前端必须熟悉的10个CSS3属性

三水清 2010-12-29 18:59:576 Comments

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。 上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius

border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
圆
许多读者也许不会意识到我们可以用这个属性来做一个圆。
继续阅读全文……

前端必须掌握30个CSS3选择器

三水清 2010-12-28 21:57:58快抢沙发

也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

* {  
 margin: 0;  
 padding: 0;  
}

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

*选择器也可以应用到子选择器中，例如下面的代码：

#container * {  
 border: 1px solid black;  
}

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

查看演示

兼容性
  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

#ID：ID选择器

#container {  
   width: 960px;  
   margin: auto;  
}

ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

查看演示

兼容性
  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

.class:类选择器

.error {  
  color: red;  
}

类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

查看演示

继续阅读全文……

分享一个php验证码类，支持中文字母数字，还可自定义字体

三水清 2010-12-20 01:57:072 Comments

在实际项目开发中经常会遇到验证码的问题，比如登陆页面、留言页面、注册页面……

验证码的原理很简单:利用GD库创建一个图片，图片当然要加上必要的干扰码，然后在服务器端存入SESSION，等用户提交的时候判断session是否相同。

今天分享的PHP验证码类，支持中文字符、字母数字，还可以自定义字体文件，已经够大家使用的了

< ?php
/*
* Captcha Class base on PHP GD Lib
* @author Design
* @version 1.0
* @copyright js8.in 2010
* @demo
* include('captchaClass.php');
* $captchaDemo=new Captcha();
* $captchaDemo->createImage();
*/
class Captcha{
 //@定义验证码图片高度
 private $height;
 //@定义验证码图片宽度
 private $width;
 //@定义验证码字符个数
 private $textNum;
 //@定义验证码字符内容
 private $textContent;
 //@定义字符颜色
 private $fontColor;
 //@定义随机出的文字颜色
 private $randFontColor;
 //@定义字体大小
 private $fontSize;
 //@定义字体
 private $fontFamily;
 //@定义背景颜色
 private $bgColor;
 //@定义随机出的背景颜色
 private $randBgColor;
 //@定义字符语言
 private $textLang;
 //@定义干扰点数量
 private $noisePoint;
 //@定义干扰线数量
 private $noiseLine;
 //@定义是否扭曲
 private $distortion;
 //@定义扭曲图片源
 private $distortionImage;
 //@定义是否有边框
 private $showBorder;
 //@定义验证码图片源
 private $image;
 
 //@Constructor 构造函数
 public function Captcha(){
 $this->textNum=4;
 $this->fontSize=16;
 $this->fontFamily='c:\\windows\\fonts\SIMYOU.ttf';//设置中文字体，可以改成linux的目录
 $this->textLang='en';
 $this->noisePoint=30;
 $this->noiseLine=3;
 $this->distortion=false;
 $this->showBorder=false;
 }

继续阅读全文……

利用百度ping服务API加快文章收录，秒收不是梦

三水清 2010-12-20 01:04:1511 Comments

上一篇文章提到了谷歌的ping服务接口，其实国内的搜索引擎百度也有类似的服务，今天就介绍下百度博客ping服务，百度博客Ping服务的详细介绍，请移步：http://www.baidu.com/search/blogsearch_help.html#n7。百度的ping服务也是基于XML-RPC标准协议，但是与谷歌ping服务不同的是百度的ping发送的xml格式不同，我们需要使用string节点包裹内容。

例如：

< ?xml version="1.0" encoding="UTF-8"?>
<methodcall>
<methodname>weblogUpdates.extendedPing</methodname>
<params>
<param>
<value><string>断桥残雪部落格</string></value>
</param>
<param>
<value><string>http://js8.in/</string></value>
</param>
<param>
<value><string>http://js8.in/644.html</string></value>
</param>
<param>
<value><string>http://js8.in/feed</string></value>
</param>
</params>
</methodcall>

根据上篇提到的谷歌接口，我们只要改变一下提交的xml内容即可，当然百度ping服务返回的判断也是跟谷歌的不同，也可以做相应的修改，
继续阅读全文……

利用google博客的ping服务接口API加快网站收录

三水清 2010-12-17 18:38:028 Comments

谷歌博客推出了ping服务已经很长时间了，如果我们的博客是wordpress可以很方便的设置ping服务，但是如果我们的博客不是wordpress，或者我们的网站程序是自己手写的，那么就要自己写RPC代码了。今天断桥残雪分享一下自己写的PHP的XML-RPC代码。在此之前先说说ping服务的好处以及wordpress的ping设置。

配置ping服务，加快收录速度

谷歌的ping服务是一种快速收录的方法，打个比方就是：我们写了一篇文章想要谷歌收录，我们就可以使用ping服务来通知下谷歌，要googlebot尽快来抓取收录。谷歌官方的解释：

通过 Google“博客搜索”Ping API, 用户可以程序化的方式将博客内容的更新通知给 Google“博客搜索”引擎。这对于经常更新博客内容的用户尤其有用。博客服务提供商的管理人员也可以利用此API将其平台上的博客内容变化向 Google 通告，以便 Google“博客搜索”及时抓取来自这一服务提供商的最新内容。为设置对 Google“博客搜索”的自动 Ping 机制，请按照如下所述设置XML-RPC客户端或REST客户端以发送请求。您可以任选一种方法进行通知；两者都将按照相同的方式进行处理。

wordpress设置ping的方法

wordpress自身就带着ping服务，只要我们配置一下就可以了，步骤是：设置→撰写→更新服务。常用的ping服务有以下几个：

http://rpc.pingomatic.com/
http://ping.baidu.com/ping/RPC2(百度的)
http://blogsearch.google.com/ping/RPC2(谷歌的)
http://api.my.yahoo.com/RPC2(雅虎的)
http://api.my.yahoo.com/rss/ping(雅虎的)
http://www.feedsky.com/api/RPC2(feedsky的)

谷歌ping服务的PHP代码

关于RPC的详细介绍可以移步维基百科，谷歌ping服务的标准：

RPC端点： http://blogsearch.google.com/ping/RPC2
调用方法名： weblogUpdates.extendedPing
参数： (应按照如下所列的相同顺序传送)

  • 站点名
  • 站点URL
  • 需要检查更新的页面URL
  • 相应的RSS、RDF或Atom种子的URL
  • 可选：页面内容的分类名称(或标签)。您可以指定多个值，之间用’|'字符进行分隔。

继续阅读全文……

CSS3 Media Queries使用方法详解

三水清 2010-12-07 21:57:34快抢沙发

在css2中允许我们使用media的属性，例如使用screen和print，我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章，关于css2中的media文章，推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print，而且支持多媒体多分辨率的样式表。

我们先来看下CSS3 Media Queries的演示实例：http://js8.in/mywork/css3media.html，来自于（Web Designer Wall）

Max Width

故名思意，就是最大宽度的意思，例如下面的代码是在宽度小于600px的时候才执行的。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

也可以在link标签里面使用media属性，即下面的写法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

跟Max Width相反，是最小宽度，例如当宽度大于900px的时候才运行下面的代码

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

继续阅读全文……

使用mysqldump、into outfile和load data进行数据库导入导出备份

三水清 2010-12-03 19:02:53快抢沙发

遇到了大批量导入导出数据的时候真的比较麻烦，动则几G的数据，操作起来也是比较慢的，而且如果稍有不慎，还要重写处理，最简单的方法也是效率最低的方法就是使用PHP写导入导出数据程序，用Shell来跑PHP，可是大家一直忽略了mysqldump和mysql的into outfile与load data，如果这几个命令使用灵活了，对于数据库导入导出以及备份是很方便的。下面简单讲解一下，高手飘过，因为对于数据库操作我也是小白。

使用mysqldump 和 source导入导出备份数据

如果要导出整个数据库 或者某一个数据库的一个表，并且保持数据库中表的名字不变，再次导入到另外一个数据库的时候，可以使用mysqldump和source的方法。mysqldump的具体使用参数可以使用mysqldump --help来查看，这里我简单说下我常用的几种参数。

1、mysqldump导出整个表的数据，包括建表信息，这也是最基础的用法

mysqldump -uusername -ppassword databasename tablename > /home/db/db_bak2012

其中-u -p 和mysql的参数是一样的，分别代表了用户名和密码，后面跟着是数据库名和表明，>之后的是要导出的路径。

上面的导出数据要导入数据库的时候可以进入mysql，然后使用下面的命令来实现

source /home/db/db_bak2012

继续阅读全文……

使用mysql筛选出某字段中文的记录

三水清 2010-12-02 17:08:543 Comments

项目中遇到了一个数据处理的问题，简单的描述一下：字段name中有英文的也有中文的，数据比较庞大，如果使用php处理整个表都要捣鼓一遍，不是很“低碳”。

后来想到了使用mysql的正则，于是上网查了一下，找到了以下的方法：

select * from table where not name regexp '^[1-9A-Za-z]';

这样就可以筛选出来name字段中全部为中文的记录了。
记录一下

♦▐返回顶部