Archive for the 'CssStaff' Category

【译】常见CSS和HTML的代码问题(二)

接以前翻译一半的那篇,不过这次仍旧是一部分。下次应该会再接再厉把它翻完吧。发现事隔一年之久自己的理解强于以前了,所以顺便将原来那部分翻译的有不当的地方给更新了一下。

原文地址:Common Code Problem with CSS and HTML

MIME类型

Continue reading ‘【译】常见CSS和HTML的代码问题(二)’

导航栏的错位视觉

由于某个错误,突然就改变了我一贯对于导航栏应当工整的观念.无心插柳的我将错就错,所以最终出来的就是某种视觉错位的导航栏,或者说当鼠标滑过的时候,它们就仿佛在凹凸的城墙之间与你捉迷藏.其实是挺简单的一个小布局。

从此扩展出去,如果我们将这个方法用在站点友情链接的布局方式上面,那么我们可以做出一种有别于一般的一个简单链接列表的链接汇集方式出来:将链接数量除以4,得到的那个数字(暂时不考虑余数)就是你每一行链接的数量,然后我们将所有这些横向‘导航条’y向延伸,放在一个div中,那么就可以最终形成一个矩形区域的链接地图,而我们所有要做的改动仅仅是在html中编辑链接而已,css保持原样就ok.(详细请查看该页面源码)

当然如果你还有什么更好玩的导航样式,大可以加以更多的新奇改造.当把我们司空见惯的属性赋予一种新的图形定义,那么你也许就可以得到让你惊喜风格的导航栏.一直有关注每个好站点的导航设计,很多时候这些看似页面上很小面积的一部分,就完全能体现页面设计上的闪光点出来.已经陆续有搜集不同的站点导航栏,会挑其中比较好的几种进行仿照搭建后将实现过程写点什么

字体字号比较

对于文档和页面的字体和字号要求是自己的一个怪癖,可能的情况下总会把这些统统调整到自己喜欢的样式才会去阅读。也喜欢搜集各种各样的字体,但在这里只是总结了比较喜欢的五种正文字体,不过其中century gothic和georgia用在大字标题更好。其实还比较喜欢courier new,用作代码来说,字母之间区分度比较清晰。至于中文,喜欢宋体的11和10号字(这两个字号下你能完全看出汉字的笔锋),pmingliu的9号字,标题喜用华文细黑。
ps:这里说的字体是一般比较常见的字体中挑选出来的。如果要把各种各样有趣好看字体都算在内的话,那就没法比较了。

fontcompare 注:上图是在word里面做的,所以字号只是代表word当中的字号。

navigation(一)

2005nav

本来有做一个theme,但是好像没有什么心思继续下去,做完最感兴趣的导航部分便没有了继续的动力。
于是不如拿来用作我长久以来希望写的导航设计系列的打头篇吧。
点击这里查看效果+说明。

下载样例图片

详细说明写了一部分,但还不是很完全。因为把所有的过程说清楚我似乎有点口齿不清。所以如果你有什么疑问,那么不妨留言给我。如果你有更好地实现方法(目前来说我觉得自己的招有些繁琐),请一定告诉我。

Firefox下的圆角属性-moz-border-radius

由于对圆角这种东西有特殊的偏好,所以一般都比较喜欢圆头圆脑的网站,并且会习惯的去看它们都是采用什么方法实现圆角的,但是迄今为止,基本上实现圆角都是采用边角图片,也就是非要先制作出圆角的图片(最少一个),然后结合css实现,你可以参看我的sidebar列表的css。
但是今天才知道一个很有用的css属性:-moz-border-radius帮助我们在没有图片的帮助下实现圆角样式。效果参见本页sidebar的turn your ears on 中的music albumn列表。
根据属性名称我们就可以知道这项只在mozilla下产生作用,在ie或者opera下打开这个页面,仍然显示为直角边框。通过这一属性,我们可以将边框设置为统一的弧度,也可以对于不同的边角设置不同值,例如-moz-border-radius-topright: 5px;
对于firefox的好处这样看来又是多了一项了。