几年了。。。这个博客已经不在打算更新。有任何疑问或者问题。请到我的新博客留言给我。谢谢大家一直以来对我的支持。http://www.woria.cn/blogs
如何去掉链接的虚线边框
[
2008/01/23 14:24 | by Space.As ]
2008/01/23 14:24 | by Space.As ]
也许你会觉得当点击时焦点出现的虚线很不好看，那就让我们把它去掉吧！
一，在<a>标签中加入onFocus="this.blur()"语句：
-----------------------------------------------------------
<a href="#" onFocus="this.blur()">try</a>
-----------------------------------------------------------
二，在<a>标签中加入hidefocus：
-----------------------------------------------------------
<a href="###" hidefocus>link</a>
-----------------------------------------------------------
三，如果连接太多，可以用外部链接 .HTC 文件。
如，blur.htc 文件内容如下：
----------------------------------------------------------
<public:attach event="onfocus" onevent="makeblur()"/>
<script language="javascript">
function makeblur(){
一，在<a>标签中加入onFocus="this.blur()"语句：
-----------------------------------------------------------
<a href="#" onFocus="this.blur()">try</a>
-----------------------------------------------------------
二，在<a>标签中加入hidefocus：
-----------------------------------------------------------
<a href="###" hidefocus>link</a>
-----------------------------------------------------------
三，如果连接太多，可以用外部链接 .HTC 文件。
如，blur.htc 文件内容如下：
----------------------------------------------------------
<public:attach event="onfocus" onevent="makeblur()"/>
<script language="javascript">
function makeblur(){
web2.0中流行的设计元素:颜色
[ 2007/11/16 17:07 | by Space.As ]
2007/11/16 17:07 | by Space.As ]
颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨>>再做补充吧!
★淡淡的浅色系及延伸应用
此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色给人的感觉很环保,不伤眼睛,而且对比度恰到好处,既可以有效区分,又不会显的太过突兀.
google,Yahoo更为成熟的运用了这些颜色.MSN在新版网站中也设置了Simple White主题选择,并且新的LIVE系列产品更是对那种淡淡的兰色与1PX线条情有独忠~另外一些新兴的WEB-base办公软件也大量选用了此类颜色!事实证明,这些颜色的运用取得了大部分用户的认可并领导了趋势!
例子：GMail,yahoo360,live.com,start.com,netvibes,rember the milk
★柔软舒适的过度色
此类颜色不知道跟WEB标准的流行有没有关,包括一些优秀的CSS陈列馆网站,还有著名的simplebit的设计作品,都大量运用了这种柔软的过度色,包括blog的一些优秀THEME 也会经常看到.这让人想到苹果水晶效果的转变,从最新的TIGER系统中我们可以发现,苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果,而向更直观硬朗的过度色做转变!说白了就是越来越simple而不是玩那么多花样.
★淡淡的浅色系及延伸应用
此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色给人的感觉很环保,不伤眼睛,而且对比度恰到好处,既可以有效区分,又不会显的太过突兀.
google,Yahoo更为成熟的运用了这些颜色.MSN在新版网站中也设置了Simple White主题选择,并且新的LIVE系列产品更是对那种淡淡的兰色与1PX线条情有独忠~另外一些新兴的WEB-base办公软件也大量选用了此类颜色!事实证明,这些颜色的运用取得了大部分用户的认可并领导了趋势!
例子：GMail,yahoo360,live.com,start.com,netvibes,rember the milk
★柔软舒适的过度色
此类颜色不知道跟WEB标准的流行有没有关,包括一些优秀的CSS陈列馆网站,还有著名的simplebit的设计作品,都大量运用了这种柔软的过度色,包括blog的一些优秀THEME 也会经常看到.这让人想到苹果水晶效果的转变,从最新的TIGER系统中我们可以发现,苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果,而向更直观硬朗的过度色做转变!说白了就是越来越simple而不是玩那么多花样.
倾斜的四边形导航制作
[ 2007/11/07 12:57 | by Space.As ]
2007/11/07 12:57 | by Space.As ]
页面最终效果：
点击查看
这个菜单制作上的确有些麻烦。
倾斜的平行四边会造成 首尾两角相重合的区域。
那么背景颜色的更换就值得揣摩。
因为ie6不支持li的focus 所以小有点难度。
这里固定li a 的宽度为单个倾斜四边形的宽度。然后使用 相对加绝度定位 调节他们相互的距离。
让他们首尾有重叠区域。也就是切图时候拉开。定义时候拉近。很简单的思路。
当然 背景需要用到通明gif 或者png .因为重叠区域不能相互被挡住。
注意ie6不支持通明png
完整页面页面代码如下：
点击查看
这个菜单制作上的确有些麻烦。
倾斜的平行四边会造成 首尾两角相重合的区域。
那么背景颜色的更换就值得揣摩。
因为ie6不支持li的focus 所以小有点难度。
这里固定li a 的宽度为单个倾斜四边形的宽度。然后使用 相对加绝度定位 调节他们相互的距离。
让他们首尾有重叠区域。也就是切图时候拉开。定义时候拉近。很简单的思路。
当然 背景需要用到通明gif 或者png .因为重叠区域不能相互被挡住。
注意ie6不支持通明png
完整页面页面代码如下：
国内外 JavaScript 经典封装
[ 2007/09/21 17:53 | by Space.As ]
2007/09/21 17:53 | by Space.As ]
作者：k236740 来自：蓝色理想
这些东西都是Java Script大部分都是由老外写的，并且封装得很好，在运用上也很方便，而且也都兼容FF与OPERA，档案中少部分是由中国的高手写的。
一、多样化摺叠菜单：
一个由老外写的折叠式垂直菜单，多样化，多功能，可自订，使用容易，支持FF。
二、CSS圆角边框：
以CSS为主要，用Java Script封装的相当完整，也是老外写的，支持多浏览器，可以自订样式，目前有十多种可以运用。
三、模拟视窗：
用层模拟的视窗，是一个中国高手写的，Java Script封装的相当好，使用上也很容易
这些东西都是Java Script大部分都是由老外写的，并且封装得很好，在运用上也很方便，而且也都兼容FF与OPERA，档案中少部分是由中国的高手写的。
一、多样化摺叠菜单：
一个由老外写的折叠式垂直菜单，多样化，多功能，可自订，使用容易，支持FF。
二、CSS圆角边框：
以CSS为主要，用Java Script封装的相当完整，也是老外写的，支持多浏览器，可以自订样式，目前有十多种可以运用。
三、模拟视窗：
用层模拟的视窗，是一个中国高手写的，Java Script封装的相当好，使用上也很容易
10个经典的web2.0配色方案网站
[ 2007/08/01 13:55 | by Space.As ]
2007/08/01 13:55 | by Space.As ]
关于input:focus的问题,以及IE浏览器的处理.
[ 2007/07/10 15:24 | by Space.As ]
2007/07/10 15:24 | by Space.As ]
先定义CSS样式:
input:focus, input.focus { background:lime; color:black; }
这样之后 网页中的input被激活时候.也就是你光标点击某个输入框时候.输入框的背景颜色会改变为:black.
这样会让这个输入框更加的被人注意到.
倒霉的是 IE6以及更低版本 不能识别 input的focus这个属性.
所以这里使用js来实现相同的效果.
首先定义了.focus这个样式.
用js来判断浏览器. 当发现是IE的话 就检测鼠标点击 获得当前即或的输入框.然后加载.focus这个样式.
从而到达相同的效果.
js代码如下.可以直接加到head区.
<script type="text/javascript">
window.onload = function(){
var inputs = document.getElementsByTagName("input"), i = inputs.length;
while(i--){
inputs[i].onfocus = function(){
this.className += " focus";
};
inputs[i].onblur = function(){
this.className = this.className.replace(" focus", "");
};
};
};
</script>
令人郁闷的是 我以前怎么就不知道input的这个属性啊?!!!
focus这个东西.最近啃书的时候才发现的.
给个CSS速查手册.方便你,我,他.
下载文件
input:focus, input.focus { background:lime; color:black; }
这样之后 网页中的input被激活时候.也就是你光标点击某个输入框时候.输入框的背景颜色会改变为:black.
这样会让这个输入框更加的被人注意到.
倒霉的是 IE6以及更低版本 不能识别 input的focus这个属性.
所以这里使用js来实现相同的效果.
首先定义了.focus这个样式.
用js来判断浏览器. 当发现是IE的话 就检测鼠标点击 获得当前即或的输入框.然后加载.focus这个样式.
从而到达相同的效果.
js代码如下.可以直接加到head区.
<script type="text/javascript">
window.onload = function(){
var inputs = document.getElementsByTagName("input"), i = inputs.length;
while(i--){
inputs[i].onfocus = function(){
this.className += " focus";
};
inputs[i].onblur = function(){
this.className = this.className.replace(" focus", "");
};
};
};
</script>
令人郁闷的是 我以前怎么就不知道input的这个属性啊?!!!
focus这个东西.最近啃书的时候才发现的.
给个CSS速查手册.方便你,我,他.
下载文件
web开发中的有用工具!
[ 2007/06/28 14:04 | by Space.As ]
2007/06/28 14:04 | by Space.As ]
web开发中的有用工具：
Instant Source 关于它的介绍 http://www.zhaoyongming.com/?p=23
css过滤器的有效浏览器表http://centricle.com/ref/css/filters/
Firefox 插件工具 Web Developer https://addons.mozilla.org/en-US/firefox/addon/60
你安装了Web Developer，就可以轻松的查看网站页面的css，也可以随时“剥掉css”，观看裸体的页面，嘿嘿！当然还有许多功能，你下载后自己体验吧！
大力推荐Firefox 插件工具
Instant Source 关于它的介绍 http://www.zhaoyongming.com/?p=23
css过滤器的有效浏览器表http://centricle.com/ref/css/filters/
Firefox 插件工具 Web Developer https://addons.mozilla.org/en-US/firefox/addon/60
你安装了Web Developer，就可以轻松的查看网站页面的css，也可以随时“剥掉css”，观看裸体的页面，嘿嘿！当然还有许多功能，你下载后自己体验吧！
大力推荐Firefox 插件工具
你要了解什么是web2.0什么是web标准!
[ 2007/05/22 09:57 | by Space.As ]
2007/05/22 09:57 | by Space.As ]
这是两个概念.太多人的人把它混为一谈....
做为一个网页设计,前台美工,或者页面制作者 ,你需要了解的是web标准.
作为一个网站策划,网站架构师 你需要了解的是web2.0!
诸如"web2.0标准页面构建"之类的话 别去看.你被误导了....
WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
（1）XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
做为一个网页设计,前台美工,或者页面制作者 ,你需要了解的是web标准.
作为一个网站策划,网站架构师 你需要了解的是web2.0!
诸如"web2.0标准页面构建"之类的话 别去看.你被误导了....
WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
（1）XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
在WEB标准中嵌入Flash 的最佳方法
[ 2007/05/11 17:52 | by Space.As ]
2007/05/11 17:52 | by Space.As ]
一、传统的方法。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
这方法是使用 object 和 embed 标签来嵌入，细心的会发现，object 的很多参数和 embed 里面的很多属性是重复的，为什么这样做？为了浏览器兼容性，有的浏览器支持 object，有的支持 embed，这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题。但是它现在不那么好用了：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
这方法是使用 object 和 embed 标签来嵌入，细心的会发现，object 的很多参数和 embed 里面的很多属性是重复的，为什么这样做？为了浏览器兼容性，有的浏览器支持 object，有的支持 embed，这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题。但是它现在不那么好用了：
div自动高度设定.div高度100%.
[ 2007/05/11 12:53 | by Space.As ]
2007/05/11 12:53 | by Space.As ]
今天在群里 有朋友问如何让div的高度为100% 撑满屏.
才想起以前也遇到这个问题.郁闷了我很久.
以前用table来布局的时候 会用到table高度100% 然后再在这个table里插一个table 垂直居中. 这样的页面 可以让它在不同分辨率下 都在显示器中间.
用div 则比较麻烦了 你设置div的 高度为100% 在浏览器里 仍然看它扁的可怜.
呵呵~
应该怎么解决呢?
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。。这样的话div才能按比例100%继承上一级的高度
可惜的是浏览器一般默认解释为内容的高度，而不是100%
只要为 html 和 body 设置高度为100%就可以了
html, body { height : 100%; }
这样之后 div 会按比例来继承上一级的高度了.
仅仅设置的DIV元素的height属性貌似没有什么效果。。
才想起以前也遇到这个问题.郁闷了我很久.
以前用table来布局的时候 会用到table高度100% 然后再在这个table里插一个table 垂直居中. 这样的页面 可以让它在不同分辨率下 都在显示器中间.
用div 则比较麻烦了 你设置div的 高度为100% 在浏览器里 仍然看它扁的可怜.
呵呵~
应该怎么解决呢?
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。。这样的话div才能按比例100%继承上一级的高度
可惜的是浏览器一般默认解释为内容的高度，而不是100%
只要为 html 和 body 设置高度为100%就可以了
html, body { height : 100%; }
这样之后 div 会按比例来继承上一级的高度了.
仅仅设置的DIV元素的height属性貌似没有什么效果。。
一、使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二、明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五、默认值
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二、明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五、默认值
CSS 属性 word-break 不受支持?white-space: nowrap;强制标签不换行?
[ 2007/04/09 09:43 | by Space.As ]
2007/04/09 09:43 | by Space.As ]
昨天在使用css结合div布局的时候碰到了一个问题。
在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。
我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行。在第二行显示。而不是把ul撑宽，或者是把自己撑高（内容换行，高度增加）
分别定义了ul的宽度210px和li的宽度自动，发现结果是：
ul并没有被撑宽，可惜li也没有自动到下一样排列。而是内容换行，把li给撑高了。然后死皮赖脸的挤在了第一行。。
仔细考虑过之后认为问题出在li内部内容换行上。于是寻找禁止换行的css属性。
网上查了下没找到。问了群里永目日月，得到word-break这个属性。 keep-all；不换行。。
加到li里后惊奇的发现问题解决了。
给工作组做页面调试时候却被人指出显示有问题。
走过去一看，显示的确没有改变。才想到可能是浏览器版本问题。
我用的是IE7和FF 他们用的IE6。到DW里检查了一下 发现word-break这个属性确实不被IE6支持：
CSS 属性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
实在是郁闷，这个问题以前都有困扰过我。一直也没解决。
那位朋友有什么好方法，敬请指教！不胜感谢。
----------------------------我是分割线------------------------------------
问题已经解决。说来可笑。自己在DW里手动敲代码。
发现一个属性里有nowrap，这个nowrap不是word-braek的吗？难道它能让不换行？
抱着试试的心理我把它完整敲上
white-space: nowrap;
DW测试没有出现下划虚线，意思是浏览器支持方面没有问题。
保存F12。问题解决了。呵呵。。。
顺便写下语法：
语法：
white-space : normal | pre | nowrap
取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明：
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。
我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下移一行。在第二行显示。而不是把ul撑宽，或者是把自己撑高（内容换行，高度增加）
分别定义了ul的宽度210px和li的宽度自动，发现结果是：
ul并没有被撑宽，可惜li也没有自动到下一样排列。而是内容换行，把li给撑高了。然后死皮赖脸的挤在了第一行。。
仔细考虑过之后认为问题出在li内部内容换行上。于是寻找禁止换行的css属性。
网上查了下没找到。问了群里永目日月，得到word-break这个属性。 keep-all；不换行。。
加到li里后惊奇的发现问题解决了。
给工作组做页面调试时候却被人指出显示有问题。
走过去一看，显示的确没有改变。才想到可能是浏览器版本问题。
我用的是IE7和FF 他们用的IE6。到DW里检查了一下 发现word-break这个属性确实不被IE6支持：
CSS 属性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
实在是郁闷，这个问题以前都有困扰过我。一直也没解决。
那位朋友有什么好方法，敬请指教！不胜感谢。
----------------------------我是分割线------------------------------------
问题已经解决。说来可笑。自己在DW里手动敲代码。
发现一个属性里有nowrap，这个nowrap不是word-braek的吗？难道它能让不换行？
抱着试试的心理我把它完整敲上
white-space: nowrap;
DW测试没有出现下划虚线，意思是浏览器支持方面没有问题。
保存F12。问题解决了。呵呵。。。
顺便写下语法：
语法：
white-space : normal | pre | nowrap
取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
说明：
设置或检索对象内空格字符的处理方式。
空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
XHTML代码的基本应用 div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
[ 2006/11/18 11:17 | by Space.As ]
2006/11/18 11:17 | by Space.As ]
作者：小毅 时间： 2006-11-11 文档类型：原创 来自：蓝色理想
一段时间以来，发现有很多人XHTML都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML，我这里呢算是把一些常见的应用问题做一个总结，也算能使得大家能在沟通，合作上能形成默契。
XHTML里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。
p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进，我是推荐在文章以外的地方不要使用P，因为P是有一定语义的，如果用在别的地方恐不合适。正确的写法是<p></p>
span 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。
ul,li 这是一个列表，在列表中，除了UL还OL，不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用 OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是<ul><li></li>< /ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL
一段时间以来，发现有很多人XHTML都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML，我这里呢算是把一些常见的应用问题做一个总结，也算能使得大家能在沟通，合作上能形成默契。
XHTML里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。
p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进，我是推荐在文章以外的地方不要使用P，因为P是有一定语义的，如果用在别的地方恐不合适。正确的写法是<p></p>
span 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。
ul,li 这是一个列表，在列表中，除了UL还OL，不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用 OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是<ul><li></li>< /ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL
McAfee + Firefox（优质杀毒软件加纯净的浏览器） 武装你的电脑.让木马病毒远离你.
[ 2006/11/09 03:33 | by Space.As ]
2006/11/09 03:33 | by Space.As ]
McAfee 会自己虚拟一个网卡来访问网络。减少病毒入侵。
Firefox 过滤有害网页代码 把病毒和木马隔离你的浏览器。。
安装完毕记得更新.也请定期更新.不更新的杀毒软件形同虚设.
也提醒大家最windows补丁更新.很重要.
另外安装时候选择期限的时候 选永久期限.
建议只装一个杀毒软件. 因为可能会出冲突问题.并且2个杀毒软件会很占系统资源的.
安装完毕后.执行全盘扫描.(很重要)
每次电脑启动系统托盘会有一个盾牌标志
如果没有启动成功.请检查你的电脑.或许你已经中标了.
建议重新做系统.安装完驱动程序后.立即安装McAfee 联网.更新.再执行全盘扫描.再安装其他软件.
如果有什么问题.请留言给我.
下载地址:
McAfee点击下载
Firefox 在我blog 右边点点击下载.
做Web开发的朋友 推荐一个Firefox插件. 打开 页面后 点击Install Now 安装. 好用吗?你装了就知道!
点击下载Firefox插件
Firefox 过滤有害网页代码 把病毒和木马隔离你的浏览器。。
安装完毕记得更新.也请定期更新.不更新的杀毒软件形同虚设.
也提醒大家最windows补丁更新.很重要.
另外安装时候选择期限的时候 选永久期限.
建议只装一个杀毒软件. 因为可能会出冲突问题.并且2个杀毒软件会很占系统资源的.
安装完毕后.执行全盘扫描.(很重要)
每次电脑启动系统托盘会有一个盾牌标志
如果没有启动成功.请检查你的电脑.或许你已经中标了.
建议重新做系统.安装完驱动程序后.立即安装McAfee 联网.更新.再执行全盘扫描.再安装其他软件.
如果有什么问题.请留言给我.
下载地址:
McAfee点击下载
Firefox 在我blog 右边点点击下载.
做Web开发的朋友 推荐一个Firefox插件. 打开 页面后 点击Install Now 安装. 好用吗?你装了就知道!
点击下载Firefox插件
关于<pre>的用法.
[ 2006/09/21 13:47 | by Space.As ]
2006/09/21 13:47 | by Space.As ]
今天的工作中 接触到<pre>这个标签。查了些资料 自己又做了些测试。
大致用途这里做个记录，希望能给朋友们点帮助。
位于<pre></pre>中的任何文本，都将会准确的按照原先的布局而显示。
包括两个以上的连续半角空格和额外的回车。
适用范围：
带有缩进排版的程序段落
ASCII字符画
等，一切费尽按空格排出来东西。。。
在Dreamweaver中的使用
不管你是用CtrlV还是CtrlShiftV，DW都能将多余的空格和回车滤掉，所以不能够直接在页面
编辑状态下将文本粘贴到DW中，只能在html编辑器中将文字插入，再在文本的开始和结尾分别
插入<pre>和</pre>，这样就可以文本就可以正常显示了。
其他属性：
默认显示字体：中文字体为10pt的宋体，英文字体为10PT的Courier
可以利用css，对显示文本的字体、颜色等等进行控制进行控制
可以对文本进行连结、字体大小，字体颜色等html控制
默认情况下<PRE>的显示是不换行的, 不过几种浏览器都有自己的样式用于换行(CSS3中对这个有了明确的定义, 参见 http://www.w3.org/TR/css3-text/#white-space) , 跨浏览器的
换行样式可以这样定义:
/* Browser specific (not valid) styles to make preformatted text wrap */ pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */}
这个方法来自 Tero Karvinen ( http://www.iki.fi/karvinen) 的文章"Making preformated text wrap in CSS3, Mozilla, Opera and IE"( http://users.tkk.fi/~tkarvine/linux/doc/pr ... ss3-mozilla-opera-ie.html)
CSS3.... 等待中……
大致用途这里做个记录，希望能给朋友们点帮助。
位于<pre></pre>中的任何文本，都将会准确的按照原先的布局而显示。
包括两个以上的连续半角空格和额外的回车。
适用范围：
带有缩进排版的程序段落
ASCII字符画
等，一切费尽按空格排出来东西。。。
在Dreamweaver中的使用
不管你是用CtrlV还是CtrlShiftV，DW都能将多余的空格和回车滤掉，所以不能够直接在页面
编辑状态下将文本粘贴到DW中，只能在html编辑器中将文字插入，再在文本的开始和结尾分别
插入<pre>和</pre>，这样就可以文本就可以正常显示了。
其他属性：
默认显示字体：中文字体为10pt的宋体，英文字体为10PT的Courier
可以利用css，对显示文本的字体、颜色等等进行控制进行控制
可以对文本进行连结、字体大小，字体颜色等html控制
默认情况下<PRE>的显示是不换行的, 不过几种浏览器都有自己的样式用于换行(CSS3中对这个有了明确的定义, 参见 http://www.w3.org/TR/css3-text/#white-space) , 跨浏览器的
换行样式可以这样定义:
/* Browser specific (not valid) styles to make preformatted text wrap */ pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */}
这个方法来自 Tero Karvinen ( http://www.iki.fi/karvinen) 的文章"Making preformated text wrap in CSS3, Mozilla, Opera and IE"( http://users.tkk.fi/~tkarvine/linux/doc/pr ... ss3-mozilla-opera-ie.html)
CSS3.... 等待中……
