2006年02月16日

如下:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

思路:这个表单比较特殊,左边为文字右边为输入框,同样我们可以有浮动的方法去实现,把文字加上lable标签,并不是因为我们要定义样式而加入lable,而是这样写是标准的写法之一。在用br即产生的换行也可以用来定义清除左浮动。总结一下,也就是一个lable定义它左浮动,另一个input是行内元素因此会紧跟在浮动元素之后,在后面加入一个br来清除浮动,清除的目的也就是不影响下一组的左右浮动。

以上的表单较为简单所以用样式也免强用可以,但对于复杂的表单我还是建议使用表格。

原页面的关键样表如下:

background-image: url(images/gb_btn_poll_h.jpg);
background-repeat: no-repeat;

(这也是可视化软件的常用写法)
这种方法在样式表的的写法是正确的,在其它的系统中都可正常显示,而在XP系统中确无法正常显示,因为XP系统加载了一些程序的原因。这是XP对CSS支持中的一个BUG。
最后我手工改写样表如下:

background: url(images/gb_btn_poll_h.jpg) no-repeat;

这也是样式表的另一种写法,同样也是正确的。

关于它们对宽度的理解不至的问题有很多方法具我所知道的有以下几种方法:

第一种方法:很多采用避免这种冲突,也就是用两个DIV嵌套,最外的DIV只设计它的宽度,然后根据需要设计里面的样式如边界补白,需要注意的是里面这个DIV没有设置宽度。很多人提倡的方法也是这种。

第二种方法:我在许多地方都能看到这种方法,在《网络重构》这本书中也提到了。让我们看一下具体的代码吧!

div.content {
width:400px; //这个是错误的width,所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body .content {//html>body是CSS2的写法
   width:300px;//支持CSS2该写法的浏览器有幸读到了这一句
}

第三种方法:今天特别研究了!important这个样式,在网上找了一下,突然发现了关于用它来解决IE宽度的问题,这也是我以前没有见到过的方法。简单说一下!important,它是在样式中使用的最高权值,在IE6,IE5及FF中均支持,Mozilla、Opera中不支持这个属性。!important在制作样式表中它是很有用的,一定要掌握它的用法。

div.content {
width:300px !important;//这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px;//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body .content {//html>body是CSS2的写法
width:300px;//支持CSS2该写法的浏览器有幸读到了这一句
}

以上是我所知道的解决IE6、IE5宽度的三种方法。

在写 css 时要处理两、三种浏览器的兼容问题实在很繁琐。由其是在大家对属性的解释都不太一样的时候特别麻烦。这里有一个小心得:避免使用多个 float

如果你希望做出多个 box 排在一起时,一般说来有两种作法:

(1) 两个 box 都是 float: left (2) 两个 box 都是 position: absolute ,但一左一右

对于 (1) 的做法,右边的那个 box 如果内容物太宽,超过了指定的宽度时 mozilla 会将顶层的 box 宽度延伸,可能会导致出现左右滚动条。而 IE 则是会认为这个过宽的 box 放不下,而卷到下一行去。

所以对于 (2) 的作法可能会比较合适,不过这其实还是没有解决内容物过宽的问题,如果过宽的话,预期的结果是左右两个 Box 会在画面中间重迭在一起。

因此另一个问题便是如何去严格限制内容物的宽度。

如何评价一个站点的好坏,也许没有一个统一的标准。但是,建构在良好组织和结构基础上的网站,肯定也是易于维护和扩展的。我现在的BLOG就应该作为一个bad design&organized得范例。看来还是有必要重新整理一下结构了。我平时的项目中也遇到了很多类似的问题。也不是说CSS就是天下无敌,一定要比table oriented design要好。站点,应该是对于设计者易于设计,编程者容易整合,管理者容易维护的,浏览者容易阅读的四易目标。但是,现行的所见即所得的设计器,比如dreamweaver,frontpage。对于复杂结构的css的支持度还远没有达到让你满意的地步。我想这也是阻碍css大量应用的一个重点。或者应该说是设计一个pure css结构的障碍。web designer的设计模式是基于图形的,而不是一堆恼人的css标签。COD(css oriented design)我暂且把基于css的设计良好结构和易于导航,搜索引擎友好的站点的方法称为COD。

在COD方面,众多的BLOG已经做的很好了。车东兄在google领域的一些见解,有很多值得我们学习。

不过,数量众多的blog site并不是web的全部,大量的商业网站对于界面的要求要比blog的要求复杂得多。对css结构设计的要求相应也是加倍增长。macromedia就是一个pure css设计的典范。但是,他所用的数量惊人的css定义,需要的工作量也是惊人的。而且,对于国内客户来说,这样的界面样式还是过于“朴素”的。如果再需要更加“花哨”的设计。又要想有合理结构,良好的内容,便利的导航,搜索引擎友好和合乎客户需要的界面,我们在COD上所花的时间成本就会鄹升。如果遇到大量返工的情况,那后果更加可怕。

所以,先做好基于table的界面让客户确认将是一个比较明智的举动。让客户最终确定了界面后再转为pure css的站点,这样反而可以加速进度。在designer和programmer直接也有一个比较好的沟通的桥梁

macromedia关于wired使用css建构良好架构的网站的文章。里面的一些观点,从我的实际经验看,很有遵循的必要。大致归纳如下:

第一条就是我原先提到的,先有了成品的客户确认的精确的设计以后,再去建构css。这样,可以减少你大量的不必要的返工。不要只有设计毛胚,就贸然开始css设计。在设计pure css的网站的时候,心里一定要有明确的模块化的概念。根据laytou和function做模块化的设定。

第二条也是我现在遵循的,很有必要的一条原则。良好组织的css文档和详细又明了的注释。在团队协调和以后自我修改的时候也可以节约大量的沟通和再回忆、解读的时间。不要把css的设定都放在一个css文件里面。我现在一般通用的做法是,一个portal css文件作为入口,把其他的css按照不同的功能放在不同的css文件里面,portal css文件import.比如fonts.css专门负责字体设定。themes.css专门负责主题类相关的设定,还有print.css,forms.css,layout.css等等不同的功能css。

第三条是不断的学习新的css技术和概念。多研究其他优秀的purecss站点。理解他们的应用原则。慢慢自己的css设计也会得心应手。

  1. 经常测试页面我们常使用TAB+ALT,使编辑与浏览之间的切换。另一个就是刷新的问题,很多人都使用快捷键F5,但我常用的是CTRL+R组合键,虽然用了两个键但我感觉很方便,而且距离手的距离比F4要近许多。
  2. 在样式表编辑中我们常用的逗号和空格
    如:.class1 .class2 {color:red}
    .class1,.class2 {color:red}
    逗号经常用,而空格表示层次,
    第一条实际上只对下面的层次结构起作用。
    <span class="class1′>DEFAULT<span class="class2">RED</span>DEFAULT</span>

  3. 注意此处右边文字是随窗口向右变化的。以前我是这样做的:
    对文字“site map”右浮动,但是发现文字跑到下一行了,于是我就前面又加了一个左浮动,这样就好了。但是总觉得代码多了一些!
    很庆幸我又发现了两种国外的写法,把他拿出供大家学习之用。
    其一:就是定义“site map”绝对定位,并加入右边界一个值, span{position:absolute;right:15px;}本网站就是用这种方法定义的文章列表。
    其二:就是改变一下HTML代码,把“site map”的位置放在前面的文字的前方,然后用右浮动,而且也不会跑到下一行中。原因我还在思考中。以后找出原因我会写到这里。

在网上一找还真找到了不少,但都是克隆的别无二样,于是把网页上的代码放到网页上,但没有效果具是气死人,由于对脚本的不熟悉,只好请教他人最终问题终于解决了!



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

解释:
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

关键代码:
1.<link href="" rel="stylesheet" type="text/css" />注意连接为空。
2. document.getElementsByTagName("link")[0].href=""+title; 其中href中为样式表的位置,本文用了同级所以没有写。
3.本文只用了两个样式,定义了不同背景色以示区别不同。

  1. 在编辑CSS时常用的快捷键:
    文字注释:Shift+Ctrl+M
    向右缩进:Shift+Ctrl+.
    向左缩进:Shift+Ctrl+,
    下一个CSS:Ctrl+]
    上一个CSS:Ctrl+[
    选颜色:Shift+Ctrl+C
  2. 保存以后不能撤销(Ctrl+Z)?
    我们给改过来~
    选项位置OptionsEditor–选择Enable undo after save
  3. 自动替换
    比如你打"!i"然后按一个空格,TopStyle就自动将"!i"替换成"!important"
    选项位置:Options–Editor–Auto Replace 你也可以自己添加快捷输入。
  4. 树型CSS
    有时候是不是觉得CSS太多了不好浏览?TopStyle提供了一个将CSS内容隐藏只显示选择器名称的缩略形式,很方便。
    选项位置:Options–Editor–Rule Collapsing 选择Enable rule collapsing
  5. 快速校验
    快捷菜单中的W3C CSS Validator 和W3C HTML Validator按钮很方便,编辑完直接一点就能知道是否通过了校验。
  6. 样式表清道夫
    下面隆重推荐TopStyle自带CSS整理功能:样式表清道夫 Style Sweeper。它能把你的CSS整理的非常工整,规范。一个非常不错的功能。
    选项位置:Tools–Style Sweeper
    功能设置位置: Tools—Style Sweeper—Configure Style Sweeper—TopStyle Defaut—Edit
    Rules 规则面板:Rule Format 可以设置单行多行显示。Combine Rules 设置是否将有相同属性的CSS组合。
    Selectors 选择器面板:Selector Case 设置选择器的大小写。Selector Order 设置选择器的排序方式。
    Property属性面板:Property Case 设置属性的大小写。Property Order 设置属性的排序方式。
    Shorthand Properties 缩写属性面板:可以选择将font、background、margin、padding属性缩写。
    Others 其他属性面板:Color Format 颜色格式:可选择十六进制、RGB、颜色名称等。
  7. 在安装汉化版时,我们一般是替换原TopStyle3.exe这个文件,但我们可以更改这个文件名称,这样我们就有了中英文两个版本的TopStyle软件了!
  8. 说了这么多还是希望大家在实践当中不断的提高自己的CSS能力,TopStyle是个不错的好帮手~~

今天看到一个有趣的效果,好像两个在页面中固定的层一样,还没太搞清楚是怎么回事,里面有很多对html本身的定义挺有意思。

padd\ing:0;
ma\rgin:0;

另外这两个定义是什么啊?没有查到。



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]