日志标签：css

css自定义导航、按钮样式

时间：2009年04月01日作者：愚人码头查看次数:15,046 views评论次数：7

在网上看到一个用css自定义“按钮”样式，说是按钮其实是链接，用链接模拟的按钮，这样我们的按钮就可以很丰富了。我们可以用这个来做网站导航，连接，按钮等等。
不过方式有一个很不好的地方就是<a>标签里套了一个空的<span>,从html语义化的角度来说，这个是不应该的。
先看看效果吧：

2009-03-31_231723

一.要使用的图片,如图：如果你想修改颜色，可以下载PSD：sliding-door-psd

bg

二.实现原理，如图： 继续阅读：css自定义导航、按钮样式»

标签：,分类：html+css

CSS参考手册

时间：2009年03月29日作者：愚人码头查看次数:5,427 views评论次数：5

在线CSS2.1参考手册（苏小雨版）：http://www.css88.com/book/css20/

CSS2.1参考手册（苏小雨版）chm版下载：http://www.css88.com/book/css20/css20.rar

在线CSS2.1参考手册（css88.com版）：http://www.css88.com/book/css/

CSS2.1参考手册（css88.com版）chm版下载：http://www.css88.com/book/css/css2.rar

在线CSS2.1参考手册（W3C汉化版）：http://www.css88.com/book/css2/cover.html

标签：分类：html+css

彻底了解css中的长度单位

时间：2009年03月28日作者：愚人码头查看次数:8,857 views评论次数：18

我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；

  1. px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
    譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
  2. em：相对长度单位。相对于当前对象内文本的字体尺寸。
    如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  3. pt：点（Point），绝对长度单位。
  4. ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
    如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  5. pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。
  6. in：英寸（Inch），绝对长度单位。
  7. mm：毫米（Millimeter），绝对长度单位。
  8. cm：厘米（Centimeter），绝对长度单位。

其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ；

容器的大小我们经常用px做单位，大家都没什么异议，

字体大小（font-size）很多国内的人（包括我）使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。如图。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。

继续阅读：彻底了解css中的长度单位»

标签：分类：html+css

【推荐】CSS Sprites 样式生成工具

时间：2009年03月26日作者：愚人码头查看次数:9,864 views评论次数：1

CSS Sprites 68375F0F751F62105DE55177 v1.4.1

CSS Sprites 样式生成工具是有腾讯的鬼哥使用RIA开发一个针对CSS Sprites 的样式生成工具，小巧，实用，可惜部分功能使用起来还不是很灵活，希望鬼哥继续升级。

 

CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐，还要书写出css；实用这个工具就能在很大程度改善这个问题；

  继续阅读：【推荐】CSS Sprites 样式生成工具»

标签：,,分类：前端工具

谈谈CSS Sprites(css精灵)

时间：2009年03月26日作者：愚人码头查看次数:9,858 views评论次数：4

CSS Sprites在国内很多人叫css精灵，其实这个技术不新鲜，这个技术老到什么程度呢，我不敢确定，但是我看到最早的关于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》，时间是March 05, 2004 ，整整5年了，那时我还没参加工作呢？

 

这个技巧已经广泛的应用到现在的页面的前端开发中，甚至YUI将他定为《提高网页效率的14条准则》的第一条准则“Make Fewer HTTP Requests” ，可见这个技术的重要性，也正是YUI的推荐
使这个CSS技巧得到了广泛的推广和应用。

 

先来看个最简单的DEMO：
这是背景图片


这是一个简单的CSS Sprites的demo:

 

XML/HTML代码
  1. <div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left top no-repeat”>这里显示红叉</div>  
  2. <div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left -32px no-repeat”>这里显示绿勾</div>  
  3. <div style=“float:left; width:120px; padding-left:20px; background-image:url(ico.png); background-position:left top; background-repeat:no-repeat”>这里显示红叉</div>  
  4. <div style=“float:left; width:120px; padding-left:20px;  background-image:url(ico.png); background-position:0 -32px; background-repeat:no-repeat”>这里显示绿勾</div>  

看看页面中的显示！

  继续阅读：谈谈CSS Sprites(css精灵)»

标签：,分类：html+css

页面中css调试和问题解决的一些经验总结

时间：2009年03月26日作者：愚人码头查看次数:5,451 views评论次数：12

在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题，css继承，css叠加等等，我们经常因为这些而需要调试页面中css。
以下只是我个人的一些经验总结，如果有不合适请留言斧正，欢迎补充。

 

一、为什么页面会出现种种的bug

 1.浏览器的本身对CSS支持BUG：
 IE6有一堆BUG，具体可以参考一下《IE6 BUG大全》http://www.css88.com/archives/579；
 FF需要注意清除浮动；
 还有浏览器对css2各个属性的支持问题，大家需要了解浏览器对css2各个属性的支持情况；
 

2.直接书写错误，由于自己在写css时候的粗心造成的BUG

比如将 .ask-lable{width: 934px;height:94px; padding-top:43px; margin:0 auto;}
中的“{}”写成了中文状态的“{}”,或者溜掉了结束的“}”；margin:0 auto;中的冒号和封号，也会经常被写成中文的，还有0（零）经常会被写成o（英文字母o）；width: 934px;中的px经常会被忘掉，还有以下缩写的格式等等；
 3.在页面编码不统一的情况下，经常会碰到，样式写着写着，在ie6下页面就乱掉了，这是IE6的bug；
 4.没搞清楚html的块状元素和内联元素，css的某些属性对内联元素不起作用，

可以参阅：html中的块元素(block element)和内联元素(inline element) http://www.css88.com/archives/646

比如：<span style=”text-align:right;margin:30px; padding:30px; border:#F00 2px solid”>span是内联元素</span>；

比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。
 5.css继承，css叠加也可能造成一些bug，这里要特别注意一下重置样式（css reset）中和公用样式（public）的继承。

  继续阅读：页面中css调试和问题解决的一些经验总结»

标签：分类：html+css

【转载】CSS修饰图片

时间：2009年03月26日作者：愚人码头查看次数:4,170 views评论次数：1

有人翻译了《css decorative gallery》这篇文章，这写也是我们前端开发的时候经常用到的一些技巧。感谢翻译者，感谢webdesignerwall

这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……不废话来，先来看演示：

View Demo (在线演示） and Download（下载）

 

 

作者给出了这样做的几点理由：

  • 省时方便：不用再用 PhotoShop 去对每张图片进行处理
  • 完好地保留了原始图片：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。
  • 非常的灵活：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
  • 应用广泛：可以在任何地方，对任意尺寸的图片进行装饰。
  • 兼容性强：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。

 

 

基本思路：

  继续阅读：【转载】CSS修饰图片»

标签：,分类：html+css

【IE6 BUG大全】position:fixed在IE6下的实现

时间：2009年03月26日作者：愚人码头查看次数:6,377 views评论次数：2

 

Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

 

值 描述
static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

 


position:static　无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
如：#nav{position:static;}
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

其他两种前面提过，我们 主要说的是fixed

position:fixed　相对于窗口的固定定位


请特别注意，IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾，所以我们只能通过JS模拟和CSS Hack等方法来实现。

1.IE条件注释解决方案：

demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html

继续阅读：【IE6 BUG大全】position:fixed在IE6下的实现»

标签：,,分类：html+css, JS
Page 2 of 212