Updates from April, 2008 Toggle Comment Threads | Keyboard Shortcuts

  • 94smart 9:55 am on April 9, 2008 Permalink | Reply
    Tags: , CSS Naked Day, CSSNakedDay08, W3C, , 裸奔   

    别紧张,只是CSS裸奔节又到了。

    4月9日是今年的CSS Naked Day,每年到这个日子就会看到大大小小的网站、Blog去掉CSS样式表,让网站”裸奔”,故这天也叫”CSS裸奔节”。

    这个日子是为了推广CSS及XHTML等W3C标准页面代码而设的,更能突出网站在没有CSS的情况下代码结构是不是够清晰,其实我的Blog是一个反面例子,去掉CSS后作为主体的Post列表出现的太靠下了~

    我使用的是Aja Lapus做的WordPress插件来实现的效果,也可以到CSS Naked Day页面去看其他实现方法。

    最后,基于大家现在什么节都过的心理,在这里说一句:CSS裸奔节快乐!


    Technorati : , , , , ,

     
    • zing 1:58 pm on April 9, 2008 Permalink

      哈哈,happy naked day!~
      我的blog在blogbus,直接清空CSS就OK了……

    • 94smart 2:06 pm on April 9, 2008 Permalink

      我嫌模板改来改去的,还是用插件省心。

    • 平台 5:32 pm on April 14, 2008 Permalink

      CSS裸奔节快乐!

  • 94smart 11:39 am on October 8, 2007 Permalink | Reply
    Tags: , , , ,   

    原来是CSS Sprites呀 

    最近一阵国内Blogger开始涉及CSS Sprites,是因为有人偶然发现Google搜索首页JS的秘密,之后我才知道去年Yahoo改版使用的技术原来就是这个,当时不知道怎么形容,只好套用软件资源图片的概念,看过Realazy的文章才大致理解,发现自己当时的理解还是太浅显,这是早在2005年就出现的技术呀。

    不可否认,这种方法确实减少了CSS文件里的HTTP请求数,但是图片的更新和配置比较有难度,且半透明和不透明图片最好分开打包。

    最后,也许是我胡思乱想,这种方法如果继续发展下去,完全可以省去前端操作人员(网页制作、编辑)用Photoshop切割图片的工序,会否变成引用原设计图直接作为资源图片呢?


    Technorati : , , , ,

     
  • 94smart 9:34 pm on April 5, 2007 Permalink | Reply
    Tags: , , ,   

    赶上CSS裸体节 

    Blog出事了?

    我的Blog没事,这是在过节呢,CSS Naked Day,在4月5号这天参加该活动的网站都会去掉所有CSS,用来支持网页标准。

    我用了Wordpress的插件,每年只在4月5日去掉CSS,过了这天就会恢复过来~


    Technorati : , , ,

     
  • 94smart 11:16 am on March 5, 2007 Permalink | Reply
    Tags: , , ,   

    用XHTML+CSS实现文章列表标题时间对齐 

    今天要查LCD的资料,跑到PConline去看,看到他们的文章列表觉得效果还好,如图:

    pconline_list.gif

    无意间发现文章列表的页面代码写得很奇怪,首先他们用ul做文章列表这没错,接着又用另一个ul来放时间,之后用一个table把两部分拼起来,做成列表标题和时间都对齐的效果,如下(稍微调整了一下):

    <table width="97%" cellspacing="5" cellpadding="0" border="0" align="center">
    <tr>
    <td width="85%"><ul>
    <li>· <a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> </li>
    <li>· <a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> </li>
    <li>· <a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> </li>
    <li>· <a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> </li>
    <li>· <a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> </li>
    <li>· <a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> </li>
    </ul></td>
    <td width="15%"><ul>
    <li>[ 02-28 ]</li>
    <li>[ 02-27 ]</li>
    <li>[ 02-27 ]</li>
    <li>[ 02-26 ]</li>
    <li>[ 02-26 ]</li>
    <li>[ 02-12 ]</li>
    </ul></td>
    </tr>
    </table>

    可以看出废码那是相当的多,而且语义很混乱,其实一个ul就够了,配合CSS做出对齐效果很简单,以下是我给出的代码:

    <style type="text/css">
    .list{
    width:398px;
    font-size:12px;
    float:left;
    }
    .list ul{
    display:block;
    margin:0px;
    padding:0px;
    width:100%;
    float:left;
    }
    .list ul li{
    text-align:left;
    display:block;
    width:100%;
    margin:2px 0px;
    padding:0px;
    list-style-position:inside;
    float:left;
    }
    .list ul li a{
    float:left;
    display:block;
    }
    .list ul li span{
    font-size:12px;
    display:block;
    float:right;
    }
    </style>

    <div class="list">
    <ul>
    <li><a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> <span>[ 02-28 ]</span></li>
    <li><a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> <span>[ 02-27 ]</span></li>
    <li><a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> <span>[ 02-27 ]</span></li>
    <li><a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> <span>[ 02-26 ]</span></li>
    <li><a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> <span>[ 02-26 ]</span></li>
    <li><a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> <span>[ 02-12 ]</span></li>
    </ul>
    </div>

    效果见这里

    上面代码的div是用来从外层控制列表样式的,可以用其他块级元素替换,li里面的span用来放时间,也可以使用div等元素替换,另外其他所需的样式(如标题前的点)都可以用CSS定义,灵活度上升不少,不知道这样实现算不算是Unobtrusive的?

     
    • JunChen 11:46 am on March 5, 2007 Permalink

      float 之后不用再写 display: block;

      float 的对象自动被视为 block-level

      :)

    • 94smart 12:39 pm on March 5, 2007 Permalink

      多谢,确实定义重了,应该不太影响效果。

  • 94smart 6:15 pm on April 27, 2006 Permalink | Reply
    Tags: , , , ,   

    关于网页设计和CSS+XHTML 

    最近老冒写了两篇(12)关于Web2.0网站设计的文章,很多内容都有同感,尤其是第二篇里的:

    试图用css编码, 而不是用css设计
    设计人员仍然是photoshop画页面,然后切割,然后用css去实现。 这个往往导致的结果就是产生大量不必要的垃圾代码,xhtml的代码结构为了实现美工设计的某些其实微不足道的效果而变得复杂不堪。

    感觉上面写的就和自己的工作及其相似:制作人员一遍又一遍得用CSS去实现Photoshop的设计,垃圾代码是不可避免的。

    反过来想想,为什么不能直接让设计人员用CSS去设计网站呢?

    以上观点有人持反对意见:

    对美工而言,精通CSS,然后考虑到CSS的各种属性和限制去做设计,可能会限制他的创造力。所以我以为美工更应该清晰页面的结构,在页面设计的过程中,做到针对结构设计更为实际。在维持一个大局风格基础上,在类似的结构上有意识的样式统一,同时页面各个部分的承启转合清晰一致,那么页面制作人员也能方便的进行页面拆合,维护起来也方便。
    来源:“web 2.0时代的网页设计风格” 读后感

    我的观点是:使用CSS设计网站确实会限制创造力,这没错,但是功能服务性网站比较特殊,所以发挥创造力需要限制在一定范围里,这个范围包括对用户的易用性、可用性,以及对网站的结构化和可维护性。

    换句话,就是在CSS正常发挥布局作用的前提下,在一个又一个的框框(也就是DIV)里面,发挥设计人员的最大创造力(美观和易用),这样可以尽量减少垃圾代码的堆积。

    另外,老冒的想法有点过于理想了,”让更多的程序员参与到设计之中,让整个项目的人都think in css”,但是我真的希望所有相关人员都可以Think in CSS。

    p.s.对于技术和美术的页面问题,包括CSS和XHTML,我现在的解决办法是,美术用CSS和XHTML制作页面,然后将页面根据DIV布局切块,每块里面只有纯XHTML的代码(可以适量有class和id),然后由技术人员针对单块内容的规则进行程序嵌入,最后由制作人员进行整合。这样做很麻烦,但是可以减少部分不必要的麻烦。

    Technorati : , , ,

     
    • 高人 7:32 am on April 30, 2006 Permalink

      又一个在这里放废话的人,做点正事好吗,求你了这些东西你讨论了有什么用吗。毛病。~~~CSS有用没用,你个贱人能说的了吗。

    • 94smart 9:32 am on April 30, 2006 Permalink

      这位高人,你做过正事吗?
      做过什么?
      这些如果没用你说什么有用?
      骂人谁不会,骂出点道理才是。

      如果你只会在别人blog下面匿名骂人,趁早滚吧,同时没有地方会欢迎你。

    • bluerain 7:46 pm on May 6, 2006 Permalink

      用不用CSS完全依照PROJECT而決定,答案並不是絕對的

    • 94smart 10:35 pm on May 6, 2006 Permalink

      to bluerain:有的Web项目确实可以不用CSS,只用纯XHTML,但是不排除以后会用CSS进行美化。

    • kevin 4:14 pm on May 19, 2006 Permalink

      用CSS去实现怎么会产生大量的垃圾代码呢?
      我觉得CSS共用会减少很多垃圾代码呢!!!

    • 94smart 5:08 pm on May 19, 2006 Permalink

      前面提到的垃圾代码是说:设计的时候不考虑CSS的能力,又为了用CSS实现设计图,所以不得加入很多不必要的代码,例如非得用CSS去做不规则的外框,CSS可以做,但是感觉比用table废码还多。

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
esc
cancel

无觅相关文章插件,快速提升流量