收藏夹

论坛关闭了,一些好文没地方转,就放在这里。
…阅读全文…

CSS3+背景图片:评星

很久没写技术帖了。写起来太费神,深了不是浅了不是的。

前几天写了一个给课程评定星级的效果,主要使用了CSS3新增伪类[:checked]和CSS2的相邻选择器。

会用此两种选择器的,请直接看实例,很容易。

…阅读全文…

《HTML5高级程序设计》读后感

前几日在新浪的图灵微群里申请了《HTML5高级程序设计》的样书,这几天一直在看,不过由于手里还有几个工作在做,而这几个项目都让我头疼不已,所以读书的进度很慢,于是就跳着章节看了在实际应用中与我的工作比较密切的几部分内容。

图灵的书内容质量是大家公认的,而这本《HTML5》也是不可错过的一本。

…阅读全文…

美工是怎麼被程序員搞死的

前些日子幫朋友設計了一個網站,主要是頁面設計和靜態頁面製作,程序由他們公司的程序員來完成。

結果,這個網站,最後做到我要崩潰。

首先,設計不是從首頁開始的,而是從一個欄目頁開始。

而後的新聞頁、首頁、產品頁,都可以說是不同的外觀。

最讓我鬱悶的,就是做好的html頁面,在瀏覽器內都調試好了交給程序,最後,你卻不知道會看到什麼樣的結果。

…阅读全文…

CSS核心:包含块(Containing Block)

提示:本文基于2008年w3c手册,内容与当前可能存在出入,请自行甄别。

包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

在阅读本文前,请先理解一下:

…阅读全文…

CSS核心:再说框模型(Box Model)

框模型(Box model,也译作“盒模型”)是CSS非常重要的概念,也是比较抽象的概念。

文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样子。

因此,要掌握使用CSS布局的技巧,就需要深入了解框模型和视觉格式化模型的原理。
…阅读全文…

CSS核心:框模型与视觉格式化模型[2010年7月16日更新:包含块]

视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子。

…阅读全文…

media属性和媒体类型

一、media属性

当设定样式的时候,可以指定此样式应用于何种媒体,例如:

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />

media属性为可选属性,用于指定应用此样式表的介质或媒体。允许的值有:
…阅读全文…

浮动元素的两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果,如图1所示。

图1 两端对齐的版式

图1 两端对齐的版式

单纯使用float:left或者float:right,而不添加额外的class区分元素的位置,似乎是无法实现靠左/右的效果。
…阅读全文…

firefox网页制作常用工具集

firefox 的附加组件功能很强大。以下是我安装的网页制作常用到的工具,有了工具集,以后再重装系统或者ff,就简单多了。

https://addons.mozilla.org/zh-CN/firefox/collection/tools4webdeveloper/