ayfenglp

摘要： 第六章 不同的屏幕尺寸，不同的设计小插曲：http://www.osctools.net/各种在线工具主要是用css3重新编写一个页面布局让他适应不同的屏幕尺寸和大小介绍下媒体查询和多列布局媒体查询：可根据用户所使用的设备或显示器特性来自定义样式，比如可视区域的宽度。使用它不仅可以针对特定的媒体类型设置一系列样式，还可以针对用户显示终端的一个或多个特性来定义样式。说 明：所有可用的媒体特性都罗列在www.w3.org/tr/css3-mediaqueries/#medial里，并包含详细释义。最常用的特性：min-width，max-width，min-device-width，max-dev 阅读全文

摘要： 第五章 使用伪类来提高效率伪类和伪元素的差异伪类是选取已设置过类的HTML元素，而伪元素选取的牙根就不是HTML元素css里的4个伪元素分别是::first-line，::first-letter，::before和::after。它们代表的是其他HTML元素的片段，而非该元素本身。它们也不属于文档树的一部分，因此唯一可以定位到它们的方式便是使用伪元素选择器。在css3的语法规范中，伪类以一个冒号打头，而伪元素是两个。css3中的结构伪类:root 选取文档的根元素。在HTML中，始终是指html元素:nth-child() 根据其父元素的子元素的序号来选取元素... 阅读全文

摘要： 第四章 根据类型为图片和链接定义样式我们可以借助css3中新的选择器以一种更特别、高效的方式分别定位不同类型的链接和图片。 css3可以同时提升你的开发效率和页面的执行效率。一个属性选择器并非只能与类型选择器关联起来使用。可以将它和任何简单的选择器组合使用。例如：.warning[title]css2.1的属性[attr] 匹配拥有attr属性的元素，与属性的取值无关[attr=val] 匹配拥有attr属性的元素，其属性值必须刚好等于val[attr~=val] 匹配拥有attr属性的元素，其属性值是用空格分隔开来的单词列表，其中之一必须刚好... 阅读全文

摘要： 先解释一下css3是css2.1的扩展，在2.1的基础上增加了很多的强大功能。css3被划分成几个模块。在http://www.w3.org/Style/CSS/current-work这个网页里包含了所有模块的列表。 接下来说一下学习了css3的主要几个新特性： 特性一：不以来图片的视觉效果。比如圆角、阴影、半透明背景、渐变以及图片边框等。 特性二：盒容器变形。比如旋转、缩放或者移动等。 特性三：独一无二的字体。引入了@font-face规则。 特性四：强大的选择器。新增的选择器，大部分是伪类和属性选择强。可以用它们选取HTML结构中的特定片段而无需增加特定的ID或类 特性五：过渡和动画。c 阅读全文

摘要： 第三章 纸质笔记背景图片缩放background-size属性可以让背景图片和文本同步缩放。例如：background-size:100px auto;第一个值指定了背景图片的宽度，第二个值，指定了高度。background-size:50% 100%;宽度上适应div宽度的一半，高和div一样高background-repeat属性里的round和space值来使背景图片平铺之后不会再边缘上被截断。round值会缩放背景图片，从而保证图片填满整个区域二不会被截断；space值不会缩放图片，但是它可以保证填满并且第一张和最后一张背景图是紧靠容器边缘的。只有ie9和opera才支持，还是乖乖的使 阅读全文

摘要： 第二章 气泡对话框学习word-wrap属性，用来容纳溢出的文本。取值normal（默认）或break-wordtext-wrap是控制词间如何折行。使用border-radius实现圆形（椭圆）要绘制一个正圆，得给盒容器指定相同的width和height值，要用em代替px作为尺寸来确保它可以根据文字量等比扩大。然后，将每个边角的border-radius的尺寸设置为width/height的一半。备注：使用border-radius属性时并不是必须指定边框样式，如果没有边框则浏览器只为背景区域绘制圆角。border-radius是用来分别指定圆角半径的四个属性的简写形式。这四个属性是bor 阅读全文