随笔分类 -  css/css3

1
一起来用css画画
摘要：hello，大白来了。。。baymax ... 阅读全文
posted @ 2015-05-06 10:47 低调的大白兔 阅读(347) 评论(0) 推荐(0)
css2和CSS3的background属性简写
摘要：1、css2：background:background-color || url("") || no-repeat || scroll || 0 0; css3: background: url("") || 0 0/cover || no-repeat || scroll || border-... 阅读全文
posted @ 2015-03-31 10:44 低调的大白兔 阅读(2625) 评论(0) 推荐(0)
css3新增的background属性
摘要：1、background-size可取值：auto（背景图片正常显示） size size （150px 40%） cover （背景图片覆盖整个背景） contain（背景图片缩小填满整个背景）实例： /*这段代码是当不支持CSS3 Media Queries浏览器按back... 阅读全文
posted @ 2015-03-31 10:35 低调的大白兔 阅读(1959) 评论(0) 推荐(0)
css3的::selection属性
摘要：大家都知道浏览器对选中的文本默认样式都是统一的，Windows下是一个深蓝色的背景，白字的前景，而在Mac下是一个淡蓝色背景，白色字体，就如上图所展示的一样，自从有了这个“::selection”选择器后，我们在部分浏览器中可以设置你所需要的样式，下面就让我来告诉大家如何使用这个“::selecti... 阅读全文
posted @ 2015-03-27 21:30 低调的大白兔 阅读(292) 评论(0) 推荐(0)
css3的apprearance属性（转）
摘要：appearance使用方法：.elmClass{ -webkit-appearance: value; -moz-appearance: value; appearance: value;}接下来我们一起来看个简单的实例：我是一个段落P元素 我是一个段落P元素 我... 阅读全文
posted @ 2015-03-27 21:28 低调的大白兔 阅读(567) 评论(0) 推荐(0)
CSS3的background-size
摘要：DEMO一、background-size:auto;我来看第一个DEMO,在前面的DEMO上加上和个class名为"backgroundSizeAuto",在这个Demo上我们应用上前面所示的背景，并把background-size取值为auto, .backgroundSizeAuto { ... 阅读全文
posted @ 2015-03-27 21:22 低调的大白兔 阅读(2040) 评论(0) 推荐(1)
webapp之路--之ios上图标
摘要：以前我们用过favicon在浏览器给网站进行身份标识，用法如下：[html]view plaincopy现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏... 阅读全文
posted @ 2015-03-26 21:46 低调的大白兔 阅读(281) 评论(0) 推荐(0)
webapp之路--之必备知识
摘要：移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels： 浏... 阅读全文
posted @ 2015-03-26 21:32 低调的大白兔 阅读(247) 评论(0) 推荐(0)
关于css3的calc（）
摘要：么是calc()?学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说... 阅读全文
posted @ 2015-03-24 20:30 低调的大白兔 阅读(1500) 评论(0) 推荐(0)
line-box（转）
摘要：inline-block是什么？Inline-block是元素display属性的一个值。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。块级元素（block elements）,来源于CSS盒子... 阅读全文
posted @ 2015-03-24 20:17 低调的大白兔 阅读(444) 评论(0) 推荐(0)
转载--使用image-set来优化在retian屏幕下的背景图片
摘要：mage-set对我来说，我也很陌生，于是借助G爸和度娘海量的搜索image-set，才知道Webkit内核"safari6"和“chrome21”支持CSS4的background-image新规范草案image-set。通过Webkit内核的浏览器私有属性“-webkit”，image-set为... 阅读全文
posted @ 2015-03-24 19:52 低调的大白兔 阅读(327) 评论(0) 推荐(0)
关于css的伪类和伪元素
摘要：现在才发现自己一直没有分清楚css的伪类和伪元素啊，so，总结一下。CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他css无法描述的东西。伪类种类伪元素种类区别这... 阅读全文
posted @ 2015-03-24 19:40 低调的大白兔 阅读(175) 评论(0) 推荐(0)
转Y-slow23原则（雅虎）
摘要：YslowYahoo发布的一款基于FireFox的插件,主要是为了提高网页性能而设计的，下面是它提倡了23条规则，还是很不错的，分享一下：1.减少HTTP请求次数合并图片、CSS、JS，改进首次访问用户等待时间。2. 使用CDN就近缓存==>智能路由==>负载均衡==>WSA全站动态加速3. 避免空... 阅读全文
posted @ 2015-03-24 15:33 低调的大白兔 阅读(244) 评论(0) 推荐(1)
前端优化总结和技巧（原创）
摘要：这两天把自己以往的一些经验总结一下，希望对自己以后的开发更有帮助。分类总结下，前端开发中的优化方法和技巧。可以一起交流。一、减少http请求数量（简单粗暴，效果最佳） 1、对于图片，适当使用css sprite。 2、适当进行css、js文件的合并和压缩。 3、（大图片可以使用浏览器的本地... 阅读全文
posted @ 2015-03-24 15:30 低调的大白兔 阅读(283) 评论(0) 推荐(0)
css3的box-sizing--从此不用担心盒模型的不兼容
摘要：前段时间阿里的面试问了关于盒模型的东西，众所周知，ie和标准盒模型是有着区别的。面试官问有没有什么办法可以改变盒模型的显示效果。答案是css3的box-sizing：其可以取三个值：1、值content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高... 阅读全文
posted @ 2015-03-24 08:59 低调的大白兔 阅读(979) 评论(0) 推荐(0)
css3选择器总结--强大如jquery
摘要：最近发现，阿里的笔试考了许多css3的知识，像query media、box-flex等等。主要是移动浏览器的开发，让html5和css3如虎添翼，再也不用担心兼容了。so总结一下css3的选择器：一、css3属性选择器：E[attr]：只使用属性名，但没有确定任何属性值；指的是包含attr属性... 阅读全文
posted @ 2015-03-23 21:28 低调的大白兔 阅读(147) 评论(0) 推荐(0)
css3盒模型学习--利用box自适应布局
摘要：box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(... 阅读全文
posted @ 2015-03-23 20:39 低调的大白兔 阅读(830) 评论(0) 推荐(0)
webapp之路--之query media
摘要：query media是css3中的模块，对于移动端的开发是非常重要的，是响应式web设计的中不可或缺的一部分。简单点说就是根据不同移动设备的屏幕参数来制定不同的css方案以实现web的响应式开发。目前Media Query在浏览器上的兼容度要高很多，Firefox,Safari,Chrome,... 阅读全文
posted @ 2015-03-23 20:37 低调的大白兔 阅读(334) 评论(0) 推荐(0)
利用rem实现webapp布局
摘要：rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么？ rem（font size of the root element）是指相对于根元... 阅读全文
posted @ 2015-03-17 10:41 低调的大白兔 阅读(1850) 评论(1) 推荐(1)
css层叠顺序
摘要：css层叠规则及各个选择器的特殊性。1、有！important的规则的权重要高于没有的，有!important的规则优先级最高。2、按特殊性对规则进行排序，各个选择器的特殊性为：内联样式（即在html中声明的css）的特殊性为：1000 ID选择器的特殊性为：100 类属性值（class）、伪类（... 阅读全文
posted @ 2014-11-13 21:52 低调的大白兔 阅读(224) 评论(0) 推荐(0)

1