DIV CSS编码中容易犯的一些错误

DIV CSS编码中容易犯的一些错误

1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。

3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。

6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD?

FireFox文本自动换行处理,如何实现FireFox文本自动换行

FireFox文本自动换行处理,如何实现FireFox文本自动换行
文本自动换行IE中解决方法:

1
2
word-wrap:break-word;
word-break:break-all;

注:在要换行的内容相应的单元格或者DIV里加入,如:

<div style=word-wrap:break-word;></div>或<td style=word-wrap:break-word;></td>

文本自动换行FireFox中解决方法(脚本):

<script type=”text/javascript”>
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp=”";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”<br>”;
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
 
 注:以上脚本放在</head>前面.

调用时如下写法:

同个页面单处调用:

<div id=”content”>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60,”content”);</script>

同个页面多处调用:

<div id=”content”>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60,”content”);</script>
<div id=”content2″>这里是要应用换行的内容</div><script language=”javascript”>toBreakWord(60, “content2″);</script>

注:把应用的JS写在</div>后面,其中60表示一行要显示多少字字符,注意多个调用时ID的相应变化,不能同一个ID名称,应用上面的方法后IE也会是按设定的字符数换行,但是IE里面支持自动换行,所以只要判断一下是否为IE,如果不是IE就不要输出上面的
 
<script language=”javascript”>toBreakWord(60, “content”);</script>

这段JS,如果不是就要输出。

如何让Div中的内容对齐底部或者垂直居中

底端对齐

提示:你可以先修改部分代码再运行。

垂直居中

提示:你可以先修改部分代码再运行。

div li 表格应用

提示:你可以先修改部分代码再运行。

下载flv视频

HTTP传输:http://www.sothinkmedia.com/web-video-downloader-firefox/

RTMP:http://applian.com/replay-media-catcher/demo.php

如果这两个都不行,你就拿个摄像机对着屏幕拍吧 – _ -

纯as load 之二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
stop ();  
function dr ( nam , de , d , al ) {  
na = createEmptyMovieClip ( nam , de );  
na . lineStyle ( d , 0x9900cc , al );  
na . _x = 160 ;  
na . _y = 280 ;  
na . lineTo ( 240 , 0 );  
}  
//一个画线条的函数,四个参数对应什么,自己看哈  
onEnterFrame = function () {  
var a = getBytesTotal ();  
var b = getBytesLoaded ();  
//取得下载的数据  
if ( b < a ) {  
dr ( "b1" , 0 , 30 , 30 );  
dr ( "b2" , 1 , 20 , 30 );  
dr ( "b3" , 2 , 20 , 100 );  
b3 . _xscale = b / a * 100 ;  
//画三条横线,显示下载进度;  
} else {  
delete onEnterFrame ;  
b1 . removeMovieClip ();  
b2 . removeMovieClip ();  
b3 . removeMovieClip ();  
play ();  
//下载完毕,删除图形和函数;  
}  
};

纯as load 之一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
stop ();  
_root . createTextField ( "myload_txt" , 1 , 0 , 0 , 0 , 0 );  
with ( _root . myload_txt ) { //设置文本  
background = true ; //文本框是否有背景  
backgroundColor = 0x336699 ; //文本框的背景颜色  
textColor = 0xFFFFFF ; //文本字段中文本的颜色  
type = "dynamic" //文本字段为动态文本  
selectable = false ; //文本是否可选  
autoSize = "center" ; //控制文本字段的自动大小调整和对齐  
_x = Stage.width/2; //文本字段的横坐标  
_y = Stage.height/2;//文本字段的纵坐标  
}  
onEnterFrame = function () {  
var Loaded = _root . getBytesLoaded ();  
var Total = _root . getBytesTotal ();  
_root . myload_txt . text = Math . floor (( Loaded / Total )* 100 )+ "%" ;  
if ( Loaded == Total ) {  
onEnterFrame = null ;  
removeMovieClip ( _root . myload_txt );  
play ();  
}  
};

flash 右键菜单之二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//定义相关动作指令函数
function url1() {
 getURL("http://www.10kb.net", "_blank");
}
function url2() {
 getURL("http://www.163.com", "_blank");
}
function url3() {
 getURL("http://www.baidu.com", "_blank");
}
//定义菜单对象expandmenu
var expandmenu = new ContextMenu();
//隐藏指定 ContextMenu 对象中的所有内置菜单项
expandmenu.hideBuiltInItems();
//定义右键菜单
/*用法
new ContextMenuItem(caption, callbackFunction, [ separatorBefore, [ enabled, [ visible ] ] ] )
参数
caption 指定与菜单项关联的文本的字符串。 
callbackFunction 您定义的函数,它在选择菜单项时被调用。 
separatorBefore 布尔值,指示分隔条是否应该出现在上下文菜单中的特定菜单项之上,
此参数是可选的;其默认值为 false。
enabled 布尔值,指示是启用还是禁用上下文菜单中的特定菜单项,
此参数是可选的;其默认值为 true。
visible 布尔值,指示菜单项是否可见。此参数是可选的;其默认值为 true。
*/
var $url1 = new ContextMenuItem("X的主页", url1);
var $url2 = new ContextMenuItem("X1的主页", url2);
//使用 customItems 数组将新的菜单项添加到 ContextMenu 对象 expandmenu
expandmenu.customItems.push($url1, $url2);
//调用了上下文菜单
expandmenu.onSelect = menuHandler;
//将 expandmenu 对象与对象 _root.menu 相关联
_root.menu = expandmenu;

蓦然之间的一种心痛 –《读者》

不恋爱会有匮乏的痛苦;恋爱会有倦怠的烦恼。从一方面看,争吵是平庸婚姻的礼物;而有时候,它也是身心安逸所付出的代价。    
     为什么女人欣赏一个男人才华是正当的,而喜欢一个男人的财富却会招人……     因为在音乐会上,欣赏琵琶清音的人,终归比只喜欢盯着那架琵琶看的人要正常。 欣赏和占有是两回事。

    男人对于女人也一样。抱着欣赏的眼光,美就呈现,并且能长久的逗留于心;只有占有的念头,占有之后味同嚼蜡,很快又去寻找下一个猎物。

   一些人对于数量有所迷恋,似乎“拥有”多份感情,自己的人生就越丰富。这些人有一种感情上的“收藏癖”,可是每一份感情的收藏都会让自己背上债务。这种人可能有一种颇为古老的“垦荒癖”,喜欢在土地上到处插上自己的旗帜,可是跑得太远,马都累死了,还是找不到自己的家。
……
read more...

智慧人生格言

智慧人生格言

有心能知,有情能爱,有缘能聚,有梦能圆。

互相宽容的朋友一定百年同舟;
互相宽容的夫妻一定百年共枕;
互相宽容的世界一定和平美丽。

机遇如清水,无处不可流;
机遇如月光,有隙皆可存。
……
read more...

Page 1 of 41234»