/*
******************************************
字符串函数扩充
******************************************
*/
/*
===========================================
//去除左边的空格
===========================================
*/
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, "");
}
/*
===========================================
//去除右边的空格
===========================================
*/
String.prototype.Rtrim = function()
{
return this.replace(/(\s*$)/g, "");
}
/*
===========================================
//去除前后空格
===========================================
*/
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
/*
===========================================
//得到左边的字符串
===========================================
*/
String.prototype.Left = function(len)
{
if(isNaN(len)||len==null)
{
len = this.length;
}
else
{
if(parseInt(len)<0||parseInt(len)>this.length)
{
len = this.length;
}
}
return this.substr(0,len);
}
/*
===========================================
//得到右边的字符串
===========================================
*/
String.prototype.Right = function(len)
{
if(isNaN(len)||len==null)
{
len = this.length;
}
else
{
if(parseInt(len)<0||parseInt(len)>this.length)
{
len = this.length;
}
}
return this.substring(this.length-len,this.length);
}
/*
===========================================
//得到中间的字符串,注意从0开始
===========================================
*/
String.prototype.Mid = function(start,len)
{
return this.substr(start,len);
}
/*
===========================================
//在字符串里查找另一字符串:位置从0开始
===========================================
*/
String.prototype.InStr = function(str)
{
if(str==null)
{
str = "";
}
return this.indexOf(str);
}
/*
===========================================
//在字符串里反向查找另一字符串:位置0开始
===========================================
*/
String.prototype.InStrRev = function(str)
{
if(str==null)
{
str = "";
}
return this.lastIndexOf(str);
}
/*
===========================================
//计算字符串打印长度
===========================================
*/
String.prototype.LengthW = function()
{
return this.replace(/[^\x00-\xff]/g,"**").length;
}
/*
===========================================
//是否是正确的IP地址
===========================================
*/
String.prototype.isIP = function()
{
var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if (reSpaceCheck.test(this))
{
this.match(reSpaceCheck);
if (RegExp.$1 <= 255 && RegExp.$1 >= 0
&& RegExp.$2 <= 255 && RegExp.$2 >= 0
&& RegExp.$3 <= 255 && RegExp.$3 >= 0
&& RegExp.$4 <= 255 && RegExp.$4 >= 0)
{
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
/*
===========================================
//是否是正确的长日期
===========================================
*/
String.prototype.isLongDate = function()
{
var r = this.replace(/(^\s*)|(\s*$)/g, "").match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if(r==null)
{
return false;
}
var d = new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
/*
===========================================
//是否是正确的短日期
===========================================
*/
String.prototype.isShortDate = function()
{
var r = this.replace(/(^\s*)|(\s*$)/g, "").match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)
{
return false;
}
var d = new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
/*
===========================================
//是否是正确的日期
===========================================
*/
String.prototype.isDate = function()
{
return this.isLongDate()||this.isShortDate();
}
/*
===========================================
//是否是手机
===========================================
*/
String.prototype.isMobile = function()
{
return /^0{0,1}13[0-9]{9}$/.test(this);
}
/*
===========================================
//是否是邮件
===========================================
*/
String.prototype.isEmail = function()
{
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this);
}
/*
===========================================
//是否是邮编(中国)
===========================================
*/
String.prototype.isZipCode = function()
{
return /^[\\d]{6}$/.test(this);
}
/*
===========================================
//是否是有汉字
===========================================
*/
String.prototype.existChinese = function()
{
//[\u4E00-\u9FA5]為漢字﹐[\uFE30-\uFFA0]為全角符號
return /^[\x00-\xff]*$/.test(this);
}
/*
===========================================
//是否是合法的文件名/目录名
===========================================
*/
String.prototype.isFileName = function()
{
return !/[\\\/\*\?\|:"<>]/g.test(this);
}
/*
===========================================
//是否是有效链接
===========================================
*/
String.prototype.isUrl = function()
{
return /^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-./?%&=]*)?$/i.test(this);
}
/*
===========================================
//是否是有效的身份证(中国)
===========================================
*/
String.prototype.isIDCard = function()
{
var iSum=0;
var info="";
var sId = this;
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
if(!/^\d{17}(\d|x)$/i.test(sId))
{
return false;
}
sId=sId.replace(/x$/i,"a");
//非法地区
if(aCity[parseInt(sId.substr(0,2))]==null)
{
return false;
}
var sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
//非法生日
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))
{
return false;
}
for(var i = 17;i>=0;i--)
{
iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11);
}
if(iSum%11!=1)
{
return false;
}
return true;
}
/*
===========================================
//是否是有效的电话号码(中国)
===========================================
*/
String.prototype.isPhoneCall = function()
{
return /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/.test(this);
}
/*
===========================================
//是否是数字
===========================================
*/
String.prototype.isNumeric = function(flag)
{
//验证是否是数字
if(isNaN(this))
{
return false;
}
switch(flag)
{
case null: //数字
case "":
return true;
case "+": //正数
return /(^\+?|^\d?)\d*\.?\d+$/.test(this);
case "-": //负数
return /^-\d*\.?\d+$/.test(this);
case "i": //整数
return /(^-?|^\+?|\d)\d+$/.test(this);
case "+i": //正整数
return /(^\d+$)|(^\+?\d+$)/.test(this);
case "-i": //负整数
return /^[-]\d+$/.test(this);
case "f": //浮点数
return /(^-?|^\+?|^\d?)\d*\.\d+$/.test(this);
case "+f": //正浮点数
return /(^\+?|^\d?)\d*\.\d+$/.test(this);
case "-f": //负浮点数
return /^[-]\d*\.\d$/.test(this);
default: //缺省
return true;
}
}
/*
===========================================
//是否是颜色(#FFFFFF形式)
===========================================
*/
String.prototype.IsColor = function()
{
var temp = this;
if (temp=="") return true;
if (temp.length!=7) return false;
return (temp.search(/\#[a-fA-F0-9]{6}/) != -1);
}
/*
===========================================
//转换成全角
===========================================
*/
String.prototype.toCase = function()
{
var tmp = "";
for(var i=0;i<this.length;i++)
{
if(this.charCodeAt(i)>0&&this.charCodeAt(i)<255)
{
tmp += String.fromCharCode(this.charCodeAt(i)+65248);
}
else
{
tmp += String.fromCharCode(this.charCodeAt(i));
}
}
return tmp
}
/*
===========================================
//对字符串进行Html编码
===========================================
*/
String.prototype.toHtmlEncode = function()
{
var str = this;
str=str.replace(/&/g,"&");
str=str.replace(/</g,"<");
str=str.replace(/>/g,">");
str=str.replace(/\'/g,"'");
str=str.replace(/\"/g,""");
str=str.replace(/\n/g,"<br>");
str=str.replace(/\ /g," ");
str=str.replace(/\t/g," ");
return str;
}
/*
===========================================
//转换成日期
===========================================
*/
String.prototype.toDate = function()
{
try
{
return new Date(this.replace(/-/g, "\/"));
}
catch(e)
{
return null;
}
}
1.Asc(x),Chr(x):转换字符,字符码
2。Filter:搜寻字符串数组中的特定字符串
格式:v=filter(x,s[,include[,compare]])
实例:
Dim x()={"kjwang","wangkj","peter"}
Dim v
v=filter(x,"kj") '结果v(0)="kjwang",v(1)="wangkj"
v=filter(x,"kj",false) '结果v(0)="peter"
v=filter(x,"kj",true,vbTextCompare) '不分大小写搜寻
3.InStr:寻找字符串位置(InstrRev:倒过来寻找字符串)
格式:
v=instr(x,y) '从x字符串第1个字符起找出y字符串出现的位置
v=instr(n,x,y) '从x字符串第n个字符起找出y字符串出现的位置
格式:
v=InstrRev(x,s[,n[,Compare]])
4。Join:将字符串连接
格式:v=join(x[,d])’d为分隔字符
5。Len(x):计算字符串x的长度
格式:v=len(x)
6.Left(x,n):返回字符串x左边n个字符(对应Right(x,n))
7。Mid:读取字符串x中间的字符
格式:v=mid(x,n,m)
8。LTrim(x),RTim(x),Trim(x)去空白字符
9.Replace:字符串取代
格式:v=Replace(x,s,r)
实例:x="i saw a saw a saw"
v=replace(x,"saw","so") 'v="i so a so a so"
10.Split:字符串分割
格式:v=split(s[,d])
实例:v=split("vb.net,iis6.0,asp.net",",")
'结果v(0)="vb.net",v(1)="iis6.0",v(2)="asp.net"
11.StrReverse:反转字符串
实例:v=strreverse("kjwang") 'v="gnawjk"
12.UCase(x),LCase(x):变换英文字母的大小写
实例:x="hello,VB中文!"
v=UCase(x) 'v="HELLO,VB中文!"
1.取出日期时间
-1)DateValue(x),TimeValue(x)
格式:v=DateValue(x) :取出的“日期”部分
v=timevalue(x) '类上
-2)Year(x),Month(x),Day(x)
格式:v=Year(x)
v=Month(x)
v=Day(x)
Hour(x),Minute(x),Second(x):取出时,分,秒
-3)DateSerial(Y,M,D):合并年、月、日成为日期
实例:Dim v
v=DateSerial(1996,10,5) 'v=1996/10/5
TimeSerial(H,M,S):合并时、分、秒成为时间
2.Now:读取系统日期时间
格式:v=now
3.Timer:从凌晨12:00:00AM起所经过的秒数
格式:v=timer
4.DatePart(p,x):取出年、月、日等各部分的数值
实例:Dim X=#2/10/1996 16:45:30#
v=DatePart("yyyy",X) 'v=1996年
v=DatePart("m",X) 'v=2月
v=DatePart("d",X) 'v=10日
v=DatePart("h",X) 'v=16时
v=DatePart("n",X) 'v=45分
v=DatePart("s",X) 'v=30秒
v=DatePart("q",X) 'v=1季(第一季,春季)
v=DatePart("y",X) 'v=41天(1996年的第41天)
v=DatePart("ww",X) 'v=6周(1996年的第6周)
v=DatePart("w",X) 'v=7(第6周的第7天,即星期六)
5。DateAdd(p,n,x):加减若干时间后的新日期时间
格式:v=DateAdd(p,n,x) 'p值同上如:"yyyy"、"m"等
实例:Dim x=#1/31/1996 16:45:30#
v=dateadd("yyyy",-3,x) '减3年,v=1993/1/31 16:45:30
6.DateDiff(p,x1,x2):计算两日期时间的差值 'p值同上
实例:dim x1=#12/31/1996 16:45:30#
x2=#2/10/1997 9:30:50#
v=datediff("yyyy",x1,x2) 'v=1年
7。FormatDateTime:日期时间的格式化
格式:v=formatdateyime(x[,日期格式])
日期格式值:DateFormat.GeneralDate 、 DateFormat.LongDate、
DateFotmat.ShortDate、DateFormat.LongTime、DateFormat.ShortTime
8.MonthName:返回月份名称
实例:v=monthname(5) 'v="五月"
9.WeekDayName:返回星期名称 ’用法同8.
下载地址如下:
http://downloads.zend.com/studio-eclipse/6.0.1/ZendStudioForEclipse-6_0_1.exe (for windows)
http://downloads.zend.com/studio-eclipse/6.0.1/ZendStudioForEclipse-6_0_1.tar.gz (for linux)
http://downloads.zend.com/studio-eclipse/6.0.1/ZendStudioForEclipse-6.0.1.dmg (for mac,不好意思,一直不知道这个是MAC下的安装程序)
之前的注册机还可以继续使用,本人已测,呵呵~
在线注册机:
下载文件 (已下载 256 次)也可以使用下面的一组注册码进行注册
Serial:341747F1116666990000
下面我会给出我的理由,为什么PHP不适合于比小型业余网站更大的网站。
1. 对递归的不良支持
递归是一种函数调用自身的机制。这是一种强大的特性可以把某些复杂的东西变得很简单。有一个使用递归的例子是快速排序(quicksort)。不幸的是,PHP并不擅长递归。Zeev,一个PHP开发人员,说道:“PHP 4.0(Zend)对密集数据使用了栈方式,而不是使用堆方式。也就是说它能容忍的递归函数的数量限制和其他语言比起来明显少。”见bug 1901。这是一个很不好的借口。每一个编程语言都应该提供良好的递归支持。
2. 许多PHP模块都不是线程安全的
在几年前,Apache发布了Web服务器的2.0版。这个版本支持多线程模式,在这个模式下,软件一个一部分可以同时运行多个。PHP的发明者说PHP的核心是线程安全的,但是非核心模块不一定是。但是十次有九次,你想要在PHP脚本中使用这种模块,但这又使你的脚本不能合适Apache的多线程模式。这也是为什么PHP小组不推荐在Apache 2 的多线程模式下运行PHP。不良的多线程模式支持使PHP常被认为是Apache 2依然不流行的原因之一。
请阅读这篇讨论: Slashdot: Sites Rejecting Apache 2?.
3. PHP 由于商业原因而不健全
通过使用缓存,PHP的性能可以陡增500%[见基准测试]。那么为什么缓存没有被构建在PHP中呢?因为Zend——PHP的制造者,它在销售自己的Zend Accelerator,所以当然,他们不想抛弃自己的商业产品这块肥肉。
但是有另一个可选择的: APC. (Zend后来推出Zend Optimizer,免费的加速器——译者)
4. 没有命名空间
设想某个人制作了一个PHP模块用来阅读文件。模块中一个函数叫做read。然后另一个人的模块可以读取网页的,同样包含一个函数read。然后我们就无法同时使用这两个模块了,因为PHP不知道你要用哪个函数。 但是有一个很简单的解决方法,那就是命名空间。曾经有人建议PHP5加入这个特性,但不幸得是他没有这么做。现在,没有命名空间,每个函数都必须加上模块名作为前缀,来避免名称冲突。这导致了函数名恐怖得长,例如xsl_xsltprocessor_transform_to_XML让代码难于书写和理解。
5. 不标准的日期格式字符
很多程序员对 日期格式字符 都很熟悉,它是从UNIX和C语言中来的。其他一些编程语言采用了这个标准,但是很奇怪的,PHP有它自己的一套完全不兼容的日期格式字符。在C中,“%j”表示一年中的当天,在PHP中他表示一个月中的当天。然而使事情更混乱的是:Smarty (一个很流行的PHP模版引擎)的 strftime 函数和 date_format 函数,却使用了C/UNIX的格式化字符。
6. 混乱的许可证
你也许认为PHP是免费的,所有的在手册中提到的PHP模块也是免费的。错了!例如,如果你想在PHP中生成PDF文件,你会在手册中发现两个模块:PDF 和 ClibPDF。但是这两个都是有商业许可证的。所以,你所使用的每个模块,你都要确保你同意他的许可证。
7. 不一致的函数命名规则
有些函数名称是有多个单词组成的。一般有三种单词组合的习惯:
直接拼接:getnumberoffiles
用下划线分开:get_number_of_files
骆驼法则:getNumberOfFiles
大部分语言选择其中一中。但是PHP都用到了。
例如,你想要把一些特殊字符转换成HTML实体,你会使用函数htmlentities (直接拼接单词)。如果你要使用相反的功能,你要用到它的小弟弟html_entity_decode。由于某些特殊的原因,这个函数名是由下划线分隔单词。怎么能这样呢?你知道有一个函数叫strpad。或者他是str_pad?每次你都要查看一下到底这个符号是什么或者直接等他出现一个错误。函数是不分大小写的,所以对于PHP来说rawurldecode 和RawUrlDecode之间没有什么区别。这也很糟糕,因为两个都使用到了同时他们看上去还不一样,混淆了阅读者。
8. 魔法引用的地狱
魔法引用(Magic quote)可以保护PHP脚本免受SQL注入攻击。这很好。但是出于某些原因,你可以在php.ini中关闭这个配置。所以你如果要写出一个有弹性的脚本,你总要检查魔法引用是开启还是关闭。这样一个“特性”应该让编程更简单,而事实上变得更复杂了。
9. 缺少标准框架
一个成长中的网站没有一个整体框架,最终会变成维护的噩梦。一个框架可以让很多工作变得简单。现在最流行的框架模型时MVC-模型,在其中表现层、业务逻辑和数据库访问都分离开了。
很多PHP网站不使用MVC-模型。他们甚至没有一个框架。甚至现在有一些PHP框架同时你都可以自己写一个,关于PHP的文章和手册没有提高框架的一个字。同时JSP-开发人员使用像Struts的框架、ASP开发人员使用.net,看起来好像这些概念都广泛被PHP开发人员所了解。这就说明了PHP实际上到底是多专业。
总结
什么问题?
对于非常小的项目,它可以是一个十分符合人意的编程语言。但是对于较大的和更为复杂的项目,PHP就显出他的薄弱了。当你不断地摸索之后,你会发现我提到的某些问题的解决方案。所以,当解决方案已知之后,为什么不能修正他呢?另外为什么这些修补不在手册中提到呢? 一个开源的语言十分流行是一件好事。但不幸得是,它不是一个伟大的语言。我希望所有的问题能有一天得到解决(也许在PHP6?),然后我们就将拥有一个开源语言,他既开源,又好用。
到现在,当你要启动一个多于5个脚本页面的项目的时候,你最好考虑C#/ASP.NET或者 Java/JSP或者也许Python同样是一个更好的选择。
看完了,你还是只钟情于PHP吗?或者说,已经找到了更好的选择呢?
CacheClockRate 3600
RepeatLimit 32
RewriteRule ^(.*)/post/([0-9]+)/?([0-9]+)?/?([0-9]+)?/?$ $1/read\.php\?entryid=$2&page=$3&part=$4 [I]
RewriteRule ^(.*)/page/([0-9]+)/([0-9]+)/?$ $1/index\.php\?mode=$2&page=$3 [I]
RewriteRule ^(.*)/starred/([0-9]+)/?([0-9]+)?/?$ $1/star\.php\?mode=$2&page=$3 [I]
RewriteRule ^(.*)/category/([^/]+)/?([0-9]+)?/?([0-9]+)?/?$ $1/index\.php\?go=category_$2&mode=$3&page=$4 [I]
RewriteRule ^(.*)/archiver/([0-9]+)/([0-9]+)/?([0-9]+)?/?([0-9]+)?/?$ $1/index\.php\?go=archive&cm=$2&cy=$3&mode=$4&page=$5 [I]
RewriteRule ^(.*)/date/([0-9]+)/([0-9]+)/([0-9]+)/?([0-9]+)?/?([0-9]+)?/?$ $1/index\.php\?go=showday_$2-$3-$4&mode=$5&page=$6 [I]
RewriteRule ^(.*)/user/([0-9]+)/?$ $1/view\.php\?go=user_$2 [I]
RewriteRule ^(.*)/tags/([^/]+)/?([0-9]+)?/?([0-9]+)?/?$ $1/tag\.php\?tag=$2&mode=$3&page=$4 [I]
RewriteRule ^(.*)/component/id/([0-9]+)/?$ $1/page\.php\?pageid=$2 [I]
RewriteRule ^(.*)/component/([^/]+)/?$ $1/page\.php\?pagealias=$2 [I]
#Customized URL
RewriteRule ^(.*)/alias/([^/]*)\_?([0-9]+)?\_?([0-9]+)?/?$ $1/read\.php\?blogalias=$2&page=$3&part=$4 [I]
#Force redirection for old rules
RewriteRule ^(.*)/post/([0-9]+)\.htm$ $1/post/$2/ [R]
RewriteRule ^(.*)/post/([0-9]+)\_([0-9]+)\.htm$ $1/post/$2/$3/ [R]
RewriteRule ^(.*)/post/([0-9]+)\_([0-9]+)\_([0-9]+)\.htm$ $1/post/$2/$3/$4/ [R]
RewriteRule ^(.*)/index\_([0-9]+)\_([0-9]+)\.htm$ $1/page/$2/$3/ [R]
RewriteRule ^(.*)/star\_([0-9]+)\_([0-9]+)\.htm$ $1/starred/$2/$3/ [R]
RewriteRule ^(.*)/category\_([0-9]+)\.htm$ $1/category/$2/ [R]
RewriteRule ^(.*)/category\_([0-9]+)\_([0-9]+)\_([0-9]+)\.htm$ $1/category/$2/$3/$4/ [R]
RewriteRule ^(.*)/archive\_([0-9]+)\_([0-9]+)\.htm$ $1/archiver/$2/$3/ [R]
RewriteRule ^(.*)/archive\_([0-9]+)\_([0-9]+)\_([0-9]+)\_([0-9]+)\.htm$ $1/archiver/$2/$3/$4/$5/ [R]
RewriteRule ^(.*)/showday\_([0-9]+)\_([0-9]+)\_([0-9]+)\.htm$ $1/date/$2/$3/$4/ [R]
RewriteRule ^(.*)/showday\_([0-9]+)\_([0-9]+)\_([0-9]+)\_([0-9]+)\_([0-9]+)\.htm$ $1/date/$2/$3/$4/$5/$6/ [R]
如何配置PHP环境及安装isapi_write请看Windows 2003 IIS下配置MySQL+PHP+ISAPI_Rewrite+Zend+Xcache...
要使该规则生效,请首先修改inc/url.php...
修改方法: 打开inc/url.php(不要用记事本打开,用支持utf-8去BOM的编辑工具打开),然后找到
函数里的
然后重启IIS,看看别名是否生效了...别名会显示成http://www.niuc.net/alias/isapi-rewrite-rule-for-bo-blog/
如果不喜欢这种URL样式,可以修改成其他的...把规则里的
[code]#Customized URL
RewriteRule ^(.*)/alias/([^/]*)\_?([0-9]+)?\_?([0-9]+)?/?$ $1/read\.php\?blogalias=$2&page=$3&part=$4 [I]
前面的RewriteRule ^(.*)/alias/([^/]*)\_?([0-9]+)?\_?([0-9]+)?/?改成其他的样式,然后对应修改alias/{$alias}/样式就可以了...
此修改只推荐有编写正则表达式能力的用户,如果你不知道URL REWRITE规则,或者不知道怎么写正则表达式,请不要盲目修改...
有需要的用户,可以留言,把你想要修改的样式告诉我,我帮你修改...
修改好的代码文件下载:
下载文件 (已下载 22 次)有问题,请留言联系...
1.改进界面:包括美化,及颜色
2.增加在线用户最后动作提示与追踪(模仿discuz)
3.增加在线用户来路提示与追踪(应http://bbs.bo-blog.com/viewthread.php?tid=16460&page=1#pid511809楼"人仔"的要求制作的)
4.把inc目录里的wry.dat更新为08年4月15日的纯真IP库,以后想更新的人请自行到http://www.cn88.net中下载,下载后把IP库名字改为wry.dat,复制到inc目录,并覆盖同名文件即可...注意:此inc目录为/plugin/viewstat/inc,非/inc目录...
在线演示...估计没法做到...只有出个截图看看...
下载:
下载文件 (已下载 48 次)
下载文件 (已下载 58 次)bo-blog自动加版权插件(add copyright for bo-blog)2.0
由于本人对bo-blog认识不足,所以经历了以上两个版本后,今天又找到了新的变量,可以直接取到需要的数据,所以特更新3.0版...
功能如2.0一样...
2.增加了发布网站名称自动获取.
3.增加了是否为转载文章判断(判断依据为发布日志时,是否有填写"文章来源"项,如果使用本插件,建议把"网址"和"名称"都填上,好象bo-blog的逻辑就是必须两者都有填才入库吧).
更新的地方为不再重新查询数据库...改为使用global $records...2.0因为时间紧迫,所以没有找到该变量可以使用...
这一版主要围绕了这点作改动...更高效,不会产生额外的数据库压力...
请下载了2.0的朋友,再重新下载这份...而这份,估计是最终版了...呵呵...没什么好改了...
同时取消2.0和1.0版的下载...
3.1更新内容:
把 $url=$config['blogurl'].'/'.getlink_entry($itemid, $blogalias);
改为 $url=$config['blogurl'].'/'.getlink_entry($itemid, $records[0]['blogalias']);
防止使用别名时出错...请大家重新下载或者打开entrycontentend.php找到该行自行修改...
下载文件 (已下载 65 次)前两天看到bo-blog论坛上有人提出了新的要求(当初也有想过,不过技术没过关没做),详细请看http://bbs.bo-blog.com/viewthread.php?tid=17134&extra=page%3D1
主要是很多网友可能很多文章都是转载过来,甚至是采集过来,在日益高涨的维权呼声下,把所有文章都说成
$all_tagentries=$blog->getarraybyquery("SELECT `tags` FROM `{$db_prefix}blogs` WHERE tags<>'' AND tags<>'>'");
$all_tag_lists=@implode('', $all_tagentries['tags']);
$all_tag_lists=@explode('>', $all_tag_lists);
$counted_list=array_count_values($all_tag_lists);
$all_tags=$blog->getgroupbyquery("SELECT tagname FROM `{$db_prefix}tags`");
for ($i=0; $i<count($all_tags); $i++) {
$to_update_value=floor($counted_list[$tmp_tags=$all_tags[$i]['tagname']]);
if ($to_update_value==0) {
$blog->query("UPDATE `{$db_prefix}blogs` SET tags=replace(tags, '>{$all_tags[$i]['tagname']}>', '>')");
$blog->query("DELETE FROM `{$db_prefix}tags` WHERE `tagname`='{$all_tags[$i]['tagname']}'");
}
else {
$blog->query("UPDATE `{$db_prefix}tags` SET tagcounter='{$to_update_value}' WHERE `tagname`='{$all_tags[$i]['tagname']}'");
}
}
catchsuccess($finishok2, $backtotag);
}
在TAG管理页增加了自动修复所有TAG功能...并自动删除数量为0的TAG...使管理更加轻松方便...以下详细代码文件...
下载文件 (已下载 13 次)解压后请把cp_category.php移动到admin目录内...backend.php文件请移动到lang/zh-cn目录下...然后进后台,打开tag管理,最下面就有对应的功能选项...
如果不需要清空数量为0的TAG...请打开cp_category.php文件,把
$blog->query("UPDATE `{$db_prefix}blogs` SET tags=replace(tags, '>{$all_tags[$i]['tagname']}>', '>')");
$blog->query("DELETE FROM `{$db_prefix}tags` WHERE `tagname`='{$all_tags[$i]['tagname']}'");
}
else {
$blog->query("UPDATE `{$db_prefix}tags` SET tagcounter='{$to_update_value}' WHERE `tagname`='{$all_tags[$i]['tagname']}'");
}
替换为
也就是说把逻辑体去掉删除部分代码就可以了...
如果有什么问题,请留言告诉我...
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
以下是引用片段:
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
以下是引用片段:
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
以下是引用片段:
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
以下是引用片段:
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
以下是引用片段:
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
以下是引用片段:
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS:
以下是引用片段:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:
以下是引用片段:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>
CSS:
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,都没有设置margin,padding,boeder等属性!
最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”,当然也可能是我的视野太小了,或者是说世界太大了,我自己还是感觉还有一大堆我看不到的东西。
先来看一下一个我比较认同的概念:
框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。
基于继承的框架被称为白盒框架。所谓白盒即具备可视性,被继承的父类的内部实现细节对子类而言都是可知的。利用白盒框架的应用开发者通过衍生子类或重写父类的成员方法来开发系统。子类的实现很大程度上依赖于父类的实现,这种依赖性限制了重用的灵活性和完全性。但解决这种局限性的方法可以是只继承抽象父类,因为抽象类基本上不提供具体的实现。白盒框架是一个程序骨架,而用户衍生出的子类是这个骨架上的附属品。
基于对象构件组装的框架就是黑盒框架。应用开发者通过整理、组装对象来获得系统的实现。用户只须了解构件的外部接口,无须了解内部的具体实现。另外,组装比继承更为灵活,它能动态地改变,继承只是一个静态编译时的概念。
在理想情况下,任何所需的功能都可通过组装已有的构件得到,事实上可获得的构件远远不能满足需求,有时通过继承获得新的构件比利用已有构件组装新构件更容易,因此白盒和黑盒将同时应用于系统的开发中。不过白盒框架趋向于向黑盒框架发展,黑盒框架也是系统开发希望达到的理想目标。
再回头看一下现在网上那样多CSS框架(YUI是叫“YUI Library CSS Tools” 并非是“YUI CSS Frameworks”),有多少是真正以框架的概念在写,有多少只是定义样式基类的。当然,每个人对框架的理解不一定,你可能不认同我的说法。
再谈一下CSS 框架,并不非我不认可这个东西的存在,我从一两年前也就一直在尝试这样的东西。对于大型网站,前端的开发需要一个解决方案。框架自然是首选的。可惜距离我太远了,我太弱了T_T,我只要要求两点:
- 管理下面的内容的东西
- 类/组件
很明显,第一点,CSS做不到,第二点,相对其它语言很弱的说。
大约在一年前做一个中型网站时,我为了偷懒,我想到内容模块化,让程序员拼页面。大约方向也就是封装了一个又一个的功能块,程序员在要用到哪一块内容时就只要使用相应的HTML与CSS,大家都方便,我不要拼页面,他不用重复套代码,大家好才是真的好。
在同一个网站,差不多的内容块,多次使用是很正常的事,这也是就让模块化成为可能,比如一个图片列表,可能是用户头像列表,或者群组的图标列表,这时你会怎样写呢?相同的用这样吗?
.photoListUesr,.photoListGroup{ /*_*/ }
这样不是说不行,但如果突然说要再加一个相似的呢?这时可能就要调整样式。而我呢?尝试过这样的使用方式:
<div class="photoList UesrCt" />
<div class="photoList GroupCt" />
这样的话,我们一开始就分离出共同表现的东西,把.photoList当成原型,通处额外的class再去处理细节。前些天,我写了面向对象的XHTML与CSS编程 ,其实只写了一半,另一半是详细的例子,不过介于要做太多的例子跟核心已经写出来就没写完,^^ 当然,这样也存在一定的问题,就是最初的原型的定义要很慎重,要尽量做到以后就算是改版也可能不用修改。CSS这东西,基本上一个框架最多只能适合一个站,当然,如果这个站足够大的话,这样使用才是有意义滴。
HTML与CSS越是模块化,文件越分散这个问题就越严重。HTML倒是好办,反正是应用程序最终要合并输出一份,但CSS一般会给抛弃直接使用。如果在刚才的例子中,在网页导入CSS的方式是这样的话:
@import url(/xxx/photoList.css);
@import url(/xxx/UserCt.css);
@import url(/xxx/GroupCt.css);
那甚至可以考虑用程序来拼页面,但是使用方便,请求数也成正比,一般情况大家都会选择手动合并文件。虽然人脑比电脑更智能,但很多时候,人脑的计算能力是比不上电脑滴。我曾经有这样的想法,就是使用服务端程序来处理CSS的发布机制,大约方向就是通过网站访问日志来分析出整个站各种页面的使用量,通过程序来计算哪些公共使用的要合并,合并的顺序(CSS的文件顺序会影响到优先权),等等各种计算并压缩输出。
可惜的是,这样一套复杂的程序可能只适合一个站,或者同系列的站群。虽然说做起来有点折腾,但我相信门户级别网站使用这样的方式是有必要滴,当然前提还要整个团队都要使用相同的设计模式。
PS:以上CSS发布程序,只是我的幻想,还没尝试过,有兴趣的朋友可以尝试一下,如有意外,概不负责。
当然,就以上这些还是不能称得上CSS Frameworks,或许只能叫成一个系统级解决方案,毕竟,CSS只是描述性语言。
前晚跟月影一起吃烤鸭时,有聊到这个,他问我有没有前端一体化的解决方案。JS组件化时也会面临同样的问题,差不多的发布机制应该也可以适用JS。不过完全的一体化解决方案我还没想好,也许月影多请我吃几次烤鸭我就能想好。
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事的提醒下总算完成了,记录一下也跟大家分享分享。
先看图(图片只是大致做了一下)
![]()
效果展示:
运行代码框
xhtml结构部分内容:
<ul>
<li><a href="#" title="菜单">菜单</a></li& gt;
<li><a href="#" title="菜单">菜单</a></li& gt;
<li><a href="#" title="菜单">菜单</a></li& gt;
</ul>
css部分内容:
www.niuc.net
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(http://www.linxz.cn/blog2/attachments/month_0804/d200843194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(http://www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}
思路:
主要是利用当:hover触发的时候让a定位,出了li的浮动范围,出现梯形的图片。从而实现了不规则导航的菜单。
过程:
www.niuc.net
1、在浏览器中,根据li的结构表现,后面的li会覆盖住前面的li,如果宽度足够的话,是靠边在一起,那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px ;
2、初始状态下的叠加实现了,要解决的就是:hover触发的时候,让 <a href="#" title="菜单">菜单</a> 这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话,会让有一个 z-index 的问题出现。
这个问题只体现在IE中,FF下是无问题的,可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li,那么当鼠标经过的时候就无法完美显示了。
个人认为比较重要的几个属性:
1. li中的负边距,实现叠加效果
2. hover中的position:relative
3. a是内联元素,要触发haslayout,可以使用float:left来触发
注: 牛C网
以上内容或许讲得不是非常明白,不过大家可以仔细分析一下源码,然后交流一下。如果觉得好也请不要回帖说顶,收藏,谢谢之类的话,你们的点击就是对我的支持了。
这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换行等标签。
我们都知道网页的最大特性是“链接”,是的这个在我们现在看起来习以为常的东西,让我们的生活发生了巨大的变化,是这个小小的标签成就了这个世界上无数的互联网天才。那么让我们看看这个标签的真面目:<a href="URL" >文本区</a>,就是这个简单的标签,其实大家都在使用,用Dreamweaver可以很简单的添加链接。但是尽管如此我们还是需要知道A的属性是什么,这样才能更好的利用它。A是个内联标签,也就是说它本身并不会产生分行。他是流于文本之中的无素。那么我们都知道内联元素是不能包含块元素的。那就是说在A中不能包含段落、DIV等这些块级的元素。那么你工作中是否有这样的情况呢?是否在A里加了无数的块级标签呢?那从现在开始改掉这个坏习惯,这样不光可以避免一些没必要的BUG问题,同时也能给GOOGLE等这些搜索引擎一个好印象,多点印象分。当然除此之外振之还推荐在大家伙在A中加入titile属性。例:<a href="URL" title="这可用以解释或是显示完整的文本内容">文本区</a>。为什么这么做呢,我这里有这样一篇文章《当标题不能显示完整的时候》,大家可以看一下,这只是加title属性其中一个小小的用处,但是作用非常有效。
链接标签中的href=“URL”这个URL是个非常强大的东西,当然这不是我们这个专栏的内容,但是也非常推荐读者们可以认真阅读一下相关的知识。我从百度百科中找到了相关文档,请大家点击阅读(站外链接请读者们选择新窗口阅读)。关于链接就暂时只讲这么多,如有什么疑问请通过文后的联系信息与我联系或是在线给我留言。
标题几乎是所有文章都会有的要素,也是我们用以识实与索引文章的重要元素。我们通过标题去感知文章内的核心。那么你知道吗?合理使用标题标签会让你的文章更受关注。我们都知道XHTML给我们提供了h1~h6,六个标题标签,那么我们如何分配这六个标题标签的使用呢?下面给出一些建议:h1,在浏览器中显示最大,那么自然用来表示最大的标题,对于一个网站来说哪个标题才是最大的?是LOGO,我们通常会在网站的最前面先标注这个网站的名称。所以h1就用来放LOGO,当然如果你的网站没有LOGO,只有一个网站名称,那也可以。当然振之是不推荐在大家在h1中放个图片。我们完全可以通过CSS来实现以图换字。并且推荐网页中h1只出现一次。
当h1找到了专用的功能,那么担任内容标是,或是基它标题的重担就要放在另外几个标题标签上了。在余下的几个标题中h5与h6在浏览器默认显示字体是小于正常文本字体的。那么推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性,又不会太过明显影响阅读。对于标题标签的使用尽可能的注意一下他们之间的等级关系。当然标题的使用还是需要根据实际使用来决定。这里只是给出个建议。标题标签是块线元素,但是他并不能再包含块级元素了,只能包含内联的元素,比如链接、图像,换行之类的。记得有个朋友前两天在文章中提到过关于标题的内容,但是写法就有错了,他把链接写在了H1标签的外面,把H1包起来了,这样的写法是不推荐的。也不符合标准思维容易给以后的学习产生不好导向。
我们的文章难免会有错误的地方,那么有错就要改,但是有时候我们需要告诉读者这段是被删除的但是又能让读者看到。那么删除标签的作用就产生了。以前我们会使用<s></s>或是<strike></strike>来得到一个删除线的效果。但是这仅表是一个删除线的效果,语义上没有DEL来得更为明确,所以这里我要告诉大家放弃以前的方式,采用<del></del>这个标签。同样能表达我们需要的效果,并且意义更为直接明确。那么除了删除有时我们还需要对删除的部分作出一些添加与修改。那么时候这个标签就非常有作用了那就是插入标签<ins></ins>。相信不用我说大家也知道如何使用这两个标签,但是千万别忘记了给这两个标签加上两个重要的属性:cite与datetime。解释与时间。解释不用说了,只要用文字注明为什么要删除或是为什么要插入就可以了。但是这个时间需要明确一下格式。严格的格式是:YYYY-MM-DDThh:mm:ssTZD。呵呵与我们平时用的差不多但是有区别,其中T是表示时间段开始的必需字符,而TZD则是表示时区,Z是表是格林威治标准时间。一秀的写法是:2008-03-25T14:26:22Z
在所有的标签中有两上标签是样式标签,但是却没有被禁用,因为这两个标签所表述的内容很特别,上下标,<sup>上标</sup>,<sub>下标</sub>。
这两个标签用得到机率比较小,但是上标应该还是会常用到的,比如温度中的摄氏度的上的小圆圈,当然现有有专业的字符对应“℃”,还有我们常看到书中的脚注上标[1]。
hr,分平分隔线,这个标签与换行标签只要注意标签的写法就可以了<hr /><br />
关于文本部分的标签就讲到这里,当然标签可能还有很多,但是一些不推荐使用的,不常用的,这里就不再推荐,有兴趣的可以搜索一下相关的内空阅读一下即可。下一篇将引入CSS,一点点的美化我们的文档。
在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们已经讲过了strong与em的区别。除了strong与em之外还有一些相似的标签比如q、cite、blockquote。这三个都属于引用一类,但是这里还是有一些区别的,首先来一一解释。
<q></q>,q的作用是引用非块元素,也就是引用不能形成段落的内容,可能是某人说的一句话,也可能是一句文档摘录等,特点很明显这里是“一句”。并且q本身并不会产生段落。q本身并没有什么样式,一般浏览器也不会给他设置一个默认样式使起突出。但是我们可以通过CSS去使之与一般内容区分开。在q标签中还有一个属性是非常重要的,那就是cite。在这个cite属性值中主要是注明引用内容的出自何处,或是给出在线的地址。
<q cite="http://www.niuc.net/category/html/">这次的内容会让你更进一步的了解到关于段落里的细节</q>
要特别注意不要把q写成p,这两个标签很容易弄错。
在上一篇中其实已经谈到了cite,在那篇文章中我写到“这个标签只表注出文献的标题与名称。这个标签有点类似于我们书籍后面的参考文献的目录内容,也有点像是脚注。”
那么他与q之间的区别是什么呢?其实很容易理解,q是显示内容,而cite则是显示说这段内容的人名或是书名。cite与q常常混合起来使用。比如:<cite>鲁迅</cite>先生说:<q>地上本来没有路,走得人多了,便有了路</q>。
那么blockquote与他们有什么区别呢?blockquote是块引用,XHTML允许其包含任何标签。而上面的q与cite则没有这么大的包容度。blockquote的使用是当需要引用一段或是多段内容时所采用的,浏览器一般默认处理会把引用内容缩进一些以与正常的段落文章区分开。当然我们可以通过CSS样式来改变区分的形式。
在blockquote中有一个cite属性,与q一样是用来注明引用来源的。可以把联机文档的URL注明在其中。
在XHTML标签中还有一个叫pre的标签,这个标签在Dreamweaver中被称为“格式化”,在以前使用Dreamweaver 的时候我一直不清楚这个东西是作什么用的。一直到现在才清楚pre通常用以显示源代码,并且不支持能使段落分开的标签比如<p>,显示内容如需换行只要在源文件中换行即可无需要代码实现。同时pre会保留注其中的所有空格并显示出来。
一般来讲pre目前是多用于显示源代码,这与code的用途是相似的,所不同的是pre是块级的,而code是内联的。简单说,pre可以包括多行内容,而code只包含短小的一句或几个字符。
这里讲述的并不能完全说清楚,这就需要在看完文档后动手操作尝试一下,自行去发现其中的特别之处。有朋友说希望看到有关于CSS方面的知识。这里我想传达我的编写意图。我希望一步步来,让一些还没从表格布局脱离出来的朋友可以先行使用一些并不会影响整体的形式切入进去。因为一涉及CSS就可能会有兼容性问题,所以这里先说文档,然后再加入一些不影响整体布局的CSS知识。一步步的深入,最终能让阅读者从表格布局自然过渡到标准势力中来。当然有朋友已经通过自学的方式完成了这一步,那么可以到我的“杂谈标准”一栏中与我交流。
1、css框架
中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器。为什么呢?因为框架是包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
编写css也是一样,从最初只是定义文字颜色、内容排版,到现在定义所有的表现。css框架也渐渐被重视了,因为大家都认识到:从具象的表现中抽出抽象的模块来重复使用,是减少用户下载、方便团队及个人开发最重要的手段。
2、css框架的开发顺序
a) 格式化 reset.css
格式化css的真正好处是能够快速启动工作,你可以在新的HTML文件里引入框架,不用再处理重置padding 和 margins,实现统一的排版、浏览器下的相同表现。
b) 布局 layout.css
定义页面是二栏还是三栏,是全屏还是1024×768……
一个网站的设计可能有很多种布局,但是大多数都是由几个具有复用性的布局组成,选择性的引入所需要的布局,可以很快地应用所期望的页面布局。
c) 基本样式 type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色。
基本样式的css引用,譬如将ul定义class为“ul-text”,用来展现相同的icon、行间距、链接色彩。
还可以像这样应用:class=”ul-text square”,li前展现的是方型的icon。d) 表格修饰 table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
和基本样式一样,但是表格在现有网站的展现形式几乎都是处理数据,所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格,table-style-2便是黄色边框的表格。e) 表单修饰 form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。
大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css,是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大,虽然在格式化的css中已经初步的统一,但是输入框的边框,按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一,如果考虑到用js实现的话,这个成本太大了点。f) 打印修饰 print.css
修饰打印输出的页面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰,那就不引入table.css。以节约代码量。
3、css框架文件夹的建立
a) core 主要的
存放reset.css、layout.css、type.css、print.cssb) bud 模块
存放table.css、form.css、album.css等cssc) petal 具体应用
存放封装过的css。frontpage.css、llist.css、detail.css、register.css等css。这个文件夹存放的css都是被直接引用的。文件夹的命名,按个人喜好啦!
我还希望用电子、质子等命名呢。嘿嘿!
4、css框架的优点
a) 提高开发效率。
b) 规范名称定义,便于维护。
c) 规范项目开发流程
d) css代码更清晰、简单。html代码更合理。
5、css框架的弊端。
a) 学习成本提高。你需要了解整个框架,需要阅读框架的文档。
b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。残念 -_-
6、开发及使用css框架中常遇到的问题。
1、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0,而在基本样式的css中又可能会声明margin:5px 10px;
所以在Yslow中会出现多次定义。
2、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?
综合以上的二个问题,个人认为解决的方式便是封装,让该有的有,不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话,css的复用性又会变得很差,后期手工的封装会很痛苦。只能套用小马的一句话“具体情况,具体分析”。人生真是矛盾啊…
3、到底该不该支持em?
可见如要支持em,最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放,对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后,发现分辨处于这二端的用户非常少,可想而知,为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情,所以当初在开发tbsp的时候,我们团队就决定了不支持em。当然这是个建议,我们也希望能使用em带给用户最好的感受。
相关文章列表:
CSS 教程 - css框架CSS 教程 - 闭合浮动元素
CSS 教程 - H1
CSS 教程 - 计算CSS盒模型宽和高
CSS 教程 - 命名参考
CSS 教程 - DIV底部放置文字
CSS 教程 - 控制网页文件大小
CSS 教程 - dl dt dd
CSS 教程 - CSS的继承性
CSS 教程 - 浮动元素
CSS 教程 - position绝对定位的问题
CSS 教程 - 表单设计技巧
CSS 教程 - 定位(position)
CSS 教程 - 盒模型(BOX Model)
CSS 教程 - 水平对齐(text-align)
CSS 教程 - CSS固定表头的HTML表格
CSS 教程 - 对搜索引擎更友好
CSS 教程 - li和ul标签的用法
所以我们会采用一种Using Background-Image to Replace Text的方法,也就是将图像以背景图像的方式“插入”网页显示,同时为了让残障人士能了解该部分信息,显示该图像的区域用文本加以说明;但又为了让正常人不为既看到背景图像又看到图像上的文本而混淆,所以我们又将这些文本隐藏。
或许我们也会说我们可以给图像加alt、加title,这样正常用户能看得见,残障用户也“阅读”到。不过,我们再想想,Web标准还推荐使用合理的XHTML文档结构,对于插入图像这样一个“实体”,插入到网页是什么图像就是什么图像了,当我们需要替换图像时,我们修改HTML文件,若有很多页面呢(我批量改_-!)。所以这部分图像的插入就“亲和力”和“扩展性”而言,都建议使用“背景图像” “隐藏文本”的方法。当然对于图像热区链接我们另做讨论。
说的都不大理解,还是举例子。
有这样的一张图像,我们要插入到网页显示,那么正常情况下我是使用“<img />”标签的
其中,因为浏览器可能显示不了图像中文本的字体样式,所以我们做成图像显示在网页中。在当我们需要为这种图像中的文本新做另外一种字体的图像,那么现在来解决新图像的显示,我们就必须要修改HTML文档。而一旦我采用了CSS定义背景图像之后,这些问题都迎刃而解。
所以,我们开始感受到这种方式的“好”,并以此应用到新的网页设计中去。当然,为了尽量精简我们的HTML代码,我还可以这样:
直接定义 text-indent: -10000px; 将文本显示在屏幕分辨率以外的区域。
=======================================
今天向老友问了个问题,“关于一个效果……图像是用<div>包含一下呢还是直接<img /> ”。
随即否定:不要为了表现添加标签,也不要为表现用IMG插入图片,表现的内容,不放到CSS里去,怎么谈分离。
页面全部完成后,把CSS去掉,看看页面,应该是很纯的,全是内容,没有一点儿表现的成份在里面。
于是如醍醐灌顶,恍然大悟,遂搜索整理并理解得此文。
更多相关文章:
WEB标准 - 链接和文本标签WEB标准 - 功能相似的标签
WEB标准 - 精简的网页图像代码
WEB标准 - P标签(续)
WEB标准 - P标签
Web标准 - 结构 表现 行为分离




我还希望用电子、质子等命名呢。嘿嘿! 


