CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.
960px 网格系统 (960.gs), 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 当显示屏和分辨率变得更大, 我发现 960 网格系统已经不能完全满足我的需求. 20px 的槽让内容区域实际只有 940px, 对现代的 Web 设计来说太窄小了. 在设计 Themify 主题的时候, 我发现一种新的网格布局, 相当适合用来设计当今的 Web 布局.
今年年初, 我一直纠结于一个问题, 为什么我们的网站现在用 950px 布局, 而不是经典的 960px 布局?
记得大概一年前, 我到学校给师弟妹们讲网页布局的时候, 还以 Alibaba.com 为例引出 960 经典布局. 960 的最大好处是什么? 它是 2, 3, 4, 5, 6, 8, 10, 12, ... 很多常用的分栏和 gallery 分列数量的公倍数. 如果采用通栏布局, 那么我们可以轻松地算出每列的宽度.
前几天在做一个项目, 通栏无边框布局, 分 4 列, 如果我们的宽度是 960, 那我可以将列宽定义为 25%. 但就现在的 950, 我需要加一个外边距, 并将其一并算入, 如果列宽是 x, 外边距是 y, 那么 4x + 3y = 950.
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
上周我 (作者) 发了一个关于 CSS3 下拉菜单的文章, 有些同学抱怨我没有对 CSS 代码进行详细的说明. 那好, 本文将普及一些新属性的基本知识: text-shadow, box-shadow, and border-radius. 这些 CSS3 属性经常被用来增强页面布局, 并且很容易理解.
前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明)
不久之前, 我介绍了一个使用 WordPress 原生缩略图的小技巧, 关于如何使用 WordPress 上传图片生成的缩略图作为文章列表中的预览图, 并且留下了两个问题给同学们思考, 第一个问题是:
如果图片高度或者宽度不足 150px, 这样做必然将图片拉伸, 很不美观. 用什么办法可以让图片都显示为 150x150, 并居中显示? 可以用 CSS 实现...
跟帖中有同学给出了一些解决办法, 都说得很好, 但是我还是想说说自己常用的处理办法. 我这也不是什么高明的办法, 5 年前就有人在用, 但它方便快捷.
最近在编写 CSS 的过程中, 发现 W3C 组织对 background-position 的验证有所调整, 虽然只是个小变动, 但可能影响很多人的编码习惯, 所以我决定提出来讲讲.
我们先来看看 W3C 对 background-position 的定义, 值的编写规则如下:
你是否已经对现在的柱形和框框布局感到厌烦? 是时候学一下如何冲出盒子的束缚, 做一些有创造性的东西出来了. 以前, 我收集了一些几乎完美的设计都是盒式的. 这次我将会提供一些带演示文件速成的 CSS 技巧, 让大家知道如何突破框框设计, 发挥创意, 使用图片和 CSS 位置属性.
这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.
演示页面: Demo: CSS Menu Design
原文链接: CSS: Menu List Design
又是 4 月 9 日, 一年一度的 CSS 裸奔节, 今年已经是第四届了.
我去年已经参加过了, 好玩! 也通过这个活动找到了网页上不少的问题. 如 textarea 的 rows 和 cols 忘记设置了, span 和 div 标签混用等问题. 而今年... 我不参加了. 不是不想参加, 只是我现在的网页做了一些 SEO 处理, 把网站的 "衣服" 扒掉绝对会很难看, 就免得恶心大家了. 再说, 最近 Great Firewall 升级, 网页访问速度不佳, 就不想折腾了.
Anyway, 裸奔节很好玩, 没玩过的朋友绝对要玩一次, 说不定会有意外收获哦.
CSS 裸奔节是全世界 Webmasters 的狂欢派对, 旨在提升网页标准, 重视语义标记, 保持良好结构, 让网页保持整洁和简洁. 参与方法很简单, 你只需要在这一天去除页面上所有的 CSS 样式和广告, 到 CSS Naked Day '09 页面提交你的网址, 就可以了. 如果审核通过, 组织会为你生成一个永久链接指向你的网站.
活动主页: CSS Naked Day '09
由于 Firefox 的崛起和 IE 兄弟们的各自为政, CSS Hack 再次得到网页制作人员的重视. 兼容浏览器对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.
目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. 
玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的.
CSS 很直观, 但显然不够灵活, 导致页面设计中出现大量冗余代码. 不能使用变量和循环, 若想清除某个类型所有属性的值还需要一句一句的清除, 而不是一句完成. 而最令人痛心的莫过于现实圆角边框, 或许以下的代码是我们梦寐以求的:
.roundbox { round:3px; } /* 圆角大小为三像素 */
奈何事与愿违, W3C 里面没有这样的东西. 某些浏览器支持一些特殊的属性可以实现类似功能, 但那并不能得到其他浏览器的支持. WordPress 后台就使用了这样的属性, Firefox 等一些浏览器上显示非常好看, 但 IE 上却惨不忍睹.
在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?
经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.
今天在弄一个 JavaScript 动画效果, 需要处理 CSS 中的 background-position. 想试一下我陌生的百分比处理方式, 发现了一个不错的文章, CSS: Using Percentages in Background-Image . 稍整理了一下...
很多 Blogger 都会遇到这么一个问题: 当侧边栏某个列表中的项目过多时, 它看起来细长而不饱满, 浪费空间又不美观.
为解决这问题各施其法, 有的选择了一个三栏的主题, 感观上会和谐一点; 有的随机显示几个链接, 让它看起来不那么狭长; 有的是一不做二不休地, 首页不将它显示出来 (如: Blogroll 放 Links 页); 但还有一些人, 他们将列表的内容划分为两半, 空间得到充分利用, 界面也好看.
小弟也是看到别人的这个巧妙设计, 才得到启发的. 点子很好, 但我不能看别人代码呀, 只好自己想法子了...
半年前我写过一篇日志, 让侧边栏列表一分为二. 那是用 JavaScript 实现的, 是一个相当愚蠢的办法, 而且不能支持 Widget. 但其实可以用 PHP 生成我们想要的效果. 看! 看! 就是右图的效果...
计划:
整个教程将以 Blogroll 为例, 会分成几个部分开展.
第一部分, 也就是这次, 我将会分析一下页面结构, 为以后的部分做准备. 这是一个重要的环节, 因为要解决 IE 和其他浏览器间的不兼容现象. (过程中我们会见到 IE 的不可理喻)
第二部分, 我会尝试改写 WordPress 的源代码或者尝试自己写一个以达到我们的目标.
第三部分, 我将会介绍一下, 如何将第二部分的内容做成支持 Widget 的版本.
第四部分, ... (先计划这么多吧, 完成了前面的再说.)
这次介绍的第一部分需要一些 HTML 基础和 CSS 知识, 你准备好了吗?