Web 开发人员需要了解的一些 HTML5 和 CSS3 片段

isiqi

浏览: 16493822 次
性别:
来自: 济南

最近访客更多访客>>

nison

hellohank

wangyy

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

Web HTML5 IE YUI Chrome

移除 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;
}

分享到：

推荐 15 款很棒的文本编辑器 | modbus 查表法

2011-05-11 09:46
浏览 898
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web 开发人员需要了解的一些 HTML5 和 CSS3 片段

移除 IE 下 textarea 的滚动条

完全的CSS实现的透明效果

X-UA-Compatible

Internet Explorer 条件判断

YUI 字体 Reset

强制显示浏览器滚动条

在输入框中显示手型光标

表单域与文本标签的对齐

CSS3 预加载图片(s)

使用css翻动图片

纯 CSS3 实现的圆角效果

IE 下的 Min-Height

垂直居中

类似杂志风格的 Pull 引号

花式符号

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web 开发人员需要了解的一些 HTML5 和 CSS3 片段

移除 IE 下 textarea 的滚动条

完全的CSS实现的透明效果

X-UA-Compatible

Internet Explorer 条件判断

YUI 字体 Reset

强制显示浏览器滚动条

在输入框中显示手型光标

表单域与文本标签的对齐

CSS3 预加载图片(s)

使用css翻动图片

纯 CSS3 实现的圆角效果

IE 下的 Min-Height

垂直居中

类似杂志风格的 Pull 引号

花式符号

评论

发表评论

相关推荐

最近访客更多访客>>