cmded – 提供免费VPN以及免费SSH和免费网站空间多项免费服务
转CHINAZ:国外优秀免费网站空间推荐
日本YCM提供15天免费的独立IP VPS
Xoom.it提供免费的PHP空间

现在位置 >首页 > 所有关于css的文章

发表于:2011年11月07日  分类:技巧分享  添加评论  1264 views 
CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox
通过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>...
阅读全文
发表于:2011年11月07日  分类:技巧分享  添加评论  1268 views 
在IE6下支持图片透明
png8和gif都是8位的透明度 IE6与生俱来就支持png8的索引色透明度 但不支持png或8位以上的 alpha 透明度 而对于非动画的GIF建议你使用PNG8 因为PNG文件会更小 如果想将png24转换成png8格式, 方法也很简单 使用photoshop转换就可以了 注意:只能针对单色彩的图片起效,其他效果不好
阅读全文
发表于:2011年11月04日  分类:技巧分享  添加评论  1411 views 
CSS中position的absolute和relative的使用
relative(相对)以及absolute(绝对)。 往往会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。 然而有时候我们需要针对某一个容器的 悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。 只要把其上一级的样式属性 position设置为relative就可以了。 也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
阅读全文
发表于:2011年11月02日  分类:Wordpress开发, 技巧分享  添加评论  1294 views 
JavaScript和CSS实现工具栏智能悬浮
有时候我们可以看到工具栏能随着网页的滚动自动悬浮在网页的顶部,其实,我们可以通过简单的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;...
阅读全文
发表于:2011年08月31日  分类:技巧分享  添加评论  1357 views 
div实现Banner全背景的显示
有些时候,使用全背景的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
阅读全文
发表于:2011年08月23日  分类:技巧分享  添加评论  1417 views 
css中使用斜体字
css中使用斜体字: .font{font-style: italic;}
阅读全文
发表于:2011年06月24日  分类:技巧分享  添加评论  1947 views 
ie6,ie7,ie8 css bug兼容性整理记录
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外。 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其 低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响。所以只好笨手笨脚地把padding去掉,换成margin。 这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象。 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形式为*display:inline-block;即可,前面加*是只 针对IE6/IE7有效,其他浏览器并...
阅读全文
发表于:2011年06月17日  分类:技巧分享, 编程心得  1条评论  1899 views 
CSS 文本垂直居中方法
单行文本垂直居中 方法:把文本段落高度(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%...
阅读全文
发表于:2011年01月31日  分类:技巧分享  添加评论  1585 views 
前端开发必备工具
浏览器及相关开发工具 浏览器 相关开发工具 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...
阅读全文
发表于:2010年12月16日  分类:技巧分享  添加评论  1733 views 
CSS书写规范和流程总结
由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范: 一、CSS文件及样式命名 1、CSS文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 2、CSS样式命名规范 本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查...
阅读全文

Switch to our mobile site