Space.As's Blog

页面最终效果：
点击查看



这个菜单制作上的确有些麻烦。
倾斜的平行四边会造成 首尾两角相重合的区域。
那么背景颜色的更换就值得揣摩。
因为ie6不支持li的focus 所以小有点难度。

这里固定li a 的宽度为单个倾斜四边形的宽度。然后使用 相对加绝度定位 调节他们相互的距离。
让他们首尾有重叠区域。也就是切图时候拉开。定义时候拉近。很简单的思路。
当然 背景需要用到通明gif 或者png .因为重叠区域不能相互被挡住。
注意ie6不支持通明png

完整页面页面代码如下：

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 插件工具

这是两个概念.太多人的人把它混为一谈....
做为一个网页设计,前台美工,或者页面制作者 ,你需要了解的是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

一、传统的方法。

这方法是使用 object 和 embed 标签来嵌入，细心的会发现，object 的很多参数和 embed 里面的很多属性是重复的，为什么这样做？为了浏览器兼容性，有的浏览器支持 object，有的支持 embed，这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题。但是它现在不那么好用了：

今天在群里 有朋友问如何让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属性貌似没有什么效果。。

一、使用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结合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 。

作者：小毅　时间： 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

今天的工作中 接触到<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.... 等待中……

大家先来看下效果
语法：
clip : auto | rect ( number number number number )

参数：

auto : 　对象无剪切
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切

说明：

检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为 clip 。

这个大多数朋友、软件翻译过来称它为 裁剪 。 很形象。
我们在一个网页中看到的一个 内容 容器 或者 一个图片 都有自己的显示区域。
而这个定义 可以把这个图片 或者 容器 乃至文字 显示出来的区域 裁剪成你希望的大小。
例如 让某个文字只显示上半部 。或者让input不显示边框。把边框裁剪掉。等等。

举个形象的例子，如果你不希望 input 显示边框。 那么 可以把input区域 分别从上下左右裁剪掉 1 px 这样那些边框 就看不到了。 当然我们可以通过 定义input标签 把它的边框 定义为 背景颜色 来欺骗访问者的眼睛 都可以达到这么个效果。不过这里是为了举例子说明 rect() 的用法嘛！

在Dreaweaver中 这个属性 在定位中 大家可以回去尝试下。

给大家一段代码 大家 运行了看下



新建一个记事本。把代码粘贴进去。然后另存成html 就可以看了。

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来约束，都无济于事。