找回密码
 注册

QQ登录

只需一步,快速开始

查看: 339350|回复: 271

[讨论] 重构之美-迎接网站标准化设计的来临 [盲人与标记选用]

[复制链接]
发表于 2004-8-3 14:55:00 | 显示全部楼层 |阅读模式
重构之美-迎接网站标准化设计的来临

作者:爆牙齿 yuntiandevelop@163.com  首发蓝色理想经典论坛


  写下这个题目,好大啊,我不知道我能不能说清楚,毕竟我真正接触标准才不到一个月,实践也才刚进行了3天,完成了本人第一个标准化网页,如下图所示。在下一步工作,将这个门户站点全面标准化架设之前,我想和大家交流交流,带动一下新手,请教一下高手,为标准的推广尽点微薄的力量。

  页面还有很多细节未处理设计,比如页头,还有部分版块未加,色调还未最终定稿,不过大体的感觉已经有了,排版结构也基本差不多了。点击可放大(在地址栏中将_s去掉)。


设计稿:
1.gif

IE6:
2.gif

Opera 7.53:
3.gif

Mozilla 1.8a3:
4.gif

去掉样式表:
5.gif

在怀疑中选择

  记不得是六月的哪一天了,我例行公事般的在网上游荡,一句话蹦入我眼帘:99%的网站是过时的。开什么玩笑!对于从事互联网网站行业的我,这自然是个大事,下面的事就不用说了,很快,'网站重构'这四个字进驻我的脑海。
  跑了几次书店,书没到。于是我只好在网上看些其他相关文章和讨论,很是饥渴。终于在七月十号左右我看见书摆上了成都西南书城、都乐电子书店的书架,迫不及待的在西南书城地上坐下,翻开书……(还是都乐好啊,有椅子还有桌子,随便你看、抄)说老实话,我对重构这本书是失望的,不知道是原书问题还是翻译问题,很杂乱,东拉西扯的。头几章我看得比较仔细,很快就越翻越快,距技术那部分还有很大篇幅的地方,我已经不耐烦了,扔掉,非常抱歉,阿捷。其实我是非常感激你的,不管怎么说,最终我走进了标准设计。(我的习惯,在对新事物做出选择和决定以前,我不会去碰技术方面,我需要从概念上全面审视它,一旦我觉得有前景,值,我才会着手于技术的学习,并义无反顾的走下去,毕竟方向是很重要的,而技术再难都可以被攻破,时间实在太珍贵了。)放下书,头脑比较乱,这就是重构?感觉就像一个新的泡泡被吹了起来,标准是有价值的,但是有那么夸张吗?我们来看看它所宣传的优势:
1、节约带宽。
  这个算什么优势?让我想起了曾经使用压缩网页代码工具、曾经为一个JPG的图片1%的调整压缩比以获得最佳效果最小大小的时代,随着互联网的高速发展,这些都成为了过去时,它们对网站速度的影响越来越小,小到可以忽略。没人再用压缩代码工具了吧,曾经为在压缩比为54%、55%之间都要比较半天的我现在基本上通通设定为80%,唯一保留的是还在JPG和GIF中保持选择,那也更多的是为了质量,而非大小。
2、完全兼容各种浏览器(实践过程中发现,其实也不是,相信还没表格兼容性好)。
  在IE统率98%以上的江山下,它就是标准,不要说国外有很多人用其他浏览器,那也是相对于中国而言,我相信国外还有更多更多更多的人用IE。其实浏览器的兼容性很早就在谈,但IE实在太普及了,现在翻出来重提感觉意义也不大。你相信IE会垮掉吗?你相信短期内LINUX会普及到桌面吗,还要超过WINDOWS。所以,翻旧帐而已,算什么优势?
3、盲人阅读器。
  我靠,我都要笑出声了。走开走开。(别骂我歧视哈,我说事实而已)
4、方便的改版。
  是吗?我怀疑,而后实际上也是不可能的。我们来看看,首先说明,标准的定义是抛弃表格布局。
  第一种改版方式:版式不变,变色彩。
  这种情况下,DIV比表格有优势吗?我是说布局上。我很早就开始都使用CSS来控制所有色彩,当然包括表格背景,用表格布局的网站我同样可以只改动样式表。(后来的实践证明,这种情况下表格还有优势,因为他的样式表很简单,而DIV的样式表很复杂,尤其是在对整个网站而非单个页面。如果一个大网站全部标准化,他的样式表将数倍甚至十几倍于用表格布局的样式表。你认为谁快谁慢???)
  第二种情况:包括结构在内全变。
  这种情况下,做为表格布局的网站需要按照新的设计稿重新画表格进行设计。难道标准化的网站就可以只修改样式表吗?(当时我表示怀疑,而后的实践证实了,不可能的,DIV的设计是有针对性的,结构变,DIV、UL、LI、SPAN、P等等全部都要跟着变,样式表得全新设计,那和修改就不一样了。我相信那个一个页面,百多样式表的模范代表,里面不会有2个结构完全相同只是数据不同的样式表。那样的话就回到了第一种改版方式。)
另外还有一点,关于图片的问题,不管那种方式都是不可能改变图片的色彩和大小,所以一旦改版,所有的图片几乎都要变,改动越大变得越多。
  除非网站只使用色块,不用图片、FLASH等或很有改版针对性的少量使用,那么方便的改版……梦想吧。(PNG的透明模式是个不错的东西,不过他也只解决了色彩的问题,而且IE哪年哪月支持还遥不可及。)
5、支持手机、PDA等无线设备的访问,并兼容未来的新设备。
  这个是唯一一个让我觉得有价值的地方。但是……后面谈。
6、在设计上绝对优于表格的控制。
  这个是在后来的实践中我发现的,也是最终将我吸引到标准化设计中来的最重要的因素。表格我用了近五年,可谓炉火纯青了,而DIV让我知道了原来页面上每个象素都是可以在掌握之中的,那种精确是表格代替不了的,一句话概括一下吧:基于表格的设计思路是二维的,是平面的,而基于DIV的设计思路是三维的,是立体的,真的是天马行空,随心所欲!其实我最初在DW3的时候用过半年的层,原因简单,它是三维的,而且可以拖动,但是很快我发现层糟糕的定位让我根本无法控制它,当时不知道是离开了样式表的原因,唉,如果当时,2000年哦,我研究进去,发掘出CSS的话,啊哈哈哈哈哈哈……
7、还有一些优势是实践中体会出来的,如果有机会,以后再一点一点的说。

  经过一阵思考,我在想一个问题,那就是XML,书中很多次的提到它,而且也很明白的说,标准的意义是以便以后平滑的过渡到XML。XML不是新东西,两年前就被炒过一次,实际上对于当时来说,过于超前了,就是对于现在来说,对于前台也是很超前的。通过重构一书,我走近了XML,以前总感觉XML很远,概念也比较模糊。对于一种过渡技术,我是不喜欢的,于是放下重构后,我走向XML和XSL的书架,那才是终点,那才有挑战性。
  但是一个很现实的问题,目前大量网站根本无法直接走向XML,过渡是必须的,于是我依然关注标准化,但我一直没有动手也没动脑,只是关注,因为大量基于标准设计的网站设计都很糟糕,一些比较界面比较优秀的设计都出现在个人网站上,很少,而且多数是国外的网站,我们知道,英文的表现力比中文强太多,所以我一直很犹豫,作为一个设计师,我肯定无法为了新技术而抛弃界面的美观与友好,UI在日益重视的用户体验设计上举足轻重,更何况还有品牌、VI等平面设计理念在里面,怎么可能放弃,再说了,标准宣传的优势我已经几乎否定了。另外,如果标准只能用于小型的个人网站或企业网站的化,那么标准的普及将受很大的影响(这也是标准推广中需要考虑的,我们现在是农村包围城市,是自下而上的进行推广,但是我总觉得如果能由门户网站带头进行推广,充分发挥门户网站的影响力,自上而下的推广的话,效果肯定会好很多。),我一直希望看见一个界面美观的,中文的标准化的门户网站,但是没有。
  直到一天,我在看了一篇文章和一个网站后,一切都变了。这片文章就是阿捷的《理解表现与结构相分离》,这个网站是www.themaninblue.com。我个人觉得阿捷这篇文章写得相当不错,建议每个设计师都认真看看。我们越来越多的使用样式表控制整个站点,恨不得将每个表现都写进样式表,最初是字体大小,然后是字体色彩,然后是边框,然后是单元格背景色,然后等等,目的是什么?表面上是为了方便于控制和修改,实质上我们是在潜意识的,不知不觉将表现和内容分离。但是由于表格布局的原因,我们始终无法做到将表现与内容彻底分离,依然有很多仅仅是为了美观,为了方便,为了炫耀等等和内容无关的表现借助表格和内容混杂在了一起,如胶如漆,好不缠绵。这不得不让我重新审视标准,尽管他宣称的诸多优势感觉很缥缈,但是它这个最基础的概念确是相当实在的。而那个国外的站点则让我看见了在标准上实现设计的希望,而且他对分辨率的自适应也让我为之一振,虽然表格也可以用百分比来兼容分辨率,但百分比是很难准确定位的,我几乎就没使用过用百分比来控制表格。
  很快,这个网站就躺在我硬盘里了,打开他的所有CSS,打开他的首页开始研究,尽管刚开始看还是比较茫然,但是经过粗略的看了它几个DIV的实现方式,感觉似乎也不是很难,于是我很狂的对徒弟说到:一周内熟悉,一个月内精通。我终于下定决心走向标准化设计道路。
  正好,我们的网站面临改版,我决定将标准全面应用于新网站,在提交老总的计划中我写到这么一条:
  ……
  2、学习重构技术并全面用于新网站的建设,实现国内第一个全面使用web标准的门户站点。(由于我还完全不会,所以这个呢,视开发过程中具体情况而定,若确实太难,则放弃。毕竟目前重构技术应用只是出现在简单的个人网站中。)
  ……
  依然有所保留,依然有所畏惧,毕竟一夜间,积累了5年的表格排版技术化为灰烬,还是不是那么舒服的,但是决心已下,唯有全力以赴。
  抓紧时间在7月27日完成改版设计稿,7月28日一早,打开Editplus、DW、IE、Opera、Mozilla,打开沈小雨的样式表手册、硬盘上的themaninblue与macromedia两个网站,双手一搓,开始了我的第一次标准化设计。

                                                                                      爆牙齿 2004 8 3

  PS: 本来我打算将之后三天30个小时的设计过程分三次详细记录下来,有不少心得,也有不少困惑。但是不知道大家支持与否,若觉得已经写得很烂了,那我就不现丑了。

评分

参与人数 1威望 +5 收起 理由
经典论坛大妈 + 5 历史打分

查看全部评分

发表于 2004-8-3 15:26:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临

支持楼主写下去~~,写的挺好的。呵呵
我想知道楼主顶部导航的两行导航是怎么写出来的??
回复 支持 反对

使用道具 举报

发表于 2004-8-3 18:16:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临

非常好,打5分支持!

非常欢迎更多的优秀设计师将自己在web标准化过程中的经验、心得、烦恼和喜悦分享给大家。期待爆牙齿的后续文章:)

对文章看法:
1.第一次web标准的实践就用在门户网站上是非常困难的。对yuntian的信心表示钦佩,有个小提醒:也要注意技术风险,最好准备一份传统的表格设计,以免辛苦得不到老板和客户认可。

2.“节约带宽”这个优势非常明显,不是我们以前说的代码“减肥”的概念。是的的确确少了,我测试了多个页面,即使很简单的页面也可以节约40%的代码量,复杂的页面可以节约70%代码量。这对于减轻大流量网站的负载效果是非常显著的。

3.支持手机。一般我们要专门开发wap站点来适应手机用户,象蓝色的wap.blueidea.com,但采用web标准开发的网站,可以直接用手机访问,因为xhtml本身就是XML文档的一种。至于有些人说我的手机可以访问任何网站,那是因为部分整合PDA功能的手机内嵌了小型浏览器(opera之类的)。可以用手机模拟软件openwave来验证这一观点。

4.《网站重构》一书的翻译质量再次向大家表示道歉。原因已经说过:对web标准概念本身ajie也是边翻译边理解,对不是非常理解的部分就只能按原书一句不漏的翻译。没有改成国人容易理解的话,所以看起来很饶口。请大家原谅,有发现错误的地方留悄悄话给我:)

回复 支持 反对

使用道具 举报

发表于 2004-8-3 19:36:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临

呵呵,比较典型的国人想法哦。。。
针对一些问题,盲人当然也可以而且应该会上网,不能说眼睛看不见就不上网了吧,我觉得楼主有点太。。。。。。
至于改版的问题,CSS布局的确应该只是改改属性就行了,当然如果要把整个网站的布局全部换个样子,这本身就等同于重新设计,用表格,用CSS+DIV不都一样吗?
总之我觉得楼主好象对标准一说不太服气。。。。也许多考虑一下每个人而不是只考虑自己的习惯考虑某个公司的浏览器,可能就不会说出这样的话了
回复 支持 反对

使用道具 举报

发表于 2004-8-5 02:45:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临

恩... 关于 XML 的书我想提一下,目前国内没有什么关于这个的好书 (O'Reilly 的 Learning XML 和 XML in a Nutshell 或许不错,但是翻译...)。

其实 XML 这个和网络结合太紧密的东西,本来就应该在网络上学习,因为你最终的目的就是实践到网络中去。我推荐 ibm developerWorks 的 XML 专区,翻译了许多非常有益的文章,适于上手。

你提到了结构,没错,这真的是一个很重要的问题,(X)HTML 把结构和内容混合在一起,的确带来了许多不便。但毕竟我们大部分的网站都是始终固定的结构展示变动的内容的。所以这就更需要你在设计结构时精心考量了,试想如果 W3C 三天两头改 HTML 的 DTD,你受得了吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-5 08:03:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临

询问阿捷,第二篇快要搞定,正截图中,我是新发一帖还是继续发在本帖内?
回复 支持 反对

使用道具 举报

发表于 2004-8-5 11:19:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

想学网页制作,有谁帮帮我?告诉我如何学啊?有没有人带我学啊!
回复 支持 反对

使用道具 举报

发表于 2004-8-5 11:22:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

各位大哥,大姐,给我介绍个好老师吧!先谢谢了!
回复 支持 反对

使用道具 举报

发表于 2004-8-5 16:02:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

好!!!不错,支持标准!!!以前的Web技术太乱了!!!
回复 支持 反对

使用道具 举报

发表于 2004-8-5 20:24:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

yidiao在上个帖子中说
各位大哥,大姐,给我介绍个好老师吧!先谢谢了!

先一步一步自学静态网页(一定要动手),学到3成功力后,开始上网学习别人的优点和经验,我是指美工和排版,不断接触最新的知识,到了6成功力后,就可以开始学习后台程序,比如php,asp之类的,点到就止,除非你想做程序员
然后就可以试着给人做网页了,在实践中进步
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-5 20:28:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

unishift在上个帖子中说
yidiao在上个帖子中说
[quote] 各位大哥,大姐,给我介绍个好老师吧!先谢谢了!
  
先一步一步自学静态网页(一定要动手),学到3成功力后,开始上网学习别人的优点和经验,我是指美工和排版,不断接触最新的知识,到了6成功力后,就可以开始学习后台程序,比如php,asp之类的,点到就止,除非你想做程序员
然后就可以试着给人做网页了,在实践中进步 [/quote]  

这样的话……8个字:全面发展、全面平庸。
另,请发新帖讨论与该主题无关的话题。这里,我们讨论标准。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-6 15:17:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [在怀疑中选择]

  在设计过程中,由于第一次接触,所以这一秒否定上一秒的事情很频繁,随着设计的深入,了解的深入,我不断的向前修改、整理我的代码,自我否定了一次又一次。所以在写下面文章之前,我想,如果我给大家一个通过了验证后的代码意义不大,这样的代码应该随处能找到,所以我想我还是重头到尾把过程写下来,包括各种错误,我故意留下来,就是要让你看见我犯过的错误(失败我都不怕,更不会怕错误),然后再让你看见我是怎么改过来的(当然很可能我改得也不怎么好,但是我一直在改!)。
我是一个典型的初学者,而且是那种爬还不会就想破百米记录了。通过验证后回头看,我犯的错误很多都是不常见滴(太低级了),因此我声明一下:
高手们啊,对于下面文章中错误的代码或凌乱的结构,私下狂笑一下就行了哈……英雄,放过我吧。估计你看了我的代码你就知道我的双手有多新,是多么的洁白无暇,你会于心不忍的。
比我还新的新手请注意:代码几乎毫无借鉴的价值。

不过呢,我在三天内从零圈圈到完成这个首页,将表现与结构完全分离,并且三大浏览器显示效果几乎一样,CSS通过认证,只是页面文件不能通过认证而已。所以对于新手,应该还是有不少思路可以学习。
最后,我不想过多的纠缠在代码上,自己实践或者看书会收获更大。更多的,我希望能在这种全新的设计思路上进行探讨。我会把我的思路表达出来,也希望大家一起在这个方面多讨论。我说过,技术是为思想服务的,所以思想的正确性非常重要。为了避免某些人在这句话中钻牛角,补上一句:当然,技术的高低要反过来限制思想的宽度和深度。



第一天 轻松上路

  所有工具打开了,第一件事设置目录结构,在IIS中设置站点,考虑到以后可能的多风格问题,在样式表和图片目录下分别建立DEFAULT目录。
  好了,什么都不想,先试一下:

  1. 样式表

  2. #indextop
  3. {
  4.       height: 85px;
  5.       background-color:#ED1C24;
  6.       background-image:url(/images/default/bg_02.gif)
  7.       background-repeat: repeat-x;
  8. }
复制代码

我的第一个#开头样式,以前都是用.开头或者不开头的。现在都不完全清楚#和.的准确概念。#用id针对引用,.用class针对引用,不开头的全局引用。

  1. 页面

  2. <div id="indextop"></div>
复制代码

后面代码请自己复制到下面调试框中相应位置查看。

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




OH YES!甚至无需设置宽度就自适应分辨率。
咦,色块没贴边。简单,样式表中加上:

body
{
      margin: 0;
}

  第一个不兼容问题出现,IE、Mozilla正常,Opera依旧不贴边,想了想,在body中添加 padding: 0;  一试,成功。愉快。

  热完身,打开设计稿,开始研究。

6.gif


  页头到阴影前为止,因为要在程序中包含。先攻页头。
  我需要页头两边自适应分辨率,自然需要嵌套居中的770DIV,这里就有选择:(导航下的白色背景是一个很淡的渐变,显然不能用背景色)
  1、包括阴影从上到下四个DIV,然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
  2、两个DIV,因为阴影得平铺,估计还要使用z-index,所以必定单独一个。
  3、三个DIV,阴影一个,导航一个,上面一个。

  1号最终会有6个DIV,其中要单独为一个小色条设置一个DIV,不值。2号感觉不便于将导航独立出来,最终选择3号。小色条被包含在导航DIV中,便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺,‘LOGO’虽然是网站名,但属于表现,通过CSS手册知道背景可以不平铺,爽,于是设为背景,居中,不平铺。看了下position的属性,大概理解relative是指不浮动,顺序向下排,absolute是浮动,相对上层的定位。DIV的居中问题,查看其他代码知道是设置margin: 0 auto;
OK,写代码如下:

  1. 页面

  2. <body>
  3. <div id="indextop">
  4.      <div id=indextop_logo></div>
  5. </div>
  6. <div id="indextop_globalnav">
  7.      <div id="indextop_globalnavmenu"></div>
  8. </div>
  9. <div id="indexcontent_shadow"></div>
复制代码

  1. 样式表 (为了便于大家看结构,我加了黑白对比背景色)

  2. /* -----------页眉----------- */
  3. /* ---页头LOGO--- */
  4. #indextop
  5. {
  6.       height: 85px;
  7.       background-image: url(http://www.cngoldnet.com/images/default/bg_02.gif);
  8.       background-repeat: repeat-x;
  9.       background-color: #ED1C24;
  10. }
  11. #indextop_logo
  12. {
  13.       position:relative;
  14.       margin:0 auto;
  15.       width:770px;
  16.       height:75px;
  17.       background-image: url(http://www.cngoldnet.com/images/default/logo_01.gif);
  18.       background-repeat: no-repeat;
  19.       background-position: center;
  20.       background-color: #000;
  21. }

  22. /* --- 全局导航 --- */
  23. #indextop_globalnav
  24. {
  25.       position: relative;
  26.       height: 43px;
  27.       padding: 1px;
  28.       background-image: url(http://www.cngoldnet.com/images/default/bg_03.jpg);
  29. }
  30. #indextop_globalnavmenu
  31. {
  32.       position: relative;
  33.       margin: 0 auto;
  34.       padding: 0;
  35.       width: 770px;
  36.       height: 43px;
  37.       background-color: #000;
  38. }

  39. /* -----------正文上----------- */
  40. /* ---广告条--- */
  41. #indexcontent_shadow
  42. {
  43.         position: absolute;
  44.         z-index: 1;
  45.         margin: 0;
  46.         padding: 0;
  47.         width: 100%;
  48.         height: 10px;
  49.         background-image: url(http://www.cngoldnet.com/images/default/shadow_01.gif);
  50.         background-repeat: repeat-x;
  51.         left: 0px;
  52.         top: 130px !important;
  53.         top: 127px;
  54. }
复制代码

  [height: 43px;]这里本来是45px,但设了padding之后被撑大,由此知道了padding要影响高和宽,后来知道margin和border也一样,所以有些时候要高宽设置要做相应的裁减。

  好了,页头的大局搞定,现在开始做导航,先分析。

  如果用表格,很简单,两行十列,spacing为3,然后就是切图,每个图片左和右多切1px背景色,做botton。但是离开表格我就不知道怎么办了,多谢阿捷的一篇文章,我学习后知道了display: block;的使用,详细用法大家可以去看阿捷的《不用表格的菜单》和手册,这里我简单说一下我的理解:许多块元素默认是垂直显示,就像你有一堆方块,你列出来交给浏览器,浏览器的显示是从上到下顺序排列,而display: block;就是让浏览器水平排列这些方块,并且,遇到所在嵌套的边界就自动换行继续排列。好,现在我就将导航中的一个栏目设置为一个方块,然后不断重复直到我有17个方块,通过设置它的宽度,让它在水平排到第十个方块时到达globalnavmenu(770px)的右边界,它就自动换行了,这样导航条就出来了。方块的宽度不用计算,直接从设计稿中取,我的设计稿是很精确的。这里有个问题,由于globalnavmenu这个div是包含了小色块,默认的垂直居中显然不行,要在白色块中垂直居中才行。(看来啊,我还是没躲过,本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题,结果还是要影响导航条的定位,而且更麻烦,印证了我常说的一句‘个人名言’:困难是躲不过的,它总是会换个时间或空间重新摆到你面前,直到你迈过它才会消失。)解决办法,很明显要使用padding或margin,我选择了对方块使用margin。这又导致新问题,第一排的margin-top明显要比第二排的大,那么就不能对17个方块使用一个样式,我解决办法是上下各一个。栏目名字顺序置于方块中,通过调整上下padding垂直居中于方块。于是代码如下:

  1. 页面

  2. ……
  3.      <div id="indextop_globalnavmenu">
  4.           <ul>
  5.         <li id="first"><a title="金桥工程" href="#">金桥工程</a></li>
  6.         <li id="first"><a title="金关工程" href="#">金关工程</a></li>
  7.         <li id="first"><a title="金卡工程" href="#">金卡工程</a></li>
  8.         <li id="first"><a title="金税工程" href="#">金税工程</a></li>
  9.         <li id="first"><a title="金农工程" href="#">金农工程</a></li>
  10.         <li id="first"><a title="金智工程" href="#">金智工程</a></li>
  11.         <li id="first"><a title="金卫工程" href="#">金卫工程</a></li>
  12.         <li id="first"><a title="金宏工程" href="#">金宏工程</a></li>
  13.         <li id="first"><a title="金盾工程" href="#">金盾工程</a></li>
  14.         <li id="first"><a title="金贸工程" href="#">金贸工程</a></li>
  15.         <li id="second"><a title="金水工程" href="#">金水工程</a></li>
  16.         <li id="second"><a title="金旅工程" href="#">金旅工程</a></li>
  17.         <li id="second"><a title="金财工程" href="#">金财工程</a></li>
  18.         <li id="second"><a title="金审工程" href="#">金审工程</a></li>
  19.         <li id="second"><a title="金保工程" href="#">金保工程</a></li>
  20.         <li id="second"><a title="金土工程" href="#">金土工程</a></li>
  21.         <li id="second"><a title="返回首页" href="#">返回首页</a></li>
  22.           </ul>
  23.      </div>
  24. ……
复制代码

  1. 样式表

  2. ……
  3. #indextop_globalnavmenu
  4. {
  5.         position:relative;
  6.         margin: 0 auto;
  7.         padding: 0;
  8.         width: 770px;
  9.         height: 43px;
  10. }
  11. #indextop_globalnavmenu ul
  12. {
  13.         clear: left;
  14.         margin: 0px;
  15.         padding: 0;
  16.         border: 0px;
  17.         list-style-type: none;
  18.         text-align: center;
  19.         display:inline;
  20. }
  21. #indextop_globalnavmenu li
  22. {
  23.         width: 77px;
  24.         height: 17px;
  25.         float: left;
  26.         text-align: center;
  27.         margin: 0;
  28. }
  29. ……
复制代码


  可以对方块加连接,就像对td加连接一样,更优越的是方块的a:hover可以定义样式,比如换方块的背景和色彩等各种样式,那太好了,以前需要用JS实现的响应mouseover事件就太简单了。(说明:翻转的图片、色彩、FLASH等都是属于表现,内容一般只有文字,所以图片应该设置成背景,这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接,这种做法是一种形似而神不是的伪标准,建议再认真读读《理解表现与结构相分离》,如果要使用字体,那么也应该将这种图片设为背景,再在相应位置隐藏相应文本。建议看看Micromedia的网站,他是怎么处理他全FLASH的页头导航?他将整个页头做了一个普通页头,然后隐藏了。浏览器不支持FLASH或文本浏览时,普通页头就出来了。)加入以下代码实现:

  1. 页面

  2. 没有,呵呵,只用于测试。
复制代码

  1. 样式表

  2. ……
  3. #indextop_globalnavmenu li
  4. {
  5.         width: 77px;
  6.         height: 17px;
  7.         float: left;
  8.         text-align: center;
  9.         margin: 0;
  10. }
  11. #indextop_globalnavmenu li a
  12. {
  13.         color: #000;
  14.         display: block;
  15.         width: 77px;
  16.         height: 17px;
  17.         text-align: center;
  18.         text-decoration: none;
  19.         background-image: url(http://www.cngoldnet.com/images/default/bg_01.jpg) ;
  20.                 background-repeat: no-repeat;
  21. }
  22. #indextop_globalnavmenu li a:hover
  23. {
  24.         color: #ED1C24;
  25.         width: 77px;
  26.         height: 17px;
  27.         text-align: center;
  28.         background-image:url(http://www.cngoldnet.com/images/default/bg_04.jpg) ;
  29.                 background-repeat: no-repeat;
  30.         text-decoration: none;
  31. }
复制代码


  好了,导航出来了,但是发现样式表重复很多,后来通过测试知道,下层继承上层的样式,哎呀概念我不说了,我说不准确,ajie帮我说吧。所以清除多于的代码,尽量减少重复且无意义的代码,字体在body中定义,加上控制字体在li中padding,图片位置的样式,重新整理代码为:

  1. 样式表

  2. ……
  3. #indextop_globalnavmenu li
  4. {
  5.         width: 77px;
  6.         height: 17px;
  7.         FLOAT: left;
  8.         TEXT-ALIGN: center;
  9.         margin: 0;
  10. }
  11. #indextop_globalnavmenu li a
  12. {
  13.         color: #000;
  14.         display: block;
  15.         width: 77px;
  16.         height: 17px;
  17.         text-decoration: none;
  18.         background-image: url(http://www.cngoldnet.com/images/default/bg_01.jpg) ;
  19.                 background-repeat: no-repeat;
  20. }
  21. #indextop_globalnavmenu li a:hover
  22. {
  23.         color: #ED1C24;
  24.         background:url(http://www.cngoldnet.com/images/default/bg_04.jpg) ;
  25.         text-decoration: none;
  26.                 background-repeat: no-repeat;
  27. }

  28. /* ---主导航第一行--- */
  29. #indextop_globalnavmenu li#first A
  30. {
  31.         padding: 6px 0 0 0;
  32.         background-position: 0px 3px;
  33. }
  34. #indextop_globalnavmenu li#first A:hover
  35. {
  36.         padding: 6px 0 0 0;
  37.         background-position: 0px 3px;
  38. }
  39. /* ---主导航第二行--- */
  40. #indextop_globalnavmenu li#second A
  41. {
  42.         padding: 3px 0 0 0;
  43. }
  44. #indextop_globalnavmenu li#second A:hover
  45. {
  46.         padding: 3px 0 0 0;
  47. }
  48. /* -----------正文上----------- */
  49. /* ---广告条--- */
  50. #indexcontent_shadow
  51. {
  52.         position: absolute;
  53.         z-index: 1;
  54.         margin: 0;
  55.         padding: 0;
  56.         width: 100%;
  57.         height: 10px;
  58.         background-image: url(http://www.cngoldnet.com/images/default/shadow_01.gif);
  59.         background-repeat: repeat-x;
  60.         left: 0px;
  61.         top: 130px !important;
  62.         top: 127px;
  63. }
复制代码


  剩下的就是反复调试,这里由于这是以前的代码加修改后的图片,所以有问题,我稍稍调了一下,还不准确。

  搞定了,页头基本上完毕,下面是阴影,阴影我用了一下absolute,因为要置与广告下,对absolute的理解也不是很透彻,使用过程中,发现div完全不居于现有的排版,它可在上重叠,也可以在下重叠,结合曾经用过的层的z-index,我对absolute的理解是它使一块脱离然后飞起来飘,更形象的理解是:你在一个平面内排版,absolute就使某一块脱离这个平面,可上可下,在于z-index的设置,既然飞起来了,不同z-index之间就不存在margin了。

  将广告图片和其上阴影一起切下,开始做内容,一样,首先分析。

  这里根据设计稿,我将内容分成三块,上中下三个大div,第一个div到草绿色结束,先攻它。
  广告我暂时看作内容非表现,所以直接插入img,没什么说明。

  1. 页面

  2. <div id="indexcontent_top">
  3.      <ul>
  4.           <li id="ad"><img src="http://www.cngoldnet.com/images/default/ad_01.jpg" width="770" height="100" /></li>
  5.      </ul>
  6. [div]
复制代码

  1. 样式表

  2. #indexcontent_top
  3. {
  4.         position:relative;
  5.         z-index: 2;
  6.         margin: 0 auto;
  7.         padding: 0;
  8.         width:770px;
  9.         height: 407px;
  10. }
  11. #indexcontent_top ul
  12. {
  13.         clear: left;
  14.         margin: 0;
  15.         padding: 0;
  16.         width:770px;
  17.         LIST-STYLE-TYPE: none;
  18. }
  19. #indexcontent_top li#ad
  20. {
  21.         float: left;
  22.         clear: left;
  23.         margin: 0;
  24.         padding: 0;
  25.         width:770px;
  26.         height:105px;
  27.         background: #000;
  28. }
复制代码


  然后自然是左边一块放登陆,右边一块放内容新闻,我嵌套div,这里学习float的使用,简单,我看过向左走、向右走滴,过程中我还定义过float: center;,似乎没作用,一直很奇怪,然后忘了删,后来验证,不要脸的w3告诉我float没center这个东西,这不违法了吗?,给左右,却不给中,TNND。笑过,看代码:

  1. 页面

  2. ……
  3. <div id="indexcontent_top">
  4.      <ul>
  5.           <li id="ad"><img src="http://www.cngoldnet.com/images/default/ad_01.jpg" width="770" height="100" /></li>
  6.      </ul>
  7.      <div id="indexcontent_top_form"></div>
  8.      <div id="indexcontent_top_adnewscontent"></div>
  9. <div>
复制代码

  1. 样式表

  2. ……
  3. /* ---登陆区域--- */
  4. #indexcontent_top_form
  5. {
  6.         float: left;
  7.         margin:0;
  8.         padding:0;
  9.         width:150px;
  10.         height:302px;
  11.         background-color: #9c0;
  12. }
  13. /* ---内容新闻区域---*/
  14. #indexcontent_top_adnewscontent
  15. {
  16.         float: right;
  17.         margin: 0;
  18.         padding: 0;
  19.         width: 620px;
  20.         height: 302px;
  21.                 background-color: #09C;
  22. }
复制代码


  其实这里发现一个问题,注意那个广告下的黑条,高度是10px,我本来是在li完广告图片后,加了一个li,定义高度为10px,黑色。但是该死的IE,表格中的BUG继续带入DIV,那就是不能低于15px,在表格中,如果想低于15px定义,典型的老掉牙例子是表格画线,我们解决办法两个,一是插入1px/0px或0px/1px的不存在图片,一般这种方法N年前就不用了,另外一种就是去除td间的&nbsp;字符就可以了。但现在我找不到好的解决办法,div怎么不放个&nbsp;字符让我去删嘛,多好。我试了下加入不存在图片,可以了。但是那样好委屈哦。经过思考,在我页面的特定情况下,我找到了办法,注意我的li#id设置,广告是100px,我将li高度设置成105,背景黑色,好了,5px黑色出来了。后来我还可以用控制padding和margin的办法控制低于15px的显示,但是这始终不是很方便和通用的解决办法,比如又回到表格那个例子,空白页面中用一个无依无靠,孤孤单单的div怎么画背景线?

  终于,一天结束了,我还清晰的记得那天回家路上,我短信徒弟:重构没价值,不学了,还是攻.net实在。我很嚣张的对徒弟说:等不到一周一个月了,明天我就可以完成,一个两天就可以学会的技术有什么价值?而且我还是做的一个门户站点首页。

  然而实际上,第二天,我几乎放弃……

爆牙齿 2004 8 6


  1、回头想想,如果是表格做导航,不但代码相对超多,而且图片必须重复切割,比如我有17个栏目,我就得切34张图片,浏览时也就要下载34张图片,然而用样式表,同样的情况只需要定义2个简单a和a:hover,加上仅两张图片就完成,而且字体是文本非图片。操作时,在页面只需要控制好一个,然后就是复制,设计时,表现与结构内容在头脑中也彻底分开,看页面上则只控制结构和内容,看样式表则只控制表现,思路非常清楚有条理。
  2、导航在IE和Opera正确显示,在Mozillo上却有明显差异,这个怎么解决?!important没用了。差异看我第一帖的三图。
  2、关于导航,其实我的代码是没有通过验证的,原因是id重复,我使用了一堆id="first"和一堆id="second"。后来修改时,我把设置li的padding思路换为设置上一层的margin后,就做到了对17个li只用一个样式,id都不用了。这里我给出导航验证后的代码,自己看了,不说了:

  1. 页面

  2. <div id="indextop_globalnav">
  3.      <div id="indextop_globalnavmenu">
  4.           <ul>
  5.         <li><a title="金桥工程" href="#">金桥工程</a></li>
  6.         <li><a title="金关工程" href="#">金关工程</a></li>
  7.         <li><a title="金卡工程" href="#">金卡工程</a></li>
  8.         <li><a title="金税工程" href="#">金税工程</a></li>
  9.         <li><a title="金农工程" href="#">金农工程</a></li>
  10.         <li><a title="金智工程" href="#">金智工程</a></li>
  11.         <li><a title="金卫工程" href="#">金卫工程</a></li>
  12.         <li><a title="金宏工程" href="#">金宏工程</a></li>
  13.         <li><a title="金盾工程" href="#">金盾工程</a></li>
  14.         <li><a title="金贸工程" href="#">金贸工程</a></li>
  15.         <li><a title="金水工程" href="#">金水工程</a></li>
  16.         <li><a title="金旅工程" href="#">金旅工程</a></li>
  17.         <li><a title="金财工程" href="#">金财工程</a></li>
  18.         <li><a title="金审工程" href="#">金审工程</a></li>
  19.         <li><a title="金保工程" href="#">金保工程</a></li>
  20.         <li><a title="金土工程" href="#">金土工程</a></li>
  21.         <li><a title="返回首页" href="#">返回首页</a></li>
  22.           </ul>
  23.      </div>
  24. </div>
复制代码

  1. 样式表

  2. /* ---主导航--- */
  3. #indextop_globalnav
  4. {
  5.         position:relative;
  6.         height: 43px;
  7.         padding: 1px;
  8.         border: 0;
  9.         background:url(/images/default/bg_03.jpg);
  10. }
  11. #indextop_globalnavmenu
  12. {
  13.         position:relative;
  14.         margin: 0 auto;
  15.         padding: 3px 0 0 0 !important;
  16.         padding: 4px 0 0 0;
  17.         width: 770px;
  18.         height: 43px;
  19. }
  20. #indextop_globalnavmenu ul
  21. {
  22.         margin: 0;
  23.         padding: 0;
  24.         list-style-type: none;
  25. }
  26. #indextop_globalnavmenu li
  27. {
  28.         float: left;
  29.         width: 77px;
  30.         height: 20px;
  31. }
  32. #indextop_globalnavmenu li a
  33. {
  34.         display: block;
  35.         margin: 0;
  36.         padding: 3px 0 0 0;
  37.         color: #000;
  38.         background:url(/images/default/bg_01.jpg) no-repeat;
  39. }
  40. #indextop_globalnavmenu li a:hover
  41. {
  42.         color: #ED1C24;
  43.         background:url(/images/default/bg_04.jpg) no-repeat;
  44. }
复制代码


  4、以上实际操作时并非像分析那样一次编写到位,而是不断调整的结果,解决一个问题再解决下一个,但是分析是尽可能的先做好。

最后给一个这一天的整体代码:

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



谢谢观赏

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2004-8-7 03:02:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

好文!yuntian兄别放弃!
再给yuntian兄一点点建议,我粗略的看了一下你的代码,我觉得你已经迈出了成功的第一步,只是目前的样式表文件稍欠优化,如果要做完一个完整的网站,css文件将来会过于臃肿,建议多使用继承关系和使用类选择符(class)定义样式表。这样可以减少重复的定义,精简CSS代码。你文中的那堆id="first"和"second",如果再碰到类似情况,可以用class来避免这种错误,id是唯一的,可以用来定义大的区块或特定的范围。
关于你说的那个10px黑线条的问题,这不是BUG,你可以用line-height来取代height,比如:.bar li {line-height:10px;},你可以在li里面放一个空格&nbsp;解决这个问题。只是我觉得这里用border会更合适点。

另外送一个不用图片的导航给你做参考,弹性设计,用户可以在浏览器中自由调整文字大小,外框同步缩放,当然,没有你的漂亮,按钮的渐变背景不能实现  :)

可以一起来批评和指点一下:

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

回复 支持 反对

使用道具 举报

发表于 2004-8-7 11:24:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

好文,加油!期待第三篇。

关于导航也提一点建议:
菜单的li并不需要定义<id="first"><id="second">,因为li是浮动的,当超出宽度会自动折行,象这样:

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



你修改#indextop_globalnavmenu li{width: 77px;}的宽度,比如加大到177px,就可以看到菜单自动排列成5行。

回复 支持 反对

使用道具 举报

发表于 2004-8-7 14:47:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

唉,我也是实在没办法的样子呢, 前一阵子刚好做个亚洲杯的专题,就想试验一把,当然自身的技术还是不成熟,不过到最后还是试验失败了。

给大家看看几个页面:

http://sports.qianlong.com/asiancup2004/back_20040717_index.htm  div排版
http://sports.qianlong.com/asian ... ancup2004_index.htm  模板
http://sports.qianlong.com/asiancup2004/text_version_index.htm  示例内容模板
http://sports.qianlong.com/asiancup2004/index.htm  表格框架排版

最开始的时候呢,我用div的做了个,测试什么都没问题,我已经在各种版本的的windows IE上做了测试。可是呢到了正式使用的时候呢,到了,新闻发布会现场,那里的计算机居然全部不能正常观看,那里的计算机全部统一软件环境,win98 IE6,到现在我都没弄明白他们的那堆计算机到底是那里配置的不对了,他们肯定是统一克隆出来的系统,所以全部都能正常观看。后来我总结出这么一条,世界上没有一个系统是你能预料到的,即便你做了在多的测试,客户端的情况你永远都不能确定。可能系统上一个微小的变化就将导致不同的结果。比如你是从IE5.0.1234升级到IE6.0.1234和你是从IE5.0.1235升级到IE6.0.1234的将来产生的结果是绝对不一样的。

后来到了临用的那天才发现这个问题,害得我礼拜六跑到公司将那个div排版的模板又改成表格框架排版的。我没有测试除ie浏览器外的其他浏览器,实在是一个日常的工作如果需要花那么多的功夫来做的话,成本核算就该扣我工资了。

其实一部分原因还是内容发布系统产生的代码不好的原因,当然了,一个做模板的人实在是没有那么大的能量能让公司作出改动cms系统的决定的。

BTW:大家现在看到的这几个模板,最后一个是在使用的,其他几个是模板,和中间失败的产品。都调用的同一个css文件,可能有些地方不合适了,实在是改动过程中分不开版本了。
回复 支持 反对

使用道具 举报

发表于 2004-8-7 15:02:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

呵呵,楼上的,你的第一个方案,有些地方可以不用表格的。

比如,<div class="allcenter">里。甚至可以说是多余的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-7 23:21:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

未注册在上个帖子中说
唉,我也是实在没办法的样子呢, 前一阵子刚好做个亚洲杯的专题,就想试验一把,当然自身的技术还是不成熟,不过到最后还是试验失败了。

给大家看看几个页面:

http://sports.qianlong.com/asiancup2004/back_20040717_index.htm  div排版
http://sports.qianlong.com/asian ... ancup2004_index.htm  模板
http://sports.qianlong.com/asiancup2004/text_version_index.htm  示例内容模板
http://sports.qianlong.com/asiancup2004/index.htm  表格框架排版

最开始的时候呢,我用div的做了个,测试什么都没问题,我已经在各种版本的的windows IE上做了测试。可是呢到了正式使用的时候呢,到了,新闻发布会现场,那里的计算机居然全部不能正常观看,那里的计算机全部统一软件环境,win98 IE6,到现在我都没弄明白他们的那堆计算机到底是那里配置的不对了,他们肯定是统一克隆出来的系统,所以全部都能正常观看。后来我总结出这么一条,世界上没有一个系统是你能预料到的,即便你做了在多的测试,客户端的情况你永远都不能确定。可能系统上一个微小的变化就将导致不同的结果。比如你是从IE5.0.1234升级到IE6.0.1234和你是从IE5.0.1235升级到IE6.0.1234的将来产生的结果是绝对不一样的。

后来到了临用的那天才发现这个问题,害得我礼拜六跑到公司将那个div排版的模板又改成表格框架排版的。我没有测试除ie浏览器外的其他浏览器,实在是一个日常的工作如果需要花那么多的功夫来做的话,成本核算就该扣我工资了。

其实一部分原因还是内容发布系统产生的代码不好的原因,当然了,一个做模板的人实在是没有那么大的能量能让公司作出改动cms系统的决定的。

BTW:大家现在看到的这几个模板,最后一个是在使用的,其他几个是模板,和中间失败的产品。都调用的同一个css文件,可能有些地方不合适了,实在是改动过程中分不开版本了。


晃了一下你的代码,你想用DIV来代替TABLE,这没错,但实际上你用DIV代替的不是TABLE而是TD,所以在你的页面中,四面八方都是大大小小DIV,可以说页面是由DIV堆积而成,这样肯定是不行的,试想一下如果一个页面没有一个TD、TR标志,全是TABLE标志,那是什么概念?DIV+CSS是一种思路,并不是说就是满篇的DIV了。多关注一下ul,li,p,span等元素,就像tr,td一样,<table>和<div>都只是一种开始,是两种不同设计思路的开始,精彩的还在后面,只要你用心发掘!

回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-7 23:39:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

ajie在上个帖子中说
好文,加油!期待第三篇。

关于导航也提一点建议:
菜单的li并不需要定义<id="first"><id="second">,因为li是浮动的,当超出宽度会自动折行,象这样:

你修改#indextop_globalnavmenu li{width: 77px;}的宽度,比如加大到177px,就可以看到菜单自动排列成5行。

  

阿捷,你没仔细看我这段话,这里说明了当时我选择2个ID的理由:

  1. ……
  2. 而display: block;就是让浏览器水平排列这些方块,并且,遇到所在
  3. 嵌套的边界就自动换行继续排列。好,现在我就将导航中的一个栏
  4. 目设置为一个方块,然后不断重复直到我有17个方块,通过设置它
  5. 的宽度,让它在水平排到第十个方块时到达globalnavmenu(770px)
  6. 的右边界,它就自动换行了,这样导航条就出来了。方块的宽度不
  7. 用计算,直接从设计稿中取,我的设计稿是很精确的。这里有个问
  8. 题,由于globalnavmenu这个div是包含了小色块,默认的垂直居中
  9. 显然不行,要在白色块中垂直居中才行。解决办法,很明显要使用
  10. padding或margin,我选择了对方块使用margin。这又导致新问题,[#f00]
  11. 第一排的margin-top明显要比第二排的大,那么就不能对17个方块
  12. 使用一个样式,[/#]我解决办法是上下各一个。
  13. ……
复制代码


你可以看看在最后我给出的通过验证后的代码,那基本上是最终的精简代码了,还有问题吗?

回复 支持 反对

使用道具 举报

发表于 2004-8-8 00:37:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

div高度的问题,这个已经是老问题了,dw版很久以前就有解法了

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



前不久我也做了一个xhtml+css的首页,我这个页面不能通过w3c的验证,因为页面中有flash和marquee。
有能够通过flash验证的代码,但是那种代码把flash放到页面中显示的时候会有些延迟。
marquee是肯定不行了,得用脚本。
我也觉得没必要,光为了通过w3c验证感觉有些自欺欺人

http://www.ecdoors.com

自己觉得比yuntian的那个页面稍微要复杂点,需要自适应的地方多点,有些烦。我做到后面已经有些厌烦了,css也已经开始臃肿了,现在已经有15k了,当然可以再优化一点

我能切实感受到的div+css的做法的好处就是下载速度和浏览器渲染的速度快了,其他的我觉得意义都不大

网页就象快餐,在这种东西上面浪费时间不值。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-8 11:52:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

cloudchen
谢谢你提供的DIV解决办法。

关于通过验证是否有价值的问题,其实我也一直在想,还未有结论。

另,你页面不错。
回复 支持 反对

使用道具 举报

发表于 2004-8-8 13:18:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

yuntian:我也是实在没办法呢,因为发布系统就那样,我总不能让将来页面中的table套欠在ul,li,p,span标签中啊。(发布系统自动生成表格列表)
回复 支持 反对

使用道具 举报

发表于 2004-8-10 23:27:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

很好啊  希望楼主能把这些资料做一个类似阿捷网站上的那个教程 让大家下载
回复 支持 反对

使用道具 举报

发表于 2004-8-14 07:55:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

楼主继续努力,希望你坚持不懈的继续发表。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-14 18:08:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

由于任务重,所以我的时间很紧,在我的安排中,整个网站的标准化最多只能在一个月内完成,因为后台的开发还有大量的工作需要做,那是一个对我而言更为陌生的领域。另外这段时间我发现对于大网站来说,样式表的设计很考究,很麻烦,这里的设计非CODING,而是分类,管理等等样式表的规划设计,相比,单纯的几个页面几个样式表的CODING设计真的不算什么。所以,我会尽量抽出休息时间整理设计过程,而大家看到了,我将过程尽量写得很细,这很花精力和时间。
争取5天内更新。

另外还有一个问题,我一直迷惑,感觉自己费尽心力写了半天,到底对大家有多少帮助,是我太菜了,还是写得不好,感觉是不是都在私下狂笑哦?呵呵。个人感觉我还是把基本的一些东西说清楚了呀,为什么还是不少人发贴问呢?比如DIV的居中,背景的定位等等。唉,我希望我的文章能够帮助新手快速入门,尽快走出离开表格就一片茫然的情况。但是不断发表的入门问题贴让我感觉事与愿违。
回复 支持 反对

使用道具 举报

发表于 2004-8-14 23:45:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

恩 你写的非常好 我是新新新人 暂时提不出什么问题 但是看了你的帖子 了解了不少东西
回复 支持 反对

使用道具 举报

发表于 2004-8-17 10:42:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

强烈支持yuntian!希望可以看到你出色的作品!
回复 支持 反对

使用道具 举报

发表于 2004-8-18 21:59:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

yuntian在上个帖子中说

另外还有一个问题,我一直迷惑,感觉自己费尽心力写了半天,到底对大家有多少帮助,是我太菜了,还是写得不好,感觉是不是都在私下狂笑哦?呵呵。个人感觉我还是把基本的一些东西说清楚了呀,为什么还是不少人发贴问呢?比如DIV的居中,背景的定位等等。唉,我希望我的文章能够帮助新手快速入门,尽快走出离开表格就一片茫然的情况。但是不断发表的入门问题贴让我感觉事与愿违。


写的很好啊 对新手快速入门很有帮助的 回帖鼓励一下~
回复 支持 反对

使用道具 举报

发表于 2004-8-19 15:39:00 | 显示全部楼层

现在流行的div+css 的网页制作,要求IE的版本多高啊

因为现在很多用户用的是IE从4.0-6.0不等。。。。。。。。。。。。。。。。
请问现在 流行的div+css 方式的网页制作,要求IE的版本多高啊?
回复 支持 反对

使用道具 举报

发表于 2004-8-19 18:17:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

感谢楼主的文字对于我这个初学者有很大的启发,希望你坚持下去。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2004-8-19 19:27:00 | 显示全部楼层

重构之美-迎接网站标准化设计的来临 [第一天 轻松上路]

  从这篇开始,我每次都整理一下几个要点,希望大家不要在一些基础问题上重复发贴提问。好了,不说废话了,直接入题吧。

  第一天学到的几个技术上的基础问题:
  1、使用ID将#开头的表现样式赋予DIV,UL,LI,P,SPAN等元素。
  2、使用margin: 0 auto;语句将DIV等元素页内或嵌套居中。
  3、使用body{margin: 0; padding: 0;}样式将页面在3大浏览器中贴边。
  4、使用margin、padding、border进行间距的控制。(非常有用)
  5、背景图片可平铺-repeat,可精确定位-position。
  6、通过设置a:与a:hover的样式实现链接翻转的各种样式效果,背景,边框,字体等等。
  7、理解display: block;的用法。(不愧为一种布局元素,在布局上作用很大,我一直在使用,但直到第三天才有所领悟。不仅仅是做多行多列的导航,不夸张的说,整个页面就是用它来布局的。)
  8、position: relative; 与 position: absolute; 的区别,理解float的使用。
  9、通过!important 调节IE浏览器的兼容性。
  10、了解样式可继承,并由此可以减少很多重复的样式代码,优化样式表。


  通过一些讨论,关于div等IE 15px高度BUG问题,感谢No3和cloudchen各给出了一个很好的解决办法:
  1、设置line-height,例:XX{line-height: 1px; }
  2、设置overflow,例:XX{overflow: hidden; height: 1px}
  个人感觉,line-height很直观简单,overflow稍需理解。



第二天 几乎放弃


  7月29日,挂着笑容,我走进公司。我这个‘自大狂’免不了在徒弟面前炫耀一下昨天的战果:看看,NO TABLE!今天我就搞完它。
  孤芳自赏完毕,马上集中精神,进入工作状态,毕竟昨天一天我只完成了页头,话放出去了,要实现,还得抓点紧,不是于是呼我就找了一个位子,坐了下去……汗……

  先攻左边登陆区域表单,在这个时候我的概念中只有 div/ul/li 三个元素,并且不是很清楚具体的含义。反正当成类似 table/tr/td 的关系来用。在用table的时候,我的习惯是不到万不得已,绝对不嵌套表格,尽量通过页面分析和熟练的表格技巧,充分切分表格,物尽所用,所以再复杂的页面,我的table布局都很少嵌套3层。延续这个思路,能够用li解决的就尽量不多用ul,能够用ul解决,尽量不嵌套div,后来包括ul和li的嵌套,能不嵌套尽量不嵌套。我不知道这种做法对不对,因为至今我都不是很清楚这三个标记的准确含义及使用方法。但是至少我觉得应该物尽所用,而且代码可读行好像也比较强。我见过一些朋友的页面,真的是纯div+css,代码中除了div就没了,且不说div嵌套是否会影响速度,光代码也很难分清层次结构,可读性差。
  后来我发现,几个元素,div/ul/li/p/span等的应用是否合理十分影响去掉样式表后文本页面的主次结构。很多时候我们完全可以通过不同的样式表使不同的页面结构代码获得完全相同的表现,但是一旦去掉样式表,那么哪种结构更能体现文本页面的主次之分,就值得考虑了。目前我正在摸索这方面,准确说就是调试表现的兼容性同时,调试文本页面的可读性。
  越说越远了,回头看页面代码,用户注册和忘记密码两块的做法和导航一致,这里说说border的使用,记得对table使用边框样式的时候我们是无法设置某一边为0px的,如果我们只需要3个边框,另外一边就得设置为1px相应背景色,但是一些情况下会出现断点,比如目前这两块的边框,不使用背景图片是无法用table完美还原的。而div则避免这种情况,0px可以用在任何一边。虽然这只是一个小细节,但对完美还原的帮助却不小。
  另外过程中,我发现其他页面代码中背景的样式可以一气呵成,于是我简单的将背景色background-color: #000; 中的色彩代码加到背景图片语句中变成:background-image: url(XXX) #000;  奇怪,怎么没变化,再加上no-repeat,还是没变化,郁闷,算了,不多想了,还是老老实实使用分开写吧。


  1. 页面

  2. ……
  3. <div id="indexcontent_top_form">
  4.     <ul><form>
  5.         <li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
  6.         <li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
  7.         <li id="select">类 型<select class="select_01">
  8.                         <option>请选择类别</option>
  9.                          <option>政府用户</option>
  10.                         <option>企业用户</option>
  11.                         <option>厂商用户</option>
  12.                         <option>网站管理</option>
  13.                       </select></li>
  14.         <li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
  15.         </form>
  16.     </ul>
  17.     <ul>
  18.         <li id="text_01"><a  href="#">用户注册</a></li>
  19.         <li id="text_02"><a  href="#">忘记密码</a></li>
  20.     </ul>
  21. </div>
  22. ……
复制代码

  1. 样式表

  2. .botton_01
  3. {
  4.         width: 50px;
  5.         height: 20px;
  6.         border: 1px solid #360;
  7.         background-color: #FFF;
  8. }
  9. .textbox_01
  10. {
  11.         width: 93px;
  12.         height: 15px;
  13.         margin: 5px;
  14.         padding: 1px;
  15.         background:url(http://www.cngoldnet.com/images/default/bgform_01.gif) repeat-x;
  16.         border: 1px solid #360;
  17.         font-size: 9pt;
  18.         vertical-align: middle;
  19. }
  20. .select_01
  21. {
  22.         width: 95px;
  23.         width: 93px !important;
  24.         height: 20px;
  25.         margin: 5px;
  26.         padding: 1px;
  27.         background:url(http://www.cngoldnet.com/images/default/bgform_01.gif) repeat-x;
  28.         border: 1px solid #360;
  29.         font-size: 9pt;
  30.         vertical-align: middle;
  31. }
  32. ……
  33. #indexcontent_top_form li#name
  34. {
  35.         padding: 5px 0 0 7px;
  36.         height: 24px;
  37. }
  38. #indexcontent_top_form li#pw
  39. {
  40.         padding: 0 0 0 7px;
  41.         height: 23px;
  42. }
  43. #indexcontent_top_form li#select
  44. {
  45.         padding: 0 0 0 7px;
  46. }
  47. #indexcontent_top_form li#submit
  48. {
  49.         float: right;
  50.         padding: 0 6px 0 0;
  51.         width:50px;
  52.         height:20px;
  53. }
  54. #indexcontent_top_form li
  55. {
  56.         FLOAT: left;
  57.         DISPLAY: block;
  58.         TEXT-ALIGN: center;
  59.         margin: 0;
  60.         padding: 0;
  61. }
  62. #indexcontent_top_form li a
  63. {
  64.         margin: 4px 0 0 0;
  65.         padding: 2px 0 0 2px;
  66.         width:71px;
  67.         height:15px;
  68.         border: 1px dashed #360;
  69.         color: #666;
  70.         DISPLAY: block;
  71.         TEXT-ALIGN: center;
  72.         text-decoration: none;
  73. }
  74. #indexcontent_top_form li#text_01 a:hover
  75. {
  76.         color: #ED1C24;
  77.         background-color: #E5F2BF;
  78. }
  79. #indexcontent_top_form li#text_02 a
  80. {
  81.         border-top: 1px dashed #360;
  82.         border-right: 1px dashed #360;
  83.         border-bottom: 1px dashed #360;
  84.         border-left: 0;
  85. }
  86. #indexcontent_top_form li#text_02 a:hover
  87. {
  88.         color: #ED1C24;
  89.         border-top: 1px dashed #360;
  90.         border-right: 1px dashed #360;
  91.         border-bottom: 1px dashed #360;
  92.         border-left: 0;
  93.         background-color: #E5F2BF;
  94. }
  95. ……
复制代码


  代码出来后,就是反复的调节padding和margin,然而失败的是我调了近一上午都调不好,完成不了对设计稿的完美还原,我试了一次又一次,方法用了一种又一种都不行,总是有地方宽,有地方窄,上下不居中,左右不居中等等,另外IE的BUG又跑出来了,对于贴边的px设置总是不能准确的体现,经过一上午的奋斗,依旧无法成功,有兴趣可以查看设计稿和页面截图,差别很大。这让我很不愉快!这让我无比怀恋表格,那可只需要几分钟就可以完美还原!信心倍受打击,一上午时间无法还原一个简单表单,还号称今天要完成设计,还完得了啥?中午吃完饭,休息一下,决定先不管表单了,继续向下做。
  第一件事,还是先分析。

10.gif

  右边内容新闻这一块,显然是动态的,要和后台配合,如果顺序做下来到没什么,但这部分很明显结构是一样的,我希望能用repeater重复显示,显然只需要设置一块的样式,我还不知道可行否,但觉得应该这么去考虑。不过通过设计稿可以看出由于有3条白色分界线的存在,所以只做一个样式来完美还原不可能,这时我想到了另外一个办法,我我只定义一块的上和左边界,这样虽然右边界会少一条线,但不是很明显,为了repeater,忍了。至于排版,display: block;,和导航一个手法。但是,但是,我注意到中间2px的黑色分界,这个,这个,想了半天,最后放弃了前面repeater的想法,算了,还是做成4块吧。内容下一步考虑,先布局。于是代码如下:

为了大家看清嵌套,我把上下div也给出来了。

  1. 页面

  2. <div id="indexcontent_top">
  3.     ……
  4.     <div id="indexcontent_top_form">
  5.         ……
  6.     </div>
  7.     <div id="indexcontent_top_adnewscontent">
  8.         <ul>
  9.             <li id="adnews_01"></li>
  10.             <li id="adnews_02"></li>
  11.             <li id="adnews_03"></li>
  12.             <li id="adnews_04"></li>
  13.         </ul>
  14.     </div>
  15. </div>
复制代码

  1. 样式表

  2. /* ---内容新闻区域---*/
  3. #indexcontent_top_adnewscontent
  4. {
  5.         float: right;
  6.         margin:0;
  7.         padding:0;
  8.         width:620px;
  9.         height:auto;
  10. }
  11. #indexcontent_top_adnewscontent ul
  12. {
  13.         float: left;
  14.         margin:0;
  15.         padding:0;
  16.         width:620px;
  17.         height:auto;
  18.         LIST-STYLE-TYPE: none;
  19.         background: #000;
  20. }
  21. #indexcontent_top_adnewscontent li
  22. {
  23.         float: left;
  24.         DISPLAY: block;
  25.         TEXT-ALIGN: left;
  26.         width: 302px;
  27.         height: 142px;
  28.         padding: 3px;
  29.         background:url(http://www.cngoldnet.com/images/default/bg_06.jpg) 1px 1px repeat-x #FFF;
  30.         line-height : 17px;
  31. }
  32. #indexcontent_top_adnewscontent li#adnews_01
  33. {
  34.         margin: 0 0 5px 1px;
  35. }
  36. #indexcontent_top_adnewscontent li#adnews_02
  37. {
  38.         width: 303px;
  39.         margin: 0 0 5px 0;
  40. }
  41. #indexcontent_top_adnewscontent li#adnews_03
  42. {
  43.         height: 143px;
  44.         margin: 0 0 0 1px;
  45. }
  46. #indexcontent_top_adnewscontent li#adnews_04
  47. {
  48.         height: 143px;
  49.         width: 303px;
  50.         margin: 0 0 0 0;
  51. }
复制代码

  反复调啊调,还是padding和margin,一个下午快过去了,IE对贴边距离不能准确体现的问题又冒出来了,我简直无计可施,相比opera和mozilla就很听话,但是我能放弃IE吗?不可能,宁愿迁就IE,!important似乎作用不大,有时候似乎IE也认可!improtant,没时间去研究到底!improtant出了什么问题了。几个小时就是乏味的调调调,又始终调不好,伴随着拳头在键盘上落下,鼠标在天空中飞扬,时不时还得出去走走,抽几支烟,怀恋一下表格。最终我实在没办法做到完美还原了,只好换了一种表现形式,先凑合着。我把对比图给出,大家可以看到,差别很大的。可能有人会觉得在这里过分的注重细节了,但我不觉得,我觉得所有的表现设计应该在设计稿里体现,做页面的部分只是一个还原过程,尽量不在制作过程中去进行版面设计。如果制作不能准确还原,那么就会对设计加以限制。

设计稿:
8.jpg

还原页面
9.gif
  另外,说一个我的经验,算经验吧:做网页设计的时候不是天马行空、随心所欲的,应该充分考虑到制作。对于我一般而言,单个页面的制作时间几乎忽略不计,根本不用考虑太多,也没什么难度,因为我在做设计的时候,就充分考虑进了制作的合理和限制,所以当设计稿完成之时,页面的制作也就在心中完成了。表格的切分,嵌套,切割图片时gif和jpg的分界,甚至高度宽度间距,样式表的使用等等全部心中有数,制作自然轻轻松松。
  出现无法还原的情况,我只好归于我的div技术还不好,毕竟表格我用了4年,而div从接触到运用才不到2天,另外设计稿也不是基于div来设计的,这么一想,稍稍释然。下班了,徒弟伸过头来,我哭丧着脸,很沮丧的告诉她:唉,今天做不完了。她走了,我留下,继续向下做。
  突然发现background的正确表达,于是回头回头,将所有的background属性精简,也算郁闷中一大快事。
  对于内容,分成3块,标题、内容、更多,这时我依旧不清楚<p>和<span>,于是看了看其他网站代码,发现可以使用<hX>来定义文本内容,于是没多想一口气用3个<h3>/<h4>/<h5>,代码如下:

页面我只给出一个li的定义,其他都是复制粘贴了。

  1. 页面

  2. <li id="adnews_02">
  3.     <h3><a href="#">◆ 青岛市2001-2002年度金桥工程科技咨询先进集体</a></h3>
  4.     <h4>1、青岛捷能汽轮机股份有限公司科协技术专家组<br />
  5.             2、铁道部南车四方机车股份有限公司科协技术专家组<br />
  6.             3、青岛海晶化工集团有限公司科协技术专家组<br />
  7.             4、重汽集团专用汽车公司科协技术专家组<br />
  8.             5、青岛钢铁集团公司科协技术专家组<br />
  9.             6、海军四八零八厂科协技术专家组</h4>
  10.     <h5>|<a href="#" title="点击查看详细内容"> 详细内容</a>|</h5>
  11. </li>
复制代码


  1. 样式表

  2. #indexcontent_top_adnewscontent li#adnews_01
  3. {
  4.         margin: 0 0 5px 1px;
  5. }
  6. #indexcontent_top_adnewscontent li#adnews_02
  7. {
  8.         width: 303px;
  9.         margin: 0 0 5px 0;
  10. }
  11. #indexcontent_top_adnewscontent li#adnews_03
  12. {
  13.         height: 143px;
  14.         margin: 0 0 0 1px;
  15. }
  16. #indexcontent_top_adnewscontent li#adnews_04
  17. {
  18.         height: 143px;
  19.         width: 303px;
  20.         margin: 0 0 0 0;
  21. }
  22. h3
  23. {
  24.         margin: 0;
  25.         padding: 0;
  26.         font-size : 9pt;
  27.         font-weight : bold;
  28.         font-family : 宋体;
  29. }
  30. h3 a
  31. {
  32.         text-decoration: none;
  33. }

  34. h3 a:link
  35. {
  36.         color: #000;
  37. }

  38. h3 a:visited
  39. {
  40.         color: #000;
  41. }

  42. h3 a:hover
  43. {
  44.         color: #ED1C24;
  45. }
  46. h4
  47. {
  48.         margin: 4px 10px 0 10px;
  49.         padding: 0;
  50.         color: #006;
  51.         font-size : 9pt;
  52.         font-weight : normal;
  53.         font-family : 宋体;
  54. }
  55. h5
  56. {
  57.         color: #900;
  58.         margin: 0;
  59.         padding: 0;
  60.         text-align : right;
  61.         font-size : 9pt;
  62.         font-weight : bold;
  63.         font-family : 宋体;       
  64. }
  65. h5 a
  66. {
  67.         text-decoration: none;
  68. }

  69. h5 a:link
  70. {
  71.         font-weight : normal;
  72.         color: #900;
  73. }

  74. h5 a:visited
  75. {
  76.         font-weight : normal;
  77.         color: #900;
  78. }

  79. h5 a:hover
  80. {
  81.         font-weight : normal;
  82.         color: #ED1C24;
  83. }
复制代码


  剩下又是padding,margin的调整,不过调了一天的padding,margin,现在调整速度也较快了。做完这部分就赶快扔掉,不再想,再想就要发疯了。继续向下做。



  这一块最初我看作是中间一块,命名div为indexcontent_middle。先解决这一块的上部分,左边广告,右边专题区域。难度依然是上下两条2px的黑色分界,IE会不听话的贴边。对于广告那块,我最终的办法是设置为背景图,虽然这样不好,假如使用FLASH就不行了,但是折腾了一天,没心力了。对于右边,调了一下,可以使用margin和!important解决。中间有个插曲,我依旧不知道<p><span>,所以对于每个图片旁边的三行标题,正好我刚使用了<hX>,所以自然我就顺延定义了<h6><h7><h8>。结果发现只有<h6>有用,其他两个没用,纳闷,一查样式表手册,哦,原来<h>只是从1-6,靠,顺便就把<h>这个标记熟悉了,回头想起之前使用的<h3><h4><h5>显然不合理。但是,但是,我再也不想去动那一块了,先不管了。对于专题区域的布局,display: block;,好,代码如下:


  1. 页面

  2. <div id="indexcontent_middle">
  3.     <div id="indexcontent_middle_ad">
  4.         <ul>
  5.         </ul>
  6.     </div>
  7.     <div id="indexcontent_middle_subject">
  8.         <ul>
  9.             <li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_03.gif" /></a></li>
  10.             <li id="text">
  11.                 <h6><a href="#">八厂科协技术专家组</a><br />
  12.                         <a href="#">连理工大学校园里</a><br />
  13.                         <a href="#">程9月启动实现</a><br /></h6>
  14.            </li>
  15.             <li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_04.gif" /></a></li>
  16.             <li id="text">
  17.                 <h6><a href="#">八厂科协技术专家组</a><br />
  18.                         <a href="#">连理工大学校园里</a><br />
  19.                         <a href="#">程9月启动实现</a><br /></h6>
  20.            </li>
  21.             <li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_05.gif" /></a></li>
  22.             <li id="text">
  23.                 <h6><a href="#">八厂科协技术专家组</a><br />
  24.                         <a href="#">连理工大学校园里</a><br />
  25.                         <a href="#">程9月启动实现</a><br /></h6>
  26.            </li>
  27.         </ul>
  28.     </div>
  29. <div>
复制代码

  1. 样式表

  2. /* -----------正文中----------- */
  3. #indexcontent_middle
  4. {
  5.         position: relative;
  6.         width: 770px;
  7.         height: 750px;
  8.         margin: 0 auto;
  9.         padding: 0;
  10.         background: #FC0;
  11. }

  12. /* ---广告区域---*/
  13. #indexcontent_middle_ad
  14. {
  15.         float: left;
  16.         width: 150px;
  17.         height: 54px;
  18.         background-color: #ED1C24;
  19. }
  20. #indexcontent_middle_ad ul
  21. {
  22.         margin: 0;
  23.         padding: 0;
  24.         width: 150px;
  25.         height: 54px;
  26.         LIST-STYLE-TYPE: none;
  27.         background: url(http://www.cngoldnet.com/images/default/ad_02.jpg) 0px 2px no-repeat;
  28. }

  29. /* ---专题区域---*/
  30. #indexcontent_middle_subject
  31. {
  32.         float: right;
  33.         width: 620px;
  34.         height: 54px;
  35.         background-color: #000;
  36. }
  37. #indexcontent_middle_subject ul
  38. {
  39.         margin: 0;
  40.         margin-top: 3px;
  41.         margin-top: 2px !important;
  42.         padding: 0;
  43.         width: 620px;
  44.         height: 50px;
  45.         display: block;
  46.         LIST-STYLE-TYPE: none;
  47.         background: url(http://www.cngoldnet.com/images/default/bg_07.jpg);
  48. }
  49. #indexcontent_middle_subject li
  50. {
  51.         float: left;
  52.         margin: 0;
  53.         padding: 0;
  54. }
  55. #indexcontent_middle_subject li#img
  56. {
  57.         margin: 4px 6px 3px 7px;
  58.         border: 1px #ED1C24 solid;
  59.         padding: 0;
  60.         width: 78px;
  61.         height: 40px;
  62.         background: #ED1C24;
  63. }
  64. #indexcontent_middle_subject li#text
  65. {
  66.         text-align: left !important;
  67.         margin: 5px 0 3px 0;
  68.         padding: 0;
  69. }
  70. h6
  71. {
  72.         color: #900;
  73.         margin: 0;
  74.         padding: 0;
  75.         text-align : left;
  76.         font-size : 9pt;
  77.         font-family : 宋体;       
  78.         line-height : 14px;
  79. }
  80. h6 a
  81. {
  82.         text-decoration: none;
  83. }

  84. h6 a:link
  85. {
  86.         font-weight : normal;
  87.         color: #900;
  88. }

  89. h6 a:visited
  90. {
  91.         font-weight : normal;
  92.         color: #900;
  93. }

  94. h6 a:hover
  95. {
  96.         font-weight : normal;
  97.         color: #ED1C24;
  98. }
复制代码


  调完这个,天色很暗了,不能再做了,再晚就没车回家了,两脚一蹬,椅子向后一滑,我远远的,歪着头,斜斜的望着今天的成绩。真是悲哀,还叫嚷着今天就要做完,看看,这才做了多少,还有多少没做,即便做了的不少也是勉强完成,我太狂妄了。
  不再嚣张,我就像一个战败的将军一样,灰溜溜的离开空荡的公司,灰溜溜的搭上车,灰溜溜的回到家,灰溜溜的钻进被窝,灰溜溜的睡。
  后来回想,虽然这一天我并没有完成多少,但是坚持不懈的反复调试和思考摸索实践,让我对标准有了更深入的理解,在一些属性的使用上也开始熟练起来,这些一堆积,终于,速度在第三天出来了。

爆牙齿 2004 8 19

  因为这一整天,我做的最多的就是无穷尽的调调调,所以我没办法很详细的写出来,尽力了。

  最后和上次一样,给一个这一天的全部代码,没重新调,大概也许差不多吧:

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




谢谢观赏,多提意见

评分

参与人数 1威望 +4 收起 理由
经典论坛大妈 + 4 历史打分

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-5 19:29 , Processed in 0.092465 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表