CSS代码片段

字体

/*
    雅黑
    "STXihei" 是微软雅黑在Mac平台上的对应字体
*/
.ff-yahei{
    font-family: tahoma,arial,"STXihei","Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", SimSun;
}
/* 普通黑体 */
.ff-hei{
    font-family: tahoma,arial,"STXihei",SimHei,"Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "宋体", SimSun;
}
/* 宋体 */
.ff-song{
    font-family: tahoma,arial,"宋体", SimSun;
}

清浮动

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

CSS Hacks(Browser Specific Hacks)

browserhacks

跨浏览器的透明度

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

对SEO和可访问性友好的隐藏元素的方法

#content {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

如果是一个元素用背景图来代替文本,需要隐藏文本,可用

.text{
    text-indent: -9999px;
}

注意:如果不合适的使用这种方法,会导致搜索引擎将该页面列为黑名单。

标出页面中存在问题的元素(Diagnostic CSS)

/* 空元素 */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }

/* 某些属性不该为空 */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }

/* 废弃的元素 */
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }

/* 废弃的属性 */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }

对某个具体的标准设备的Media Queries

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

去除IE6对png24图片的灰色背景

背景图

.yourselector {
   width:200px;
   height:100px;
   background: url(/folder/yourimage.png) no-repeat;
   _background:none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

图片

img, .png {
   position: relative;
   behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
   this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
   this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
   this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青蛙要fly的专栏

项目需求讨论- 自定义滚轮(第二波新实现)

大家好,在前段时间我写过用ScrollView实现了自定义滚轮,但是在循环的效果不是特别好。(这次文章底部附上了Demo。O(∩_∩)O~)

1022
来自专栏Android先生

快给你的app上锁吧(android图案解锁)

思路 这里又是一个九宫格布局,布局可以参考上一篇快给你的app上锁吧(android数字解锁),只不过这里的九宫格上我们画的是图片(bitmap)。onDraw...

2932
来自专栏互联网杂技

JavaScript 常用方法总结

经常使用的 JS 方法,今天记下,以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.us...

3736
来自专栏Ken的杂谈

ImageHelper.cs-支持高清缩略图

1222
来自专栏前端说吧

JS-点和中括号

3635
来自专栏AhDung

【C#】分享一个弹出容器层,像右键菜单那样召即来挥则去

------------------201508261813更新(源码有更新、Demo未更新)------------------

1562
来自专栏Jack的Android之旅

android自定义钟表android自定义钟表

接下来就是设定这个自定义View的大小,在没有大小自适应的时候,view的高度我这位整个手机屏幕高度的三分之一,宽度为整个屏幕的宽度

881
来自专栏HT

纯Shading Language绘制HTML5时钟

今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟...

2177
来自专栏前端说吧

JS-结合html综合练习js的对象——班级成绩表制作

3839
来自专栏web编程技术分享

js常用方法和一些封装 -- 时间相关(附案例详解)

5967

扫码关注云+社区

领取腾讯云代金券