2008年3月30日星期日

英文歌曲排行榜

http://music.aol.com/
http://music.yahoo.com/
http://www.billboard.com/bbcom/index.jsp

2008年3月23日星期日

IE与Firefox下对CSS解析的区别

1、IE与Firefox下对CSS解析的区别,这是我在使用中的一些经验,拿出来和大家分享,希望大家继续

对高度的解析

IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度。

Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。

结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!

img对象alt和title的解析
alt:当照片不存在或者load错误时的提示;
title:照片的tip说明。
在IE中如果没有定义title,alt也可以作为img的tip使用,但是在MF中,两者完全按照标准中的定义使用

结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用

其他的细节差别
当你在写css的时候,特别是用float: left(或right)排列一窜图片时,会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束,都无济于事。

其实这里还有另外一个问题,就是IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题,多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。

2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案




当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案






在层的最下方产生一个高度为1的空格,可解除这个问题

3、CSS DIV 学习笔记
一、基本上每个区块的div 都要有自己的id,杜绝不同功能的区块用同一个id/class

二、每个稍大的区块div 后面都跟一个标记开始、结束

三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上两种方法关键点在于选择其中一个为float=left

五、随机的切换图片:
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应
   今天小尿让我帮他的页子解决一个问题,就是div的高度自适应,也就是在一个父级div中嵌套一左一右两个子div,右边的子div内容可无限扩展,而 可以使得父级div的高度能被无限拉长,用一般的布局方法,在IE中可以正确浏览,在Mozilla中父级div的高度就固定在10px左右,无法自适应 高度,height:auto也不行,怎么办呢。网上参考到一篇资料,要实现自适应高度,div层必须具有float属性,于是我开始动手试验, float:left的话,div就跑到页面最左边去了,这好办,我在它的外面再套一层div,把位置定好,那么里面的就算float:left也不会被 移动位置了。

xhtml:
===============



test

test

test








CSS
=================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}

FRom: http://ulean.zg163.net/

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障?

一 段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和 容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!

情况应该如何?

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。

这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

最后,修复办法!

直 到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可 视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束 了。

Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。

现在如何来做?

研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:

9.5.1 Positioning the float: the ‘float’ property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

这 说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被 直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了"inline"修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

Update (20060828):
6、空
  • 解析问题。

    在FF下空
  • 是不被解析的,也就是说,
  • 标签所带的css样式是不被解释的。但是在IE下空
  • 是一样会被解析的。
    例如我定义如下Css:
    #sidebar ul li {
      list-style-type: none;
      list-style-image: none;
      margin-bottom: 15px;
    }

    而我的sidebar使用了一个空的
  • 。那么在FF下不被解析,而在IE下会出现15px的空白。

    2008年3月7日星期五

    C++ string祥解

    如有不清楚的地方,请访问 http://www.cppreference.com/index.html 获取英文解释。
    首先,为了在我们的程序中使用string类型,我们必须包含头文件 。如下: #i nclude //注意这里不是string.h string.h是C字符串头文件 1.声明一个C++字符串声明一个字符串变量很简单: string Str;这样我们就声明了一个字符串变量,但既然是一个类,就有构造函数和析构函数。上面的声明没有传入参数,所以就直接使用了string的默认的构造函数,这个函数所作的就是把Str初始化为一个空字符串。String类的构造函数和析构函数如下:a) string s; //生成一个空字符串sb) string s(str) //拷贝构造函数 生成str的复制品c) string s(str,stridx) //将字符串str内“始于位置stridx”的部分当作字符串的初值d) string s(str,stridx,strlen) //将字符串str内“始于stridx且长度顶多strlen”的部分作为字符串的初值e) string s(cstr) //将C字符串作为s的初值f) string s(chars,chars_len) //将C字符串前chars_len个字符作为字符串s的初值。g) string s(num,c) //生成一个字符串,包含num个c字符h) string s(beg,end) //以区间beg;end(不包含end)内的字符作为字符串s的初值i) s.~string() //销毁所有字符,释放内存都很简单,我就不解释了。
    2.字符串操作函数这里是C++字符串的重点,我先把各种操作函数罗列出来,不喜欢把所有函数都看完的人可以在这里找自己喜欢的函数,再到后面看他的详细解释。a) =,assign() //赋以新值b) swap() //交换两个字符串的内容c) +=,append(),push_back() //在尾部添加字符d) insert() //插入字符e) erase() //删除字符f) clear() //删除全部字符g) replace() //替换字符h) + //串联字符串i) ==,!=,<,<=,>,>=,compare() //比较字符串j) size(),length() //返回字符数量k) max_size() //返回字符的可能最大个数l) empty() //判断字符串是否为空m) capacity() //返回重新分配之前的字符容量n) reserve() //保留一定量内存以容纳一定数量的字符o) [ ], at() //存取单一字符p) >>,getline() //从stream读取某值q) << //将谋值写入streamr) copy() //将某值赋值为一个C_strings) c_str() //将内容以C_string返回t) data() //将内容以字符数组形式返回u) substr() //返回某个子字符串v)查找函数w)begin() end() //提供类似STL的迭代器支持x) rbegin() rend() //逆向迭代器y) get_allocator() //返回配置器下面详细介绍:
    2.1 C++字符串和C字符串的转换 C ++提供的由C++字符串得到对应的C_string的方法是使用data()、c_str()和copy(),其中,data()以字符数组的形式返回字符串内容,但并不添加’\0’。c_str()返回一个以‘\0’结尾的字符数组,而copy()则把字符串的内容复制或写入既有的c_string或 字符数组内。C++字符串并不以’\0’结尾。我的建议是在程序中能使用C++字符串就使用,除非万不得已不选用c_string。由于只是简单介绍,详细介绍掠过,谁想进一步了解使用中的注意事项可以给我留言(到我的收件箱)。我详细解释。
    2.2 大小和容量函数 一 个C++字符 串存在三种大小:a)现有的字符数,函数是size()和length(),他们等效。Empty()用来检查字符串是否为空。b)max_size() 这个大小是指当前C++字符串最多能包含的字符数,很可能和机器本身的限制或者字符串所在位置连续内存的大小有关系。我们一般情况下不用关心他,应该大小 足够我们用的。但是不够用的话,会抛出length_error异常c)capacity()重新分配内存之前 string所能包含的最大字符数。这里另一个需要指出的是reserve()函数,这个函数为string重新分配内存。重新分配的大小由其参数决定, 默认参数为0,这时候会对string进行非强制性缩减。
    还有必要再重复一下 C++字符串和C字符串转换的问 题,许多人会遇到这样的问题,自己做的程序要调用别人的函数、类什么的(比如数据库连接函数Connect(char*,char*)),但别人的函数参 数用的是char*形式的,而我们知道,c_str()、data()返回的字符数组由该字符串拥有,所以是一种const char*,要想作为上面提及的函数的参数,还必须拷贝到一个char*,而我们的原则是能不使用C字符串就不使用。那么,这时候我们的处理方式是:如果 此函数对参数(也就是char*)的内容不修改的话,我们可以这样Connect((char*)UserID.c_str(), (char*)PassWD.c_str()),但是这时候是存在危险的,因为这样转换后的字符串其实是可以修改的(有兴趣地可以自己试一试),所以我强 调除非函数调用的时候不对参数进行修改,否则必须拷贝到一个char*上去。当然,更稳妥的办法是无论什么情况都拷贝到一个char*上去。同时我们也祈 祷现在仍然使用C字符串进行编程的高手们(说他们是高手一点儿也不为过,也许在我们还穿开裆裤的时候他们就开始编程了,哈哈…)写的函数都比较规范,那样 我们就不必进行强制转换了。2.3元素存取
    我 们可以使用下标操作符[]和函数at()对元素包含的字符进行访问。但是应该注意的是操作符[]并不检查索引是否有效(有效索引0~str.length ()),如果索引失效,会引起未定义的行为。而at()会检查,如果使用 at()的时候索引无效,会抛出out_of_range异常。 有一个例外不得不说,const string a;的操作符[]对索引值是a.length()仍然有效,其返回值是’\0’。其他的各种情况,a.length()索引都是无效的。举例如下:const string Cstr(“const string”);string Str(“string”);
    Str[3]; //okStr.at(3); //ok
    Str[100]; //未定义的行为Str.at(100); //throw out_of_range
    Str[Str.length()] //未定义行为Cstr[Cstr.length()] //返回 ‘\0’Str.at(Str.length());//throw out_of_rangeCstr.at(Cstr.length()) ////throw out_of_range
    我不赞成类似于下面的引用或指针赋值:char& r=s[2];char* p= &s[3];因为一旦发生重新分配,r,p立即失效。避免的方法就是不使用。
    2.4比较函数 C ++字符串支持常见的比较操作符(>,>=,<,<=,==,!=),甚至支持string与C-string的比较(如 str<”hello”)。在使用>,>=,<,<=这些操作符的时候是根据“当前字符特性”将字符按字典顺序进行逐一得 比较。字典排序靠前的字符小,比较的顺序是从前向后比较,遇到不相等的字符就按这个位置上的两个字符的比较结果确定两个字符串的大小。同时,string (“aaaa”) < string(aaaaa)。 另一个功能强大的比较函数是成员函数compare()。他支持多参数处理,支持用索引值和长度定位子串来进行比较。他返回一个整数来表示比较结果,返回值意义如下:0-相等 〉0-大于 <0-小于。举例如下: string s(“abcd”); s.compare(“abcd”); //返回0 s.compare(“dcba”); //返回一个小于0的值 s.compare(“ab”); //返回大于0的值 s.compare(s); //相等 s.compare(0,2,s,2,2); //用”ab”和”cd”进行比较 小于零 s.compare(1,2,”bcx”,2); //用”bc”和”bc”比较。怎么样?功能够全的吧!什么?还不能满足你的胃口?好吧,那等着,后面有更个性化的比较算法。先给个提示,使用的是STL的比较算法。什么?对STL一窍不通?靠,你重修吧!
    2.5 更改内容这在字符串的操作中占了很大一部分。
    首先讲赋值,第一个赋值方法当然是使用操作符=,新值可以是string(如:s=ns) 、c_string(如:s=”gaint”)甚至单一字符(如:s=’j’)。还可以使用成员函数assign(),这个成员函数可以使你更灵活的对字符串赋值。还是举例说明吧:s.assign(str); //不说s.assign(str,1,3);//如果str是”iamangel” 就是把”ama”赋给字符串s.assign(str,2,string::npos);//把字符串str从索引值2开始到结尾赋给ss.assign(“gaint”); //不说s.assign(“nico”,5);//把’n’ ‘I’ ‘c’ ‘o’ ‘\0’赋给字符串s.assign(5,’x’);//把五个x赋给字符串
    把字符串清空的方法有三个:s=””;s.clear();s.erase();(我越来越觉得举例比说话让别人容易懂!)。string提供了很多函数用于插入(insert)、删除(erase)、替换(replace)、增加字符。先说增加字符(这里说的增加是在尾巴上),函数有 +=、append()、push_back()。举例如下:s+=str;//加个字符串s+=”my name is jiayp”;//加个C字符串s+=’a’;//加个字符
    s.append(str);s.append(str,1,3);//不解释了 同前面的函数参数assign的解释s.append(str,2,string::npos)//不解释了
    s.append(“my name is jiayp”);s.append(“nico”,5);s.append(5,’x’);
    s.push_back(‘a’);//这个函数只能增加单个字符 对STL熟悉的理解起来很简单
    也许你需要在string中间的某个位置插入字符串,这时候你可以用insert()函数,这个函数需要你指定一个安插位置的索引,被插入的字符串将放在这个索引的后面。 s.insert(0,”my name”); s.insert(1,str);这 种形式的insert()函数不支持传入单个字符,这时的单个字符必须写成字符串形式(让人恶心)。既然你觉得恶心,那就不得不继续读下面一段话:为了插 入单个字符,insert()函数提供了两个对插入单个字符操作的重载函数:insert(size_type index,size_type num,chart c)和insert(iterator pos,size_type num,chart c)。其中size_type是无符号整数,iterator是char*,所以,你这么调用insert函数是不行的:insert(0,1, ’j’);这时候第一个参数将转换成哪一个呢?所以你必须这么写:insert((string::size_type)0,1,’j’)!第二种形式指 出了使用迭代器安插字符的形式,在后面会提及。顺便提一下,string有很多操作是使用STL的迭代器的,他也尽量做得和STL靠近。删除函数erase()的形式也有好几种(真烦!),替换函数replace()也有好几个。举例吧:string s=”il8n”;s.replace(1,2,”nternationalizatio”);//从索引1开始的2个替换成后面的C_strings.erase(13);//从索引13开始往后全删除s.erase(7,5);//从索引7开始往后删5个
    2.6提取子串和字符串连接题取子串的函数是:substr(),形式如下:s.substr();//返回s的全部内容s.substr(11);//从索引11往后的子串s.substr(5,6);//从索引5开始6个字符把两个字符串结合起来的函数是+。(谁不明白请致电120)
    2.7输入输出操作1.>> 从输入流读取一个string。2.<< 把一个string写入输出流。另一个函数就是getline(),他从输入流读取一行内容,直到遇到分行符或到了文件尾。
    2.8搜索与查找查找函数很多,功能也很强大,包括了: find() rfind() find_first_of() find_last_of() find_first_not_of() find_last_not_of()这些函数返回符合搜索条件的字符区间内的第一个字符的索引,没找到目标就返回npos。所有的函数的参数说明如下:第一个参数是被搜寻的对象。第二个参数(可有可无)指出string内的搜寻起点索引,第三个参数(可有可无)指出搜寻的字符个数。比较简单,不多说不理解的可以向我提出,我再仔细的解答。当然,更加强大的STL搜寻在后面会有提及。最 后再说说npos的含义,string::npos的类型是string::size_type,所以,一旦需要把一个索引与npos相比,这个索引值必 须是string::size)type类型的,更多的情况下,我们可以直接把函数和npos进行比较(如:if(s.find(“jia”)== string::npos))。