-
语法:transition:property dduration timing-function delay 默认值:transition:all 0 ease 0;查看全部
-
transition-property: width height background; 制定过度或者模拟的属性 div:hover { width: 400px; height: 300px; background:blue; }查看全部
-
transform -origin 默认xy的值都在 50%位置。查看全部
-
scale的值默认为1,小于1的时候缩小,大于1的时候被放大。。查看全部
-
retate(*deg) 正数顺时针,负数逆时针。查看全部
-
自由缩放属性resize resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明: 属性值 取值说明 none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素,同时修改元素的宽度和高度 horizontal 用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度。 vertical 用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度。 inherit 继承父元素的resize属性值。查看全部
-
Responsive设计——不同设备的分辨率设置 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ } 现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下: @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }查看全部
-
白色肯定是255,255,255了2^8-1=255查看全部
-
“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。查看全部
-
在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 input[type="text"]:enabled { border: 1px solid #f36; box-shadow: 0 0 5px #f36; }查看全部
-
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 .wrapper p:only-of-type{ background: orange; }查看全部
-
“:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。 li { background: green; padding: 10px; margin-bottom: 5px; } li:only-child { background: orange; }查看全部
-
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。查看全部
-
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。查看全部
-
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 .wrapper > div:th-of-type(2n-1), .wrapper > p:nth-of-type(2n){ background: orange; } /*或者*/ .wrapper > div:th-of-type(2n+1), .wrapper > p:nth-of-type(2n){ background: orange; } /*或者*/ .wrapper > div:nth-of-type(odd), .wrapper > p:nth-of-type(even){ background: orange; }查看全部
举报
0/150
提交
取消