现在位置 >首页 > 所有关于css的文章
通过CSS HACK
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...
阅读全文
png8和gif都是8位的透明度
IE6与生俱来就支持png8的索引色透明度
但不支持png或8位以上的 alpha 透明度
而对于非动画的GIF建议你使用PNG8
因为PNG文件会更小
如果想将png24转换成png8格式,
方法也很简单
使用photoshop转换就可以了
注意:只能针对单色彩的图片起效,其他效果不好
阅读全文
relative(相对)以及absolute(绝对)。
往往会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。
然而有时候我们需要针对某一个容器的 悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。
只要把其上一级的样式属性 position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
阅读全文
有时候我们可以看到工具栏能随着网页的滚动自动悬浮在网页的顶部,其实,我们可以通过简单的JavaScript和CSS代码来实现:
HTML代码:
<div id="box">
<div id="float" class="div1">
//随滚动移动的部分代码
</div>
</div>
CSS代码:
#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}
JAVASCRIPT代码(这个是关键):
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;...
阅读全文
有些时候,使用全背景的Banner更有冲击效果,而我们一般使用的Banner大多为950px宽,
我需要用到一些CSS技巧来实现,
需要准备的图片有:
中心Banner:950px 宽
全景Banner:2000px宽,中间留空950px;
html代码:
<div id="hd">
</div>
css代码:
#hd {
max-height: none;
overflow: visible;
position: static;
z-index: 1;
background-image: url("image_2000*height.jpg");
background-position: center 0; //这里是关键
background-repeat: no-repeat; //这里是关键
}
参考实例 wuzhen.tmall.com
阅读全文
css中使用斜体字:
.font{font-style: italic;}
阅读全文
1:li边距“无故”增加
任何事情都是有原因的,li边距也不例外。
先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其 低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响。所以只好笨手笨脚地把padding去掉,换成margin。 这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象。
现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形式为*display:inline-block;即可,前面加*是只 针对IE6/IE7有效,其他浏览器并...
阅读全文
单行文本垂直居中
方法:把文本段落高度(line-height)和所在区域高度(height)设为一致即可
缺点:这种方法只对单行文本有效
border:1px solid #ccc; height:50px; line-height:50px;
多行文本垂直居中
方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制,即使用padding属性
缺点:对固定高度的区间无效
border:1px #ccc solid; padding:20px 0; width:578px;
浏览器居中
方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离,例如文本区域高度为浏览器高度的20%,那么上方应该留下50%-10%...
阅读全文
浏览器及相关开发工具
浏览器
相关开发工具
Firefox, Flock
Web Developer Toolbar (various)
Firebug (DOM, CSS, JavaScript, Traffic)
YSlow
Pixel Perfect
Modify Headers (Ajax)
Poster (Ajax)
XRAY, MRI (CSS)
Firefox Accessibility Extension
LiveHTTPHeaders
IE6, IE7, IE8beta
IE Developer Toolbar (DOM, CSS)
HttpWatch (HTTP viewer)
Web Accessibility Toolbar (Accessibility and more)
XRAY, MRI (CSS)
Visual Web Developer Express Edition (JavaScript)
Microsoft Script Debugger (JavaScript)
OperaDragonfly
Opera deve...
阅读全文
由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范:
一、CSS文件及样式命名
1、CSS文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
2、CSS样式命名规范
本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查...
阅读全文











最新评论
话说博主不见更新,正考虑是否
我喜欢用的时候man一下,这
:razz: 来啦
博主是哲人啊,这么多哲理
能坚持这么久的,再烂都是牛站
很现实,转了一圈,回到原点.
刚用这个续费一年。
我看到有这样的说法: 谷歌