Tagged: CSS RSS

  • 94smart 9:55 am on April 9, 2008 Permalink | Reply
    Tags: CSS, 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, , , ,   

    原来是CSS Sprites呀 

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

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

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


    Technorati : , , , ,

     
  • 94smart 5:48 pm on July 10, 2007 Permalink | Reply
    Tags: AND, CSS, , OR, The Zen of CSS design, 活动体验, ,   

    某活动体验,是我理解错了 

    某网站的活动,以下是活动公告截图:

    thezenofcss.jpg

    这个不知道大家是怎么理解的?

    对于”凡购买《CSS禅意花园》和《JavaSscript高级程序设计》两册图书的读者将免费获赠《精通CSS》一书或300C币“,我的理解是只要买了《CSS禅意花园》和《JavaSscript高级程序设计》两本书中任意数量的书就可参与活动。

    活动结束后才知道,是同时买两本书才可能赠另外一本或积分,是我理解错了。但,活动说明里是不是该清楚地说明?以断了像我这种理解有偏差的用户的憧憬?哪怕加一个”同时”。

    请别深究是哪个网站,写出来也没有别的意思,只是在思考,电子商务类网站对文字描述的准确把握是不是需要更注意一下?

    p.s.写到最后才想起来一个与本文无关的逻辑:程序员理解的”和”,就是逻辑与(AND),也就是所有条件都必须达成;其他用户理解的”和”就是逻辑或(OR),只要其中任意条件达成就OK。


    Technorati : , , , ,

     
    • 张智勇 9:41 pm on July 10, 2007 Permalink

      没得罪你的意思,我也不是程序员,但也能分清“和”“或”,其实人家里面“和”“或”都有,区分的很明显,而且,不但“和”“或”区分的很明显,人家甚至说了“两册”!

      说实在的,我觉得不是程序员思维和非程序员思维的问题,纯粹是语文水平的问题,任何一个语文老师也不会告诉你“和”就是OR。

      我不反对购物网站应注意细节,不过你的证据太无厘头了。

      PS.特别说明,我不知道你在说哪家网站,估计不外乎第二书店、互动。

    • 张智勇 10:31 pm on July 10, 2007 Permalink

      更正一下我的看法,刚调查了一下,还确实有人“和”“或”不分,我表示晕;http://www.buyren.net/read.php?tid=243382

      我目前同意这里bbs100的看法:卖东西不是考顾客的语文水平,应该注意要明了的表达来满足不同层次的买家的理解能力。

      不过我相信你看到的文案肯定不是程序员写的,100%是市场人员写的(我就是市场出身,也负责过促销,这事很明显:换我也会这么干),所以实际上和程序员思维没关系——这个可以问问那个网站的。

    • 94smart 9:37 am on July 11, 2007 Permalink

      智勇不用这么认真吧,还专门去buyren发个帖子问。

      我只是觉得电子商务网站应该表达明确,是1就是1,是2就是2,产生歧义到最后是说不清的。

      我也没有强调程序员理解的问题,只是写到最后想起来加上的插话而已,忘了标注p.s.

    • iqst 4:09 pm on July 28, 2007 Permalink

      我不是程序员,但也知道上文中“和”的意思是两本都买,还是作者理解有问题

      另外,文字可能是web中对容易被忽视的元素了

    • 94smart 11:34 pm on July 28, 2007 Permalink

      没错,我确实理解错了

    • zdg 12:28 pm on July 31, 2007 Permalink

      这应该是我们的第二书店上的一个活动,相对描述还是清晰的。可能94smart看得匆忙就忽略了。抱歉!

    • 94smart 1:20 pm on July 31, 2007 Permalink

      本文重点并不是讨论谁对谁错,而是网站运营中(尤其是跟钱、用户满意度密切相关的电子商务网站)所需要的严谨态度。

    • 風痕影 1:11 pm on August 11, 2007 Permalink

      老实说我看到这篇时也是想到了程序员和非程序员的差异

      当我在写程序时,确实会把OR对应到 “或”,可是在平常说话的时候,OR会被我理解为相当于中文里的 “和” OR “或”,总觉得在中文的一般表达里,”或” 并不包含两者同时成立的情况

      至于 “和”,我也和您一样觉得:在一般表达中可以同时表示 ”OR” OR “AND”。也不知道是真的这个样子,还是我的中文理解能力不好呢?或许请教语言学家会得到更正确的解答吧?

  • 94smart 12:29 am on April 23, 2007 Permalink | Reply
    Tags: CSS, , , , ,   

    昨日收集 – 开源并非激进分子的游戏 

    2007-4-22

    Logo

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

    赶上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: CSS, , ,   

    用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 11:54 pm on July 21, 2006 Permalink | Reply
    Tags: CSS, , , , , , ,   

    新版Yahoo首页:用软件的方式做网站 

    Yahoo的新版首页终于完整公布了,修改了部分设置,基于好奇的原因,小小研究了一下。

    说得夸张点,Yahoo在用写软件的方式做网站。包括:

    1. Yahoo在UI上的操作,比如换配色,虽然也有别的网站使用,但是从操作上,Yahoo的处理更像是软件的方式,有点像现在的Windows Live Messenger的换色操作。
    2. 图片的调用跟软件的一种图片资源操作如出一辙,软件对图片资源有一种使用方法”将所有图片放在一张图片里,使用相应的位置坐标调用”,Yahoo的做法很类似,页面上的图标、背景图都是来自于一张大图(图标资源1图标资源2背景图资源),使用CSS定义范围来显示相应图片,这么做确实有好处,可以方便预先读取和集中管理图片资源。

    其实前两天就想写这个内容的,但是最近我的Dreamhost空间极度不稳定,导致未能及时发布,今天在发的时候又忘了点当时想写的地方,只好凑合了。

    Technorati : , , ,

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

    关于网页设计和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

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