一起CSS

网页版"Firebug"

日期：2009-03-9 分类：前端技术

Firebug 可以说是 FF 最强大的插件之一，它不但可以查看 xhtml 代码、CSS 代码、JS 代码、DOM 结构，还可以临时修改这些代码，是开发不可缺少的利器。这也许您早已知道，但网页版的 "Firebug" 你听说吗？其实也不是 Firebug 了，而是类似于 Firebug ，功能也没有真正的 Firebug 那么强大，仅可以用来查看网页 DOM 结构和一些 CSS 样式。虽然功能不多，但在某些情况下、某些时候已经够了，特别值得一提的是：它可以在多种浏览器：IE 、FF 、Chrome 中正常运行，除了 Opera ，所以在某些时候还是用的上滴。看看效果吧：

阅读全文 >

查看：985 评论：9 标签：Firebug

IE6支持PNG透明(alpha通道)的4种方法

日期：2009-02-19 分类：前端技术

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

IE6支持png8透明:

IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小。 测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/

1、AlphaImageLoader 筛选器

使用简介：在每个标签样式中插入： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 官方原文：http://support.microsoft.com/kb/294714/zh-cn go 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。 官方原文：http://codingforums.com/archive/index.php?t-80555.html go 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

阅读全文 >

查看：916 评论：7 标签：IE6,png,不透明

百度有啊CSS圆角方案

日期：2009-02-18 分类：CSS

百度有啊的 CSS 圆角写法，原理和《一张图片实现圆角》差不多，也是用背景定位实现的。看代码吧： XHTML 代码：

<div class="box1">
    <span class="tl"></span><span class="tr"></span>
    <div class="cc">
        <p>圆角一</p>
    </div>
    <span class="bl"></span><span class="br"></span>
</div>

CSS 代码：

.box1 {
	background:url(images/bg1.gif) repeat-x #1d6cb7;
	margin-top:1em;
	position:relative;
	zoom:1;
	width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
	width:5px;
	height:5px;
	position:absolute;
	background:url(images/bg3.gif) no-repeat;
	overflow:hidden;
}
.box1 .cc {
	height:40px;
	padding:5px;
}
.box1 .tl {
	left:0;
	top:0;
}
.box1 .tr {
	right:0;
	top:0;
	background-position:0 -5px;
}
.box1 .bl {
	left:0;
	bottom:0;
	background-position:0 -10px;
}
.box1 .br {
	right:0;
	bottom:0;
	background-position:0 -15px;
}

查看效果（上面的代码是第一个圆角的）

看看上面代码所用到的图片能更好的理解（下面）： 第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。

查看：1,105 评论：4 标签：CSS圆角,圆角

真正的CSS等高布局

日期：2009-02-11 分类：CSS

为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：

<div id="wrap">
	<div id="left">
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
	</div>
	<div id="center">
		<p>center</p>
		……（20个或更多个）
		<p>center</p>
	</div>
	<div id="right">
		<p>right</p>
		<p>right</p>
		<p>right</p>
	</div>
</div>

CSS 代码：

* {
	margin:0;
	padding:0;
}
#wrap {
	overflow:hidden;
	width:1000px;
	margin:0 auto;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}
#left {
	float:left;
	width:250px;
	background:#00FFFF;
}
#center {
	float:left;
	width:500px;
	background:#FF0000;
}
#right {
	float:right;
	width:250px;
	background:#00FF00;
}

查看效果 从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是：

#wrap {
	overflow:hidden;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}

其中的 10000px 可以修改为其他值，但不能小于最高列的高度。 经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。 ======= 华丽的分割线（2009/02/18） ================================== 前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示（查看效果）。因为他们下面还有很长一部分，都被隐藏了，看图理解：

半透明部分都被隐藏了，所以看不到下边框。

查看：1,014 评论：6 标签：等高布局

作品之每天物流平台

日期：2009-02-10 分类：未分类

每天物流平台是一个网上物流平台，在这个平台里车主和货主可以自由发布所需的信息，可以在地图上看到自己的车或者货当前所在的位置，还可以用手记发送指令进行相关的操作。该平台预计 5 月 15 号发布第一版测试版，域名目前未知。

因为该公司没有提供logo，所以用了一个临时的，该平台所属广州华正道物流有限公司，德立物流有限公司好像其公司在香港开的分公司，具体什么关系不清楚，反正就是这么一个平台了。

查看大图 查看网页

查看：483 评论：没有评论 标签：作品