![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css技巧
泡泡_myy
未曾相逢先一笑,初会便已许平生
展开
-
chrome浏览器支持的最小字体为12px
解决方法:设置属性 -webkit-transform:scale(0.7);原创 2015-07-07 11:18:25 · 584 阅读 · 0 评论 -
css sprite技术 – 减少网站图片请求次数
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。 对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。加速的关键,不是降低重量,而是减少个数。 传统切图讲究原创 2015-07-07 11:15:14 · 1667 阅读 · 0 评论 -
Data URI scheme 实现数据的URI访问
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。浏览器每下载一个图档或CSS就会触发一个HTTP request,而每个HTTP流程都会额外产生HTTP Header、TCP/IP Header等资料量,data URI scheme则是将文件Base64编码内嵌在网页中不额外触发HTTP request,Page转载 2015-06-30 13:44:10 · 902 阅读 · 0 评论 -
background-attachment:fixed实现背景固定的效果
取值为fixed的时候,意思是固定背景,不管这个元素在什么地方,它的背景的位置就与它本身无关了,始终是参照浏览器的可见视窗来定位的原创 2015-07-07 11:29:46 · 5459 阅读 · 0 评论 -
设置渐变的背景色
background: -webkit-linear-gradient(top, #59B147 0%, #498636 100%);表示:从top开始从颜色1-----> 颜色2渐变(0%到100%)原创 2015-07-07 11:19:58 · 356 阅读 · 0 评论 -
div设置display:inline-block属性产生空白间距
使用 inline-block 的时候,ie8、chrome、firefox、opera 以及 safari 浏览器下,两张图片之间有“空白间隙。 平时写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是空白符。 去除空白符的存在只需转载 2015-07-07 11:17:46 · 1051 阅读 · 0 评论 -
Link 定制网站收藏夹图标
图像通常可以使用任何被浏览器支持的图像格式。 .ico文件格式通常可以被所有可以显示favicon的浏览器读取。 设置服务器,以发送正确的MIME标识: ICO 文件 image/vnd.microsoft.icon(或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型,因为多数主流浏览器现在支持它) GIF 文件 image/gif转载 2015-07-07 11:07:55 · 396 阅读 · 0 评论 -
可缩放矢量图形SVG的使用
1 使用背景 响应式设计主要用来解决网页在不同大小的屏幕的显示问题,对于普通的位图,我们需要为不同的屏幕提供多种不同大小的图片。SVG最有用的一点是与分辨率无关的,这意味着我们不需要关心设备有多少像素,浏览器总是会对图像进行缩放并优化让它看起来很好。 2 SVG基本介绍 1)定义 – 使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形原创 2015-07-06 09:51:46 · 656 阅读 · 0 评论 -
关于“被继承的样式特性值为0”的理解
css的样式有特性值来确定优先级,如:body(标签特性值为1).clsss(类特性值为10),#id(id特性值为100)等等, 但子元素继承父元素的某个样式,其特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。 例:body{ color:red!important; } .XXclass{ color:#fff; } #fff可以直接覆盖掉设置了imp原创 2015-07-07 11:22:04 · 331 阅读 · 0 评论