猫沙盆

这两天在做原来做的一个网站的重构，结果，看似很简单的页面，却让我头疼不已，虽然用css+div布局完成了，但是总觉得不是很理想，因为其间有一些非结构的div存在，试验半天，却没有好的方法解决。首页图如下：这里比较难实现的是中间部分的背景图，中间是带条纹的图片，而上下各有1条白色的虚线，放大如下：对于如何实现这个背景我想了两种方法，但是都不很理想，看来还要再试验。

7.3.4 浏览器的差别与错误 浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分，如图7-29所示。 图7-29 不同浏览器对行高的显示 不过，相差的1至2个像素在实际显示中一般不会有太大的影响，因此可以忽略不计。 比较严重的错误是IE 6.0对于含

“选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。“选项卡”一般和JavaScirpt及Ajax结合使用，以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合，完成切换的效果。  ——>> 实例文件  例如有设

本例对于完全支持:hover伪类的浏览器来说，只需要CSS即可，但是同以前做的一些效果一样，还是需要JS来应付史前怪兽IE 6。关于这个js文件，请参阅：《JS解决IE 6不支持:hover伪类的简单方法》  首先看效果图：图1 图片展示初始状态效果图图2 图片展示:hover效果图—-示例文件—- HTML如下：  <

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。  1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素替换元素

原文：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/猫鱼：本猫的英文水平有限，只能翻译个大概，如果有错误，请指正，万分感谢。don’t use @import                        April 9

提示：本文的目的是帮助要面试的同学们了解一下考题出题人的心理，以及避免一些错误。在其他的文章中我就说过，页面的结构化没有唯一的答案，但是大的规则是一定的，所以就如同作文一样，没有标准答案，只有大致的范围。但是，类似页面没有dtd、标签嵌套错误、选择器以“表现”命名都是不合适，或者说不合格的，这个不是什么代码风格问题，而是基础知识。 帮朋友公司出了份前端制作职位考试题，其实题目不

原文：IE7-/Win: A box with position:absolute next to a float may disappear很久以前就看过这篇文章，当时写实例的时候正好遇到了这个问题。前几日再次看到这篇文章，就系统地翻译了一下。另外增加了部分截图，方便阅读。非技术性文字部分，就大概齐了，别在意那里。  IE7-/Win: 在浮动元素后的定义了“posi

 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-08-09昨天有人在群里问图1的边框效果是否能实现。 边框效果图 有人给出答案，需要嵌套一个元素实现。我当时粗粗写了个测试页面，但是时间太晚了，也没有细弄，今天把想法写出来。CSS的边框border属性经常会用到，但是，其参数值到底有几个？未必大家都知道。 以下是《CSS属性、浏览器兼容与网页布局》中关于边框样式的部分内容：8.8.3 边框样式

此题原形出自youkuaiyun.com论坛 想做到让最外边的 div.wrap 内部不论有多少div（宽/高为100px，1px的边框）都不换行，并且撑开div.wrap，请问有什么办法？就是说实现下面的效果：■■■■■■■■■■■■■■■■........... 这样就不行了：■■■■■■■■■■■■■■■■要

 2009年10月16日作业第一题：日期跟随新闻标题在此讨论第一题：图1：题目1需求此题主要的难点在于：标题文字部分不能直接设定width，因为当文字少的时候，需要日期跟随其后；标题文字过多时，需要截断多余文字，但是同时不能出现半个中文字的情况。 首先看结构：标题文字部分不能直接设定width2009-10-01因为当文字少的

当我们使用float来使元素并排显示的时候，可以使用margin来控制元素之间的距离，而在很多版式里（例如产品图片的列表），需要浮动的元素达到两端对齐的效果，如图1所示。图1 两端对齐的版式单纯使用float:left或者float:right，而不添加额外的class区分元素的位置，似乎是无法实现靠左/右的效果。首先列出结构：  靠左边

视觉类型的媒体 根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。我曾在《别具光芒：CSS属性、浏览器兼容与网页布局》一书中，讲解过这些概念，但是很多读者反映内容比较晦涩难懂，所以，我再次重新尝试，把这部分内容重新来编排一下，看看是否能把这些重要的内容讲得更易懂一些。

框模型（Box model，也译作“盒模型”）是CSS非常重要的概念，也是比较抽象的概念。文档树中的元素都产生矩形的框（Box），这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型（Visual formatting model）来将这些框布局成访问者看到的样子。

7.3.3 行高的计算与继承 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下： 字高20px，行高2em。 字高30px，行高2em。2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。   图7-23 行高的计算 行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如

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中，根元素就是元素。

使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。CSS中关于定位（position）是这样定义的：定位（position）允许用户精确定义元素框出现

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。图1 盒模型图解　　填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。　　CSS

——写给刚刚接触web标准的新人们　　div还是table？这是个问题…… 　　自从web标准和网站重构的热潮席卷而来，到处都可以看到如下的问题： 　　问题1：怎么做1px高的div？ 　　问题2：这个x行y列的table用div怎么实现？ 　　问题3：css能不能实现拖动这个行？ 　　问题4：为什么网页在浏览器里是正常的，可是在dw里却乱了？ 　　问题5：为什么布局在ie里面是正确的

水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align : left | right | center | justify 说明：设定元素内文本的水平对齐方式。 参数：left : 左对齐；right : 右对齐；center :  居中；justify :  两端对齐 初始值：跟浏览器的设置有关

2007.09.18 18:45:25　　上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。　　firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。　　对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。　　最

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/

提示：本文不是教程，而是对闭合浮动元素的方法在某个特定情况下的现象的讨论，涉及float、clear、overflow、:after等知识，新手勿入。 float属性在页面排版上非常有用，但是也带来很多问题。最常见的就是浮动元素的闭合问题。 如果一个没有设定高度的不浮动元素的子元素浮动，则该元素的高度不会包括浮动子元素的高度，而只会包含其内部不浮动元素的高度，因为浮动元素不属于常规流向，它脱

前言： 书终于完稿了，我也有了一些自己的时间，于是决定将书中讲到的一些比较常见的知识点整理出来，发在Blog里面。当然也不会完全发表出来，毕竟还是要卖书挣钱买猫粮的。 CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而文档结构不仅仅在CSS的应用上非常重要，对于行为层（例如使用JavaScript控制元素的行为）同样也非常重要。 4.1 文档结构

4.5 继承 在本书的[3.3.2继承与层叠]一节曾经简要介绍过继承：(X)HTML元素可以从其父元素那里继承部分CSS属性，即使当前元素并没有定义该属性。 4.5.1 值的继承 继承也是基于文档树的，文档树中元素的某些属性可以被其子元素继承，每一个CSS属性都定义了它能否被继承。例如有下列代码，其在浏览器内显示如图4-29所示。 p { color: green; } 文档树中一元素的

在本书的[2.3.1 (X)HTML与浏览器内置样式]一节曾经介绍过，样式表可能有三个不同的来源：制作者、用户和浏览器。这三个来源的样式表可能在范围上有重叠，它们根据层叠规则互相作用。 4.6.1 层叠的顺序 CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则，那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行： 1. 查找有冲突的元素 浏览器会找到那些存在疑问的

行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高（line-height）可以减低阅读的困难与枯燥，并且使页面显得美观。行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。 7.3.1 语法 line-heig

前言：Google的Chrome对于学习最新的CSS选择器的人来说是一个好消息，因为它支持CSS3的新选择器，所以本猫也把书里面没有展开介绍的部分，重新充实了一下。当然，书已经下印厂无法修改了，但是来这里看的人们可以先睹为快了。目前支持这3种匹配方式的属性选择器的浏览器有：IE 7.0、Firefox 2.0、Opera 9.2、Safari等。现在还有Google的Chrome。--

今天q群里有个网友需要一个竖线，分割左右两边，但是两边的高度又不定，可能左边高也可能右边高，如果给左边或者右边定义边线都有可能会无法贯通整个高度。这是一个常见的左右布局需要高度自适应的例子，但是由于它只需要中间的分割线，所以可以采用一个比较特殊的处理方法：1 给左边的div设定右边线；给右边的div设定左边线；这样无路哪个高都将有边线显示。2 设定负边距，让这两条边线重

一、media属性<br />当设定样式的时候，可以指定此样式应用于何种媒体，例如：<link rel="stylesheet" href="basic.css" type="text/css" media="screen" /><br /><br />media属性为可选属性，用于指定应用此样式表的介质或媒体。允许的值有：screen (缺省值)，用于文档在屏幕媒体的呈现，如电脑显示器，所有 web 浏览器都运行于这样的系统屏幕媒体用户代理；print，应用于不透明的页面材料，以及文档在打印预览的状态