阅读文章

CSS的一点使用体会

[日期:2008-03-10] 来源:  作者: [字体: ]

     很久以前的上一篇博客文章中,我好像说这一篇要写装扮自己博客的体会,很抱歉,我又食言了,我没做。这几十年来,没有毅力,从总会在事情没开始前放弃,总是畏惧努力争取,所以老大不小,一事无成。我知道,原来这些年来其实我一直都是个胆小鬼。
   这半年总共写了有两段源代码罢,一个是关于公交线路转乘查询,一个就是铁道职业技术学院的精品课程网页。还没放到网上,先截个本地的图看一看。很抱歉,我很懒,直接Printscreen截的图。
  
  我不是专业人士,网站做的极其简单恶心,唯一自我安慰的是网页是我一个字一个字敲的,没有用设计工具,看起来有点愚蠢的嫌疑。上面的Flash LOGO做成2000px宽,这样的话在各种分辨率下就不至于出现过小以至于周围出现黑边的情况。然后下面的蓝色条左边的日期是用document.write输出的,本来我想把js、CSS和内容严格分开,但真做的时候往往纪律性做不到那么强, 这是我的弱点,做事情没有毅力,总是为自己找借口,空想的时候占大部分,却很少动手去做,半生清贫,其实大部分是自己的原因。逝者如斯夫,不知不觉的就老了,我刚工作的时候,还不到21岁,我以为到我本命年时,我可以有一点成绩,24岁的时候发现自己没有任何进步,很快到了26岁,很快看周围的人一个个结婚生子,而我却一直在原地踏步。没有争取过,也就无所谓收获。愈沉沦,生命就越平庸。生活就是无穷尽的后悔,但是希望在前方。
   蓝色条右边的导航就是<ul><li></li></ul>,现在好像很少有人用表格了。<div>是设计页面最常用的标签了,这个网页没用一个<table>。下边的内容左边是一个<div>快,右边是另外一块里面嵌套了一个iframe,左边的折叠菜单决定右边的内容。左边的导航菜单用ASP.net做当然极其简单,但用JavaScript写能帮我复习一下JavaScript的语法。Microsoft做IDE工具作的非常棒,ASP到.net 1.1 到 2.0,做网页成为了一项简单的事情,曾经跟ander cui讨论如果我们和中学生争同样的职位,我们有什么优势?只要是流行的东西,网上总会有大堆的资料,几乎任何问题都可以解决。但涉及到基础的东西比如MySQL、apache源代码分析类似的东西网上的资料往往很少,或者说需要你费半天劲才能搞明白。这几张网页让我重新复习了一遍CSSJavaScriptHTML标记语言,尽管比较简单,从这点上说,还是有一点意义的.
   昨天晚上找了一点JavaScript GUI的资料看了看,我以前一直想可以用JavaScript做类似GDI+的效果,但一直也只是在想而已,从没有动手去实现、去查资料;上网搜了搜,发现有一个wz_jsgraphics.js(从http://www.walterzorn.com可以下载),做的非常好,还可以实现动画效果,我这种毅力极差的人做不到,现在看来;不过不知道能不能实现Xor的效果,可能实现不了;如果你不想自己看js源代码,那听我说一说它的原理。
   一般来说,GDI实现的基础是绘制点,点动成线,线在电脑上可以看成一系列的像素点拼接而成,其他图形可以看成一系列的线连接而来,而填充可以通过一堆线堆成,如果是渐变色的话,还要用到插值算法。 那怎么绘制点呢,很简单,一个长宽都是1px的div就可以看成一个点, <div style='position:absolute;left:100px;top:100px;width:1px;height:1px;
  ;background-color:yellow;overflow:hidden;'></div>看,这就是一个黄点,你可以改变宽度高度使它成为一个粗大的点。
  那线呢?我们可以用javascript让点连起来。 <script language="javaScript">
  x=2;
  y=3;
  m="";
  while(x<200 && y<200)
  {
  
  m+='<div style="position:absolute;left:'+x++ +'px;top:'+y++ +'px;width:1px;height:1px;background-color:#000;overflow:hidden;"></div>';
  }
  document.write(m);
  </script>
  
  看效果
  当然,wz_jsgraphics.js的实现比这复杂多了,要考虑各种情况,我只是用自己的代码演示,并无侵权。
  其他的各种情况类似讨论,不再赘述。  


阅读:
录入:blue1000

评论 】 【 推荐 】 【 打印
上一篇:Mix 08到来之前的Monolight Update
下一篇:WCF 基础加开发简介
相关文章      
本文评论
发表评论


点评: 字数
姓名:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款