很有意思的工具，打开网页后选择Edit CSS，页面显示部分就会自动分成上下两部分，上面是IE，下面是Firefox。不过屏幕不够大的话，这样一来浏览面积就更少了。

CSSVista

      乱七八糟的一些小功能不错，切换页面分辨率、标记指定元素等等，但是没有代码提示，写代码有点累，不过简单的兼容性调试应该不会增加太多的工作量。另外，就是FF的这个默认字体似乎不大对。

       小工具总体来说还是很不错的，需要.Net Framework 2.0支持。可惜，现在俺没啥机会写CSS了，存档了……

      下载地址：http://litmusapp.com/labs (需要用邮箱验证)

您可能也喜欢：
CSS Naked Day	HTML+CSS	看完《Css禅意花园》	86的css学习笔记(一) —— 选择器	New Homepage of SEU
无觅

原来的freicurv v2因为不支持wordpress 2.7+以上版本，懒得看代码，直接换成了现在的chrome主题。感觉还不错，效果见本站吧。就是右侧的站外RSS不能显示内容，本来想通过这个显示一下相册的图片，有空再看看代码好不好改吧。

本来还想自己做做主题设计，不过前两天sai同学问了我一个css的问题，我想出解决方法的时候，那边已经解决了….顿时发现自己的技术严重倒退ing….T_T，真的要放弃技术路线了

评论：

• 2008/09/23/, 棍 writes: RSS好像挺正常的
• 2008/09/23/, syx86 writes: 我说的是右侧的站外RSS :)
• 2008/09/23/, 凯尔 writes: 我正在用Chrome打开这个Chrome主题。 Art Hacker不厚道啊，这个chrome明明是ericulous.com的主题。 前不久做个皮，也发现自己的CSS忘得快差不多了。
• 2008/09/23/, 凯尔 writes: 果然chrome用的是webkit，在你的博客上，显示的是Safari 525.13
• 2008/09/23/, syx86 writes: 还好了，只是加了个“DownLoad From”原链接还留着，呵呵
• 2008/09/23/, Eric writes: laf~

您可能也喜欢：
chrome的标签栏	New Homepage of SEU	所谓设计	看完《Css禅意花园》	好像进了Web Development的第二轮
无觅

      其实这篇blog写很久前就写完了，鉴于分析内容是SBBS美工站务的面试题一直没有发出来，今天难得早起，发一下。有兴趣的可以先看看之前的这篇《www2.seu.edu.cn UI设计分析》，里面提到的很多问题，本文中可能就不重复再讲了。

     页面地址：http://www.seu.edu.cn

      先看一下整个页面：

      一个首页面用了16个色块（包括不同选项卡）的背景色，其中如果按面积和位置计算，至少有4种颜色可以用来当作“主色调”，很显然，颜色的搭配是最大的问题，颜色的问题也就到此为止了，反正推倒重来是唯一的出路，也就不多挑毛病了。

      而右侧的4个图片链接（9～12），几次会议上所有人都一致同意去掉，不知道为什么新版首页上却还留着……

      接着从上往下看，1区里面的内容非常饱满，到了2里面，超过70%的面积是空着的，完全没有平衡感。不过，往好的方向想…大家的注意力肯定更多的被东南大学4个字吸引过去了…

      开始挑小问题：右上角的English到左右|的间距都有不一样……

       再看下拉菜单，鼠标必须悬停到文字上，文字才会变色，不然只有背景变色。这个虽然不能完全算是低级错误，但也不是高级的……。其他问题也很多，宽度不一，不同浏览器效果不统一等等。不过有一点算是进步，在我使用Opera(9.50 beta)测试的时候，没有出现BBS上很多同学说的浏览器崩溃的现象，不知道是苏迪的人修复了这个bug还是新版本Opera的兼容性比原来强了（经测试Opera 9.26前版本仍存在问题）。

      不过这个导航栏也不是一无是处，把“盘”改成“蟠”，多少算一个进步（这个其实还要归功于sunway同学打的数个电话……）。

      顺便再扯个用户体验的问题，下半部分的四个选项卡都是鼠标悬停自动切换的，并没有加上悬停时间判断等设置，在选项卡上也没有选中效果变化（虽然下面的内容会更换背景色）。这样就造成了一个结果，如果鼠标从上方移动至下方想点击一条新闻，但却经过别的选项卡，就会点不中（鼠标路径如图所示）。

      再到Firefox里转转，那个问题叫多啊，随便帖几张图。其他浏览器里的问题就不全部列举了。总之，惨不忍睹。

 导航栏和banner的重叠部分。

 右侧图片链接上方没对齐。

搜索框宽度不对就算了，还移到了灰色底色之外。

最后来看看代码：
1． DTD声明从来没找到过
2． Div里套着table，td里面还套着js
3． Div的ID命名使用div1、div2…..
4． Div有了id还将css写在style=””里
5． Css里面都没有*{}
6． 使用iframe调用页面统计代码
7． Meta信息缺乏症，详见《从www2.seu.edu.cn看<meta>的重要性》
8． 其他n多不符合w3c标准的html/js代码

      顺便提个老毛病：ICP备案的格式及链接都不符合要求，哪天被人抓到小尾巴又要折腾几天了。

      如果说页面设计上不好看，看着看着没准就习惯了。但是以上这些问题却都是做Web Design的新手犯的低级错误，如果是BBS上的一个没什么人去的内页，那么勉勉强强可能还能接受，但是作为一所大学的首页，这些就不大合适了。

评论：

• 2008/06/22/, 棍 writes: 真细啊~~
• 2008/06/24/, 凯尔 writes: 看新主页的第一反应，就是配色太差了。 不过重装了以后就没echo过，上不了主页，只是在教务处看了一眼。 不过至少比原来那个很矬的主页强了不少，至少像一个“主页”了。
• 2008/06/24/, 凯尔 writes: 还没仔细看过，话说，新主页应该不是用表格写的吧……如果那样，偶只能继续BS了。
• 2008/08/18/, syx86 writes: 说实话，我不觉得现在的这个比原来好.....各个方面，除了有了SBBS的链接
• 2008/09/25/, 凯尔 writes: 再看看东大主页的源代码，才知道什么叫一个痤啊！ 用表格写出来的网页，能好到哪里去啊……且不说IE的一大堆表格的BUG了。 话说，东大的主页的代码，还存在CSS的概念吗？ 要说W3C验证，至少也要上100个error 说到Doctype！声明，其实表格的有些效果（特别是表格对齐的问题），必须不使用声明才能正常显示的呀。 所以东大的主页没有办法用DTD声明，否则就不能正常显示。 大量的attr值不使用引号。 用jQuery才是王道啊……
• 2008/09/25/, syx86 writes: @凯尔 其实通过w3c验证的意义不是很大，只能作为参考。另外，DTD对表格的影响没有那么夸张，有兴趣研究的话可以看看这个 http://www.w3pop.com/learn/view/doc/tag_table/

您可能也喜欢：

看完《Css禅意花园》

从www2.seu.edu.cn看meta name="Keywords"的重要性

首届江苏省高校辅导员论坛

所谓设计

My job in future

无觅

把BBS的进站换了，内页主体也改成灰/黑配色。进站抄了一个Js效果，并且使用了爱枣报上的十张照片，可以在这里看最终效果，当然从这个进站直接登录到SBBS是不可能的。

这次令我比较惊讶的是，学校里包括校首页在内的很多网站也都换成了灰色主题。包括学校首页、教务处、电工电子中心、先声网站、图书馆、建筑设计研究院(不过好像本来也是这个配色…)、机械工程学院、交通学院、物理系(虽然只换了banner，不过也不容易了)、常州研究院、成贤学院、自动化学院。算上BBS有12个网站，当真超乎我的意料，虽然其中很多只是用了滤镜之类的简单方法。再次还是建议大家不要使用滤镜这种仅对IE有效的方法，不是我支持FF，而是这种方法消耗CPU的确比较厉害，特别是全国大大小小网站都使用的时候…

这三天虽然很多网站都是灰色的，但生活不应该被灰色所笼罩，因为现在还有这样令人难以置信奇迹在发生，也许我们应该笑一笑。

评论：

• 2008/06/24/, 凯尔 writes: 滤镜的方法的确快啊，像我这样的懒人……
• 2008/08/18/, syx86 writes: 懒人很多....嗯

您可能也喜欢：
被换下的两张进站	关于启用虎踞龙蟠BBS站LOGO的公告	pencil	母亲节~~	自动登录中的进站呈现
无觅

http://naked.dustindiaz.com/

css裸奔节，每年4月5日，好像有点晚了，不过还是跟个风让Blog也过24h吧。

很想让BBS也过个节，但恐怕BBS一过节，我就得24h接受来自四面八方的关心了….淘宝去年过了次节，但今年好像没什么动静，看来目前国内还不适合过….

您可能也喜欢：
虎踞龙蟠	关于启用虎踞龙蟠BBS站LOGO的公告	祝贺虎踞龙蟠BBS入选2008年第三届全国十佳校园BBS	虎踞龙蟠BBS站十周年站聚视频/照片	餐盘版，送餐盘
无觅

应xiaoxiao师兄到要求整理了一下上周五的”第二期网页设计交流会”中讨论到的与新版校首页相关的部分，外加了（很多…）自己的意见。

页面地址: http://www2.seu.edu.cn

浏览器环境: IE 7 / Firefox 2.0.0.12 / IE 6 (Multiple IE)

自上而下，Banner很简洁，但是感觉有些过于简洁（与下面的图相比）。其右侧的“旧版 |
English”(图中红圈内部份)使用了11px，导致”旧版”两个字出现锯齿，如增大至12px或使用PMingLiU字体来解决，English的链接也没有加。这一块的链接最好还是用文字代替图片，否则不利于搜索引擎的分析。

Banner下面的导航栏的链接顺序比旧版首页要好，最好在后台进行一下流量分析，进一步优化调整。按钮的设计上整体感觉不错，但是建议两个按钮相接部分的细节再处理一下，另外文字及其前面的箭头在按钮上不居中也应该修正。还有一个小问题，就是应该是”虎踞龙蟠BBS”。每个按钮下的下拉框的配色等最好能重新设计，与整体风格不是很搭配。

导航栏下方的图片中的中间那一点很有味道（虽然点歪了，也不够精细），右侧边缘的那1px似乎是处理失误。

中间部分在”东大新闻”的选项卡里，所有的文章标题在50%左右的位置做了截断，但其他三个选项卡内并没有相同的处理，应统一处理方式。同时，就目前文章标题长度来看，最长的标题仅占所处容器宽度的75%，右侧部分仍显得比较空，可以考虑加上新闻发布时间进行填充。

在新闻的部分的”more”之下还有大快的空白区域，不知道设计上的用意何在？

其右侧的友情链接中图片的距离留白过大，在图片已经做过边框处理的情况下完全没有必要。而下方的下拉框及搜索的input的左侧应保持与上方图片相同的margin。另外，两个”搜索”按钮是一个比较明显的错误。

再往下，footer中还是”© 2006“，E-mail地址上最好还是加上mailto链接，后面的ICP备案也不符合信息产业部的要求。

页面整体上比旧版的一个明显不足就是在1024×768分辨率下不能显示所有内容，而第一屏之外基本没有任何有效信息。以我使用的Maxthon 2.0.8标准模式为例，第一屏的最后一行正好能显示最后一条新闻的一半，用户会习惯性的下滚但找看不到更多信息。如果能前两张图中的多余空白去掉，应该可以解决。

从代码上分析，有很多类似于<style type=“text/css”><!– –></style>的冗余代码，整体上使用已经被淘汰的table布局方式导致冗余代码量的进一步增加，而<head>区的<meta>信息也很不完整。站内图片、css等文件引用上采用的都是绝对链接，这一点是否应该更改不好说，因为从链接上分析目录结构比较乱。另外，在</html>之后还是用了一个iframe调用了一个统计文件（一开始还以为是被挂马了…）建议改用类似Google Analytics那样的js脚本形式放在</body>之前。

评论：

• 2008/03/11/, polun writes: 老大，眼光确实敏锐。
• 2008/03/24/, 从www2.seu.edu.cn看的重要性 | 86's world writes: [...]       大家可以先尝试一下用Google.com搜”www2.seu.edu.cn”，先是tchnorati.com抓取我BLOG上的那篇《www2.seu.edu.cn UI设计分析》，然后便是BLOG上的原文，第三位才是http://www2.seu.edu.cn。不过已经比上周搜的时候好多了，那时候搜”www2.seu.edu.cn”第一页末尾才是开始测试的通知，而这个站在搜索结果中根本看不到。而上周搜索“东南大学”的时候，排在第一位的则是新浪网关于动力楼火灾的报道（而且是有一点负面的那个版本）。如果现在搜索“东南大学 动力楼”排在第一位的则是JunChen的那篇《【纪实】东南大学动力楼·火灾》. [...]
• 2008/06/22/, New Homepage of SEU | 86's world writes: [...]       其实这篇blog写很久前就写完了，鉴于分析内容是SBBS美工站务的面试题一直没有发出来，今天难得早起，发一下。有兴趣的可以先看看之前的这篇《www2.seu.edu.cn UI设计分析》，里面提到的很多问题，本文中可能就不重复再讲了。 [...]

您可能也喜欢：
New Homepage of SEU	从www2.seu.edu.cn看meta name="Keywords"的重要性	看完《Css禅意花园》	HTML+CSS	CSS Naked Day
无觅

• Css Tidy  介绍
• Blogbus2RSS转换工具在线版 介绍
• 优酷视频下载链接获取工具
  介绍

您可能也喜欢：
upgrade to WordPress 2.5 beta1 7098	GPRS+CCProxy+SocksCap	大暴雨，夜拍	Oldjun:是我，“黑了”墨尔本国际电影节官网[转]	新浪微博屏蔽[蜡烛]表情
无觅

        给www.syx86.com做了个首页。借了几个Icon，除了tools那个都做了些改动，不知道涉不涉及版权问题，谁叫自己不会做呢。

        背景….准备过段时间重做，这个纯属碰出来的效果，被aa看到又要挨批评了。

        一直想自己架个相册的，不过照片太占空间又没找到合适的程序所以还是先用picasa了，照片倒是还没怎么传。

       慢慢完善，等offer拿到后……

评论：

• 2007/11/10/, Filia.Tao writes: 看看这个. 用Web Picasa API搭建站内相册 http://zhiqiang.org/blog/posts/local-mirror-of-picasaweb-using-api.html
• 2007/11/10/, syx86 writes: nice 果然是个好东西，摸索ing

您可能也喜欢：
CSSTidy	syx86.cn正式启用	Ratatouille	upgrade to WordPress 2.5 beta1 7098	Rush with the music
无觅

http://www.syx86.com/tools/csstidy/

http://tools.syx86.com/csstidy/

实用的小工具，架一个玩玩，就说我不打算用吧………….

您可能也喜欢：
syx86.cn	syx86.cn正式启用	域名更换：syx86.com	Babylon 5: The Lost Tales - Voices in the Dark	今天配了新眼镜
无觅

选择器分四种，通用选择器、一般选择器、特殊选择器和属性选择器。
1.通用选择器
没啥特殊的，就是设个基准值，优先级也是最低的

或者选中某一标签的全部个体

2.一般选择器
分两种，一种是id选择器，一种是类选择器

3.特殊选择器 — 其实就是一些IE还不支持的CSS2选择器….
a.子选择器:影响容器内直接联系的子元素

上述代码中UlName下的li字体会加粗而li嵌套下的li则不受影响
在不完全支持CSS2的浏览器中可以如下方法实现:

相比之下子选择器是相当的节省代码量的。

b.相邻同胞选择器：就是选择容器内第一个相应标签

如上，只选中该UL中第一个li，显示为粗体，而后面的li不受影响。
不过目前只能有单独的一个类来实现了….

4.属性选择器
就是选中含有某属性的某一标签

在《精通CSS》中给的例子是:

在Google的PageRank评分中，带有rel=”noffllow”属性的链接将不会对目标站点的评分产生影响。
第二个里面的rel~=”friend”会寻找rel含有friend的链接，而不是完全匹配。

您可能也喜欢：

CSS Naked Day

看完《Css禅意花园》

HTML+CSS

选择幼稚

准备开始努力学习了

无觅

        说实话，技术方面自己真正熟练掌握的也只有CSS了，离精通虽然还有差距，不过已经恬不知耻的在简历上写下了”精通CSS”的字样…..

        开始总结一下自己从《CSS禅意花园》和《精通CSS》两本书里学到的一些东西。好书，总是值得再看一遍的。

评论：

• 2007/09/23/, AF writes: 觉得这几篇dairy就跟写了一半儿似的 = = 而且，你什么时候带某小朋友去见的李xun？
• 2007/09/23/, syx86 writes: 就是去北航那次，嗯
• 2007/09/25/, AF writes: 简直就是没说...
• 2007/09/25/, syx86 writes: http://blog.syx86.com/?p=217 就是这次。。

您可能也喜欢：
[版聚] 07.04.21版聚总结	今天配了新眼镜	疯狂爆11	职业评测	内蒙之行1 - 海拉尔, 敖包
无觅

备忘

适合做提示，比懒人上那个<span>+css的方法好

<acronym title=”提示内容”>关键词<acronym>
《段正淳的css笔记(2)》中还用css的鼠标提示上加了 acronym{cursor:help}倒是觉得有些多余了

效果如下：关键词

您可能也喜欢：
HTML+CSS	syx86.cn	Linux：有光明没前途?	www2.seu.edu.cn UI设计分析	CSS Naked Day
无觅

               感触很多，随便列几个

• 突然发现自己做web design的时候几乎没考虑过IE 5，不然….恐怖……
• 想完全避免css hack的使用在稍微复杂一点的网页上几乎是不可能的，不过还是要尽量避免，否则redesign的时候会很痛苦(就像SBBS的首页导读…)
• Design的调试顺序应该是Firefox -> IE7 -> IE6(其实Opera和Safari也应该看看效果的….)
• 子选择器是应该掌握的东西，虽然IE还不支持，我也从来没有用过….

        不得不说是一本好书，不论是作者还是译者，都很细心，很负责任。特别是译本中的注释，对相关基础不是很好的人肯定帮助很大，而且还指出了原作中的一些错误。

       最后，不得不感谢一下这本书。让我度过了3个网上远离电脑的生活，可惜住的宿舍里没点儿咖啡之类的，没那么惬意。

评论：

• 2007/10/04/, 呵呵 writes: 在哪买呢，我也想要
• 2008/04/26/, 亦木 writes: 此书适合初学者看么？
• 2008/04/26/, syx86 writes: 还算适合初学者吧，这本书更多的是教你做什么样的网站，而不是具体实现。配合《精通CSS》一起看的话，效果还是非常不错的

您可能也喜欢：
CSS Naked Day	New Homepage of SEU	HTML+CSS	86的css学习笔记(一) —— 选择器	www2.seu.edu.cn UI设计分析
无觅

        在公司不能多线程和p2p，只能等到回家再下。用迅雷速度还算可以，180k跑了3个小时，总算是挂完了。

        安装的时候，硬盘那个转啊，倒是cpu和内存都没怎么占。第一遍安装，安装结束提示有两个组件没安上，但是没说原因，也不说后果和处理方法。最直接的后果就是里面所有的套件都启动不起来……重启之后重新安装，还好只需要补装没成功的部分，再用keygen算了个号，成功激活。

        套装里面PS CS3之前已经用了很久了，但再次仔细看的时候还是很令人激动细节。左边工具条从经典的双条变成单条，右侧所有的面板都可以横向收缩(原来只能纵向)，大屏幕的用户对这个感觉可能不大明显，但14”笔记本用户应该大豆会感慨一下了。另外图像最大话的时候，图像的对话框会自动对齐至工具栏和面板的边缘，不像原来是与外框等大，图被面板遮住。DW原来用得也不是很多，但明显可以感觉到adobe似乎更多的支持php。在css方面，默认新生成的孔板css文档第一行是”@charset “utf-8″;”，提示方面也很完善。不过和vs2005一样有一个缺陷，就是html中的内嵌的style=”" 形式的css，在引号封闭前有提示，封闭之后就没有了，使得修改的时候不很方便。上周听另外一个Intern说vs2008里面很多提示方面的改善是个重点，不知道是否包括这个。

        组件里好有个Flash Video Encoder，专门转换别的视频文件到flv的工具，支持格式很多，在装过编码器后，甚至连mkv都可以支持(需要选择所有文件)。不过转换速度是个问题，特别是对于清晰度比较高的视频文件，斯巴达300勇士的sample(56s)转换到中等品质(400kbs)的flv花了将近5:30，但效果还不错，就是图像是上下颠倒的，应该是解码器调用出的问题吧。

       其它的套件还没来得及用，过段时间先试试Illustrator吧。

        Adobe, Microsoft, Apple在用户体验上做得实在太出色了。学习，再学习………………

评论：

• 2007/08/13/, MyBigSpider writes: 看到最后一句话喷了
• 2007/08/13/, syx86 writes: 喷着喷着就习惯了，加油吧

您可能也喜欢：
准备写写网申的用户体验问题	HTML+CSS	New Homepage of SEU	syx86.cn	My job in future
无觅

        http://blog.syx86.com/show/studiohomwork1/

        div+css不使用绝对定位的排版演示

        好久不从头做什么东西了，弄个演示页还犯了两次错误……（面壁ing）

        努力培养接班人…不过依旧不抱太大希望（以免过渡失望）

        还有手绘T-Shirt活动，如很多人所言，从大活看是移动的帐篷，从教学楼看是化工学院的棋子，就是不见BBS的标志。就当赔钱给“孩子们”长经验了，不过“孩子们”的注意力在不在这里就不知道了，呵呵。

        还是等到网友见面会的条件成熟再亲自出手吧，估计要等到明年这个时候，自己还在不在学校都不一定了……

您可能也喜欢：
虎踞龙蟠BBS站台历在京发放	关于启用虎踞龙蟠BBS站LOGO的公告	虎踞龙蟠上某人的签名档	CSS Naked Day	虎踞龙蟠
无觅