- 博客(82)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 CSS核心：再说框模型（Box Model）
框模型（Box model，也译作“盒模型”）是CSS非常重要的概念，也是比较抽象的概念。文档树中的元素都产生矩形的框（Box），这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型（Visual formatting model）来将这些框布局成访问者看到的样子。
2010-07-16 19:35:00
4064
原创 CSS核心：框模型与视觉格式化模型[总览]
视觉类型的媒体 根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。我曾在《别具光芒：CSS属性、浏览器兼容与网页布局》一书中，讲解过这些概念，但是很多读者反映内容比较晦涩难懂，所以，我再次重新尝试，把这部分内容重新来编排一下，看看是否能把这些重要的内容讲得更易懂一些。
2010-07-16 19:33:00
3971
原创 media属性和媒体类型
一、media属性<br />当设定样式的时候，可以指定此样式应用于何种媒体，例如：<link rel="stylesheet" href="basic.css" type="text/css" media="screen" /><br /><br />media属性为可选属性，用于指定应用此样式表的介质或媒体。允许的值有：screen (缺省值)，用于文档在屏幕媒体的呈现，如电脑显示器，所有 web 浏览器都运行于这样的系统屏幕媒体用户代理；print，应用于不透明的页面材料，以及文档在打印预览的状态
2010-06-11 13:17:00
5389
原创 浮动元素的两端对齐
当我们使用float来使元素并排显示的时候，可以使用margin来控制元素之间的距离，而在很多版式里（例如产品图片的列表），需要浮动的元素达到两端对齐的效果，如图1所示。图1 两端对齐的版式单纯使用float:left或者float:right，而不添加额外的class区分元素的位置，似乎是无法实现靠左/右的效果。首先列出结构： 靠左边
2010-03-16 23:16:00
5287
2
原创 设计4大基本原则
《写给大家看的设计书》读书笔记《写给大家看的设计书》是一本普及性的设计入门书籍，它非常适合非设计专业的人员来阅读，书中没有晦涩难懂的术语，读起来很舒畅，所举的例子也很简单明了，能够非常贴切地说明了问题。有些东西，对于我这样自学的人来说，虽然也知道应用，可是总是一个经验使然，而对原理不甚了解。看过此书，算是对自己这许多年摸索的一个总结。这本书不是为网页设计而做，而是针对平
2009-12-29 12:50:00
3886
原创 使用单通道实现半透明效果
众所周知，IE 6只支持单通道的PNG图片（即只有透明/不透明2种状态，gif图片的透明单通道透明），因此如果需要使用alpha透明的png图片时，往往需要对IE6设定滤镜来完成。本文这里介绍一个单通道的PNG-8（gif也可）图片实现半透明效果的方法，不是万能的，在某些情况下适用。先看下效果图：a:hover有半透明的背景色，对于大部分浏览器，都可以使用alpha透明的
2009-11-27 16:07:00
4053
1
原创 [样@式作业 2009年10月16日]文字列表中日期跟随标题
2009年10月16日作业第一题：日期跟随新闻标题在此讨论第一题：图1：题目1需求此题主要的难点在于：标题文字部分不能直接设定width，因为当文字少的时候，需要日期跟随其后；标题文字过多时，需要截断多余文字，但是同时不能出现半个中文字的情况。 首先看结构：标题文字部分不能直接设定width2009-10-01因为当文字少的
2009-11-11 15:49:00
3530
原创 [样@式作业 2009年10月12日]如何实现内容块不换行
此题原形出自csdn.net论坛 想做到让最外边的 div.wrap 内部不论有多少div（宽/高为100px，1px的边框）都不换行，并且撑开div.wrap，请问有什么办法？就是说实现下面的效果：■■■■■■■■■■■■■■■■........... 这样就不行了：■■■■■■■■■■■■■■■■要
2009-11-05 12:09:00
3283
原创 CSS双线边框研究
2009-08-09昨天有人在群里问图1的边框效果是否能实现。 边框效果图 有人给出答案，需要嵌套一个元素实现。我当时粗粗写了个测试页面，但是时间太晚了，也没有细弄，今天把想法写出来。CSS的边框border属性经常会用到，但是，其参数值到底有几个？未必大家都知道。 以下是《CSS属性、浏览器兼容与网页布局》中关于边框样式的部分内容：8.8.3 边框样式
2009-10-10 16:44:00
10439
原创 你们都是爷！
2009年10月9日 星期五 15:55:30 多云过节几天，净跟家里几个毛毛怄气了。 首先是齐齐！刨刨垃圾袋也就算了，居然偷吃我放在橱柜上的馒头片儿。而且，刚使劲儿教育了一番，一转眼没看着，把剩下的馒头又偷吃了！气得我脑门冒烟，真想挖个坑把她埋在葡萄底下。也许，明年会结出一串串的小齐齐……Orz，那就是世界末日了。 coco这个家伙，脾气也渐长，最近老冲我“WoWoW
2009-10-09 16:19:00
3473
原创 CSS3新增选择器[2]：结构伪类(2)
CSS3新增选择器[2]：结构伪类(1)3. E:nth-last-child(n)匹配所有在其父元素中排倒数第 n 个且类型为 E 的元素。这个伪类与:nth-child(n)类似，只是以最后一个子元素为起点计算。提示：以下示例，请使用Google Chrome、Firefox 3.5+、Safari 3.1+或者Opera 9.63+查看。例如：(
2009-09-04 14:37:00
3631
原创 招聘，考试，结构化[1]
提示：本文的目的是帮助要面试的同学们了解一下考题出题人的心理，以及避免一些错误。在其他的文章中我就说过，页面的结构化没有唯一的答案，但是大的规则是一定的，所以就如同作文一样，没有标准答案，只有大致的范围。但是，类似页面没有dtd、标签嵌套错误、选择器以“表现”命名都是不合适，或者说不合格的，这个不是什么代码风格问题，而是基础知识。 帮朋友公司出了份前端制作职位考试题，其实题目不
2009-07-23 16:23:00
3331
2
翻译 IE7-/Win: 在浮动元素后的定义了“position:absolute”的元素框可能会消失
原文：IE7-/Win: A box with position:absolute next to a float may disappear很久以前就看过这篇文章，当时写实例的时候正好遇到了这个问题。前几日再次看到这篇文章，就系统地翻译了一下。另外增加了部分截图，方便阅读。非技术性文字部分，就大概齐了，别在意那里。 IE7-/Win: 在浮动元素后的定义了“posi
2009-06-11 12:20:00
3509
翻译 不要使用@import
原文：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/猫鱼：本猫的英文水平有限，只能翻译个大概，如果有错误，请指正，万分感谢。don’t use @import April 9
2009-04-17 16:47:00
4502
原创 元素类型
元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。 1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素替换元素
2009-04-13 11:57:00
3302
原创 标示当前位置的导航
利用CSS在导航条上标示当前所在频道的技术，已经有很长时间了，在很多CSS的书中都介绍过，不过还是总被问到，因此写一个简单的示例来讲解一下。其实原理非常简单： 1) 按照不同的频道（栏目），分别为body定义id。例如：首页：Blog频道：相册频道：频道内的所有页面都要统一定义id。 2) 导航条的相应栏目，也定义id或者class：
2009-03-19 13:24:00
3874
原创 [CSS]图片展示效果
本例对于完全支持:hover伪类的浏览器来说，只需要CSS即可，但是同以前做的一些效果一样，还是需要JS来应付史前怪兽IE 6。关于这个js文件，请参阅：《JS解决IE 6不支持:hover伪类的简单方法》 首先看效果图：图1 图片展示初始状态效果图图2 图片展示:hover效果图—-示例文件—- HTML如下： <
2009-03-18 11:57:00
5816
原创 [CSS+JS]同一页面可以重复使用的选项卡
“选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。“选项卡”一般和JavaScirpt及Ajax结合使用，以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合，完成切换的效果。 ——>> 实例文件 例如有设
2009-01-21 13:06:00
13438
25
原创 网站内容结构化探讨[2]--主导航的问题
结构化确实是个让人头疼的工作。为了追求一个好的结构（或者说比较好的），往往需要花费掉很多时间，这在追求效率的今天，也许是不被老板允许的。所以很多网站虽然看上去抛弃了表格布局，而其实质上，仍然是表格布局的div变种。 看过本文第1部分中笔者修改过的头部结构示例文件，大家会发现，里面不仅改动了所说的4点，同时，具体内容的结构也作了修改，下面就来说说具体的内容结构方面。2、主导航的问题
2008-10-31 13:08:00
4621
4
原创 网站内容结构化探讨[1]
无意间浏览到一个承接网页制作的公司的网站——唐宋中国。 首先网站的设计给我一个很好的印象，因此特意留意了一下它的源代码（做页面的职业病），结果发现了一些问题，而这些问题，可能正好是学习web标准的人常常会遇到的。懒惰了很久，正在想该写些什么，正好可以以这个网站为例，来探讨一下结构化的一些问题。特别声明：以此网站为例，纯属偶然，请不要有其他的想法，喵喵妙。 很多人抱怨CS
2008-10-17 15:45:00
1109
原创 访客
2008年10月10日 星期五 21:48:45 今天平淡的生活稍有不同。我家的小院子里来了位客人——住在附近的一只流浪猫。 年糕和白白都很好奇地蹲在玻璃门里向外看，外面的猫也好奇地往里看，却原来是那只白色有褐色花纹的猫。 人多了，院子里的流浪猫也渐渐多了起来，遛狗的时候经常会狭路相逢。有三只猫是在我家小院附近活动的，前几日我出门的时候，看到有好心的阿姨用箱子给他们在信报箱底
2008-10-10 22:03:00
551
原创 样书拿到了
2008年9月17日 星期四 14:35:49 昨天拿到了样书，有两个出乎意料。 第一个是，效果比我意料的好。 由于内容比较多（我写的时候也没有想到最后这么多），出版社排版花了大力气，每页都排得满满的，最后还是厚厚的有400多页。 之前编辑和我说，原料涨钱了，这次纸张不如上次好，而且大部分内容是黑白的，只有一部分内容是彩色的。但是看到样书，我觉得纸张并不算差，只是
2008-10-10 18:45:00
1056
2
原创 客户体验
2008年10月8日 星期三 12:23:34 前两天，编辑建议我去当当和卓越申请个用户，在网站上放上我的书的链接，这样还可以拿到一些反点儿，于是我兴冲冲地跑到几个网站上去看，却只在卓越（对了，人家现在叫亚马逊）上看到一个参加联盟的链接，填了申请表，一点提交，弹出一个错误提示，要我选择“省份”，原因是我只选择了“北京”市，而北京市前面还要再选择“北京”…… 重新填好了表
2008-10-10 18:44:00
616
原创 网页制作的超强问题集锦
这些都是我平时遇到的问题。一些问题一开始真的很抓狂，后来遇到多了，觉得可以收集下来，当作调剂品来看。同时，提醒新人们，不要闹这样的笑话。 只是笑话，请勿对号入座。————————————————问：怎么去掉列表前面的黑点呀？答：list-style:none;问：没有效果 :(答：你把代码发上来看看。问：·xxxxxx答：……………………老大，你那个黑点是文字！问：我看看……哦，这样啊。答：无语晕
2008-09-19 18:36:00
594
原创 4.7 CSS3新增选择器[2]：结构伪类（Structural pseudo-classes）(1)
4.7.3 结构伪类（Structural pseudo-classes）CSS 3增加了大量的结构伪类，利用文档结构树来实现表现，从而可以减少页面内class属性和ID属性的定义，使得文档更加简洁。以下示例，请使用Win XP的Google Chrome或者MAC OS X的Safari 3.1查看。1. E:root匹配文档的根元素。在(X)HTML中，根元素就是元素。
2008-09-08 13:38:00
852
原创 4.7 CSS 3新增选择器前瞻[1]
前言：Google的Chrome对于学习最新的CSS选择器的人来说是一个好消息，因为它支持CSS3的新选择器，所以本猫也把书里面没有展开介绍的部分，重新充实了一下。当然，书已经下印厂无法修改了，但是来这里看的人们可以先睹为快了。目前支持这3种匹配方式的属性选择器的浏览器有：IE 7.0、Firefox 2.0、Opera 9.2、Safari等。现在还有Google的Chrome。--
2008-09-04 16:51:00
832
1
原创 7.4 垂直对齐：vertical-align属性
上一小节讲解了行高与单行纯文字的垂直居中，而如果行内含有图片和文字，在浏览器内浏览时，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐，如图7-34所示。图7-34 文字和图片内容默认垂直对齐方式为基线对齐这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。7.4.1 语法vertical-align属
2008-07-28 13:49:00
6114
1
原创 7.3 行高：line-height属性[3]
7.3.4 浏览器的差别与错误 浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分，如图7-29所示。 图7-29 不同浏览器对行高的显示 不过，相差的1至2个像素在实际显示中一般不会有太大的影响，因此可以忽略不计。 比较严重的错误是IE 6.0对于含
2008-06-26 16:23:00
1251
原创 7.3 行高：line-height属性[2]
7.3.3 行高的计算与继承 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下： 字高20px，行高2em。 字高30px，行高2em。2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。 图7-23 行高的计算 行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如
2008-06-21 10:05:00
2232
4
原创 左右内容高度不定，使用border实现中间分割线
今天q群里有个网友需要一个竖线，分割左右两边，但是两边的高度又不定，可能左边高也可能右边高，如果给左边或者右边定义边线都有可能会无法贯通整个高度。这是一个常见的左右布局需要高度自适应的例子，但是由于它只需要中间的分割线，所以可以采用一个比较特殊的处理方法：1 给左边的div设定右边线；给右边的div设定左边线；这样无路哪个高都将有边线显示。2 设定负边距，让这两条边线重
2008-06-18 14:15:00
2080
原创 7.3 行高：line-height属性[1]
行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高（line-height）可以减低阅读的困难与枯燥，并且使页面显得美观。行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。 7.3.1 语法 line-heig
2008-06-17 09:17:00
1481
1
原创 4.6层叠
在本书的[2.3.1 (X)HTML与浏览器内置样式]一节曾经介绍过，样式表可能有三个不同的来源：制作者、用户和浏览器。这三个来源的样式表可能在范围上有重叠，它们根据层叠规则互相作用。 4.6.1 层叠的顺序 CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则，那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行： 1. 查找有冲突的元素 浏览器会找到那些存在疑问的
2008-05-29 19:04:00
488
原创 保姆
2008年5月22日 星期四 9:16:58 邻居在院子里捡了只小奶猫，可是她要去上海，于是我就成了猫保姆。 自从把白白的孩子送出去，好久没有见过小奶猫了。 小家伙整体是白色带的，头顶和尾巴是黑色，最有意思的是后背上一圈五个黑点，既像足球又像一个大爪子印，更像奥运的五环，于是邻居给他起名叫“小福”。 小福也就1个月的样子，可是已经极其淘气，吃饱了饭就开始他的大冒险，现在正在我的键
2008-05-22 19:14:00
523
原创 4.5 继承
4.5 继承 在本书的[3.3.2继承与层叠]一节曾经简要介绍过继承：(X)HTML元素可以从其父元素那里继承部分CSS属性，即使当前元素并没有定义该属性。 4.5.1 值的继承 继承也是基于文档树的，文档树中元素的某些属性可以被其子元素继承，每一个CSS属性都定义了它能否被继承。例如有下列代码，其在浏览器内显示如图4-29所示。 p { color: green; } 文档树中一元素的
2008-05-12 21:08:00
426
原创 (X)HTML的文档结构
前言： 书终于完稿了，我也有了一些自己的时间，于是决定将书中讲到的一些比较常见的知识点整理出来，发在Blog里面。当然也不会完全发表出来，毕竟还是要卖书挣钱买猫粮的。 CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而文档结构不仅仅在CSS的应用上非常重要，对于行为层（例如使用JavaScript控制元素的行为）同样也非常重要。 4.1 文档结构
2008-04-30 12:37:00
805
原创 overflow的另类用法
有人问这个问题： 左右布局，图片的宽度不固定。 正好前几天测试闭合浮动元素时发现了overflow的特殊现象，倒是正好可以用在这里。 测试通过：ie6/7 ff2.0 opera9.2 safari 3.0 不过这只是个原形，没有更严密地测试过。 我推测由于需要overflow:auto，因此浏览器会计算元素的实际宽度和高度，所以会有此现象。 DOCTYPE html PUBL
2008-04-16 15:48:00
5799
原创 发现与解决问题
今天很郁闷，本来以为马上就能完稿了，结果被编辑打击了一番，说书里面的图不够吸引人，实例不够多不够漂 亮，没有发挥彩书的特点等等，让我从本来已经望见彼岸的兴奋一下跌入黑暗的深渊。这篇文，是书里面的一个小节，正好整理到这里，想起每天在群里面对的很多 问题，于是觉得还是贴出来，帮助初学者能更好地入门。看来还要继续把舍弃的最后一章完成，苦难的日子啊，又要继续。虽然浏览器可能存在着很多Bug，但是并不是
2008-04-02 22:36:00
618
原创 [讨论]闭合浮动元素的方法与差别
提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。 float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱
2008-03-06 16:01:00
1000
原创 css固定定位，即悬浮效果
css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。position:fixed; 以视口为包含块，因此在浏览器窗口内固定。ie 6.0不支持，因此采用相对于html元素的绝对定位。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
2008-01-28 15:50:00
12956
7
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人