日期:2014-2-19 浏览次数:20151次 点赞次数:20

网页制造aiyiweb文章简介:其实想重提下那个话题,不断都在忙这忙那的没时间。好不容易到一个周末了,原定安排是去D2的但是由于时间安排不过来,所以能抽空写写。早前的讨论不了了之,其实这一点都不是Twinsen的风格。

其实想重提下那个话题,不断都在忙这忙那的没时间。好不容易到一个周末了,原定安排是去D2的但是由于时间安排不过来,所以能抽空写写。早前的讨论不了了之,其实这一点都不是Twinsen的风格。

名字,你看名字多重要,我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我不断说的作为一个技术人员该当恪守的准绳——互联网创作共享协议。我不能抄一个刚入门的小朋友Idea(由于他们思维没被禁锢),然后换一套名称和说法说是本人的。sorry,我做不到。

不过其实这片文章只是Twinsen的一个想法了,可以说比较的疯狂。另外顺带一提的是这里的是Twinsen的站点,并不是腾讯的站点。这里的东西并不是代表腾讯的观点和角度。

援用森林群的谈话内容
技术人员的争论就是技术人员争论,谈锤子政治和外交。要叼冲我来,我是非常乐意被叼的。是啊,我很犯贱;你叼我就是塞钱进我的袋子里面。正如我常说的那句话:“SB之所以继续为SB是由于他压根就从来没无认识到本人是一个SB。”粗俗?但是原话是心思学家弗洛伊德说的哦:“人总是先有自我认知才会再有自我超脱的。”我如今就是到了自我认知的瓶颈了,所以要创造这样的环境逼迫我自我认知。

另外说到网格的内容,为什么我反对这个思想的流传?首先声明的我不是反对关于设计的网格化,我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码:

  1. <div id="yui-main">
  2. <div class="yui-b">
  3. <div class="yui-g">
  4. <div class="yui-u first"></div>
  5. <div class="yui-u"></div>
  6. </div>
  7. </div>
  8. </div>

大家可以很清晰的看到这里的yui-u,或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除当前,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需求改动一下款式表就行了,而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离,如果强行改变会出现下面的一些问题:

  1. 改变表现的时候必须动到html,一次美观上面的修正要动到三条任务线,极大的人力资源耗费。
  2. 会出现排在第五个的叫做“first”的框
  3. 会出理想际为240宽的叫做“180宽”的框
  4. 会出理想际为三列的叫做“四列”的规划
  5. 会出理想际为红色的叫做“blue”的字

这些也就是相当于如今很多人流行的“left_box”和“right_box”,快速改版当前变成了在左边的“right_box”。这不就是相当于歪曲理想的真理么?但其实最重要的是第一点,这样的任务方式和我们以往的table规划任务方式有差别么?你提个改个款式需求,全公司(设计、页面、开发、功用测试、CE数据监测)都跟着你去跑,这是很不智的。

写到这里回看下,顺带改了改标题变成《这将是一场反动》系列的第二篇关于CSS的文章算了。上面说完不对的,下面给大家看看一个我最近刚接手的一个新版项目代码段:

HTML片断
  1. <div id="index_news" class="mode">
  2. <h3 class="title">公益旧事</h3>
  3. <div class="content">
  4. <ul>
  5. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  6. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  7. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  8. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  9. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  10. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  11. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  12. <li><a href="#">旧事标题,旧事标题,旧事标题,旧事标题</a></li>
  13. </ul>
  14. </div>
  15. <a class="more" href="#">更多</a> </div>
CSS片断
  1. .mode{
  2. position:relative;
  3. float:left;
  4. font-size:12px;
  5. }
  6. .mode h3.title,
  7. .mode h4.title{
  8. color:#234C00;
  9. padding:5px 10px;
  10. font-size:14px;
  11. }
  12. .mode .more{
  13. top:5px;
  14. right:10px;
  15. font-size:12px;
  16. color:#4282ab;
  17. position:absolute;
  18. }
  19. .mode .content{
  20. clear:both;