2009年7月29日
摘要：
转自： http://blog.onlygrape.com/css-advantage/404关于CSS网页布局，随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-menu/460给大家介绍一种简单的实现方法，没有用到复杂的JS代码，进行简单的变换就可以了。我们来看最终的效果，如下图所示：HTML代码：[代码]大家特别留意类似于以下代码的HTML, 这是变换的关键。[代码]下面看CSS代码：[代码] 阅读全文
摘要：
转自： http://blog.onlygrape.com/img/453实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。 [代码]根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：[代码] 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-skill/468一、CSS字体属性简写规则一般用CSS设定字体属性是这样做的： font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,san... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-float/434Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-ul-li-2/395ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-navigation/440 导航结构在网站设计中是起到决定性作用的，导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受，它是网页设计的关键元素。 虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键，但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人，... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-ul-li-3/392Example Source Code：[代码]我们详细的解释与说明CSS代码，看它是如何控制这个UL LI打造CSS横向菜单的：[代码]首页我们进行了整体布局声明，声明了文字大小及居中的对齐方式。需要说明的是，在ff中，我们设置margin:0 auto。即可实现容器的居中了，但在IE中，这还不够，还需要在... 阅读全文
摘要：
转自： http://blog.onlygrape.com/position/186定义position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。span>position版本：CSS2 兼容性：IE4+ NS4+ 继承性：无br>语法：position : static | absolute | fixed | relative参数：static：默认。它始终会... 阅读全文
摘要：
转自： http://blog.onlygrape.com/word-spacing-letter-spacing/278在对网页文本进行精细编辑时，需要应用到多方面的CSS属性设置，如垂直方向上的行距line-height，水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔，letter-spacing是指字母的间隔。下面我们来介绍下wo... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-3/298根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-prepared/397如何有效的编写代码？这是许多网页制作者与开发者都关心的问题。合理的 CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然，样式表大小的缩减还能减少下载的时间。一、排版：1、关键词和操作符之间加适当的空格。2、相对独立的程序块与块之间加空行3、较长的语句、表达式等要分成多行书写。4、划... 阅读全文
摘要：
转自: http://blog.onlygrape.com/overflow-hidden/312Overflow: hidden 的使用引用:overflow 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无语法：overflow : visible | auto | hidden | scroll参数：visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为... 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-arc/362一直做圆角的边框都是用图片来铺成的，这次尝试了下用CSS来制作圆角的边框，效果还是蛮不错的。代码如下：[代码] 效果如图： 阅读全文
摘要：
转自： http://blog.onlygrape.com/css-bug/323CSSbug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在葡提子之前的技术文档中，也介绍了这方面的内容。轻松的解决CSSbug是我们必须掌握的技能。现在整理出最常用的几种CSSBUG解决方法以及CS... 阅读全文