Web 开发人员需要了解的一些 HTML5 和 CSS3 片段
2011-05-11 09:46
831 查看
移除 IE 下 textarea 的滚动条
textarea { overflow: auto; }
完全的CSS实现的透明效果
.transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } ... <div class="box transparent">larger content</div>
X-UA-Compatible
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Internet Explorer 条件判断
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]-->
YUI 字体 Reset
更多相关文档请看 YUI developer documentation.
/* fonts.css from YUI Library: URL - developer.yahoo.com/yui/ */ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } table { font-size:inherit; font:100%; } select, input, textarea { font:99% sans-serif; }
强制显示浏览器滚动条
html { overflow-y: scroll; }
在输入框中显示手型光标
/** label CSS pointer reset **/ label, input[type=button], input[type=submit], button { cursor: pointer; }
表单域与文本标签的对齐
/* @group align radio, labels, forms */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; }
CSS3 预加载图片(s)
div.imgload { background:url(images/sheet1.gif) no-repeat; background:url(images/sprites.png) no-repeat; background:url(images/mybanner.jpg) no-repeat; margin-left: -99999px; }
使用css翻动图片
img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
纯 CSS3 实现的圆角效果
.round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ }
IE 下的 Min-Height
.box { min-height:500px; height:auto !important; height:500px; }
垂直居中
.vcontainer { min-height: 10em; display: table-cell; vertical-align: middle; }
类似杂志风格的 Pull 引号
.pullquote { width: 220px; float: right; margin: 5px; margin-left: 25px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #333; }
花式符号
.amp { font-family: Baskerville, 'Goudy Old Style', Georgia Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; }
相关文章推荐
- 我的第一个python web开发框架(5)——开发前准备工作(了解编码前需要知道的一些常识)
- Test_开发人员需要了解的测试
- 手机的组成==软件人员需要了解的一些名词==相关的部门及其人员==入门相关
- 开发人员应该对IIS理论层的知识了解的多一些~第四讲 HttpModule中的几大事件
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
- Web开发中需要了解的东西
- 开发人员需要在多大程度上了解业务?
- Web开发人员不容错过的10个HTML5工具
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
- 开发人员应该对IIS理论层的知识了解的多一些~第一讲 什么是Http?
- Web开发中需要了解的东西
- Web开发中需要了解的东西
- 【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍
- HTML5 Canvas 开发 绘图方法整理 【一、需要了解的基础内容】
- 为HTML5开发人员量身打造的7个Web框架
- 嵌入式linux开发人员需要了解的几个重要的指令
- 以下这些不同层次的功能都是Web开发人员应当了解的
- Web开发中需要了解的东西
- 每个开发人员都需要了解的一个SQL技巧
- Web开发中需要了解的东西