
css优化
iteye_2245
这个作者很懒,什么都没留下…
展开
-
type=file的样式控制---宽度(部分兼容性写法)
1.关于input的type=file控件的宽度问题。 -------FF下单纯地设置width还是没有作用,可以用size去设置宽度。 <input type="file" size="" style="width:"/> --------chrome下这个写法还是无法兼容...原创 2011-12-10 21:40:07 · 509 阅读 · 0 评论 -
《编写高质量代码》读书笔记系列三---css命名
1、CSS命名推荐使用英语,不使用汉语拼音,可以根据内容来选用合理的英文单词:比如头部head,底部foot,主体部分main等。为了方便阅读和理解,提高可维护性,我们推荐这样的命名方式。 2、案例: <ul class="timeList"> <li>2012年2月1号</li> <li>2012年3月1...2012-06-25 21:55:18 · 102 阅读 · 0 评论 -
《编写高质量代码》读书笔记系列二低权重规则
CSS设置的样式是可以层叠的,而且我们的CSS选择符也是有权重的: -------- 不同的选择符的样式设置有冲突的时候,会采用权重高的选择符设置的样式 HTML标签的权重是 1class的权重是10id的权重是100内联样式1000 举例: "#test .red" ---- 权重是100+10 = 110...2012-06-25 19:22:37 · 97 阅读 · 0 评论 -
IE6系列之双倍边距
本文记录一下ie6下: float元素的浮动方向和margin方向的一致。 比如:float:left,margin-left才会产生双倍边距。 http://blog.sina.com.cn/s/blog_818a1e5b0100xxk4.html...原创 2013-12-13 13:41:41 · 181 阅读 · 0 评论 -
css美化工具
其实很多时候,我们写完css规则之后,我们思考的无非就是3件事情: 验证美化压缩当然无论是我们自己做这样的工具还是寻找一些比较好的成熟的工具,都有几个期望:是否支持一些ie下的hack方式: *property:value _property:value property:valye\9是否支持@import是否支持@ch...2012-11-03 17:35:43 · 131 阅读 · 0 评论 -
img设置背景图
如何给img元素设置背景图: img{ display:block; background:url("*"); padding: 10px;} 如何给img元素设置双边: img{ display: block; padding: 1px; background:white...原创 2013-10-25 18:15:27 · 3355 阅读 · 0 评论 -
关于如何选择图片格式
给出几种场景下对应的图片格式: 1、广告图片、照片、颜色非常丰富的图片 JPG 2、Sprite、图标、简单、对比、文本 PNG8 3、半透明、效果图、高质量图 PNG24 4、动画 GIF 图片大小限制: 1、运营图片单张不能超过100k 2、Icon图片单张不能超过5k ...原创 2012-11-01 20:06:50 · 180 阅读 · 0 评论 -
图片格式汇总
1、jsp(JPEG) JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。本身只有描述如何将一个影像转换为字节的数据串流,但并没有说明这些字节如何在任何特定的储存媒体上被封存起来。JPEG的压缩方式通常是破坏性资料压缩,意即在压缩过程中图像的品质会遭受到可见的破坏。即有损压缩。JPEG在色调及颜色平滑变化的相片或是写实绘画上可以达到它最佳的效果。在这种情况下,它通常比完...原创 2012-11-01 19:29:47 · 279 阅读 · 0 评论 -
css设置鼠标样式为背景图片
其实在很多场合我们都已经体会到了这种需求,比如人人的图片翻页,移到不同的区域鼠标会变成左右箭头的图片样式。 具体怎样设置呢? #test{ cursor:url('path/.*****.cur')} 注意:我们引用的文件是以cur文件为后缀的图标文件。 据说这个格式与.ico的格式是一致的,一般情况下,可以直接把文件后缀改成....2012-10-01 11:16:58 · 955 阅读 · 0 评论 -
关于页面跨平台字体样式探究
前面写了一篇“Mac下的字体”,去各大网站关注了一下css代码,下面是QQ空间的处理方式,记录下来。 .os_winXp{font-family:Tahoma}.os_mac{font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial}.os_vista,.os_win7{font-family:"Micro...原创 2012-07-29 18:28:11 · 218 阅读 · 0 评论 -
空白边叠加引发的思考--ff和ie在解析div高度的时候的差异
最近老大面试中遇到了一个问题: <h2>在IE6,FF container的高度是多少</h2><div id="container" class="" style="padding:20px;border:solid 5px #ccc;" > <div id="" class=""2011-03-15 14:07:40 · 92 阅读 · 0 评论 -
css优化之ie条件注释
这些知识点网上很多,写的原因只是作为自己记录学习用。 <!--[if condition]> HTML <![endif]--> 下面是几个例子 (正好测试了一下baidu浏览器 1.3.2.171,发现它也认,My surprise!) <!--[if IE]> (ie浏览器或者baidu的浏览器也能识别) <![en...2011-10-09 16:18:10 · 136 阅读 · 0 评论 -
opacity的思考
今天在封装图片轮播的插件的时候,产生了这个opacity的小小思考。我这个轮播的思路不是以前baidu输入法官网的设置外层容器overflow为hidden,position为relative用setInterval去定义一个循环时间,然后去按照图片的height改变top的值。而是利用opacity去切换显示对应的图片。 这边还是先说说这个opacity的兼容性问题 f...2011-10-04 19:53:35 · 116 阅读 · 0 评论 -
css优化之简写规则
最近一直在研究性能,关于前端优化,其实css部分还是有很多的提升空间。对于互联网,除了本身兼容性写法的优化外,更多的还是会遵循seo相关的优化。其实自己写过一篇关于兼容性或者说规范的文章 http://zhangyaochun.iteye.com/blog/1178005 但是只是简单地说了一下关于dtd和w3c的验证机制。 今天其实想记录的还是一些简写方...2011-10-02 14:37:59 · 110 阅读 · 0 评论 -
BFC相关
块级格式化上下文,独立的渲染区域。 触发BFC float非noneoverflow非visibledisplay:table-cell | table-caption | inline-blockposition:absolute | fixedfieldset元素 BFC特性: ...原创 2013-04-11 14:43:14 · 99 阅读 · 0 评论