《6月份学习总结》由会员分享，可在线阅读，更多相关《6月份学习总结（10页珍藏版）》请在金锄头文库上搜索。
1、CSS :after 选择器清除浮动.container:after content:”.”; display:block; height:0; clear:both; visibility:hidden; container元素后面插入内容，并设置所插入内容的样式CSS display:table属性当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也
2、给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。CSS3 transition-property 属性-webkit-transition: color, background 0.5s ease-in-out;-khtml-transition: color, background 0.5s ease-in-out;-moz-transition: color, background 0.5s
3、 ease-in-out;-ms-transition: color, background 0.5s ease-in-out;-o-transition: color, background 0.5s ease-in-out;transition: color, background 0.5s ease-in-out;把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：divtransition-property:width;-moz-transition-property: width; /* Firefox 4 */-webkit-transition-property
4、:width; /* Safari 和 Chrome */-o-transition-property:width; /* Opera */CSS :active 选择器选择活动链接，并设置其样式：a:active background-color:yellow;定义和用法:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。提示：请使用 :link 选择器对指向未被访问页面的链接设置样式，:visited 用于设置指向已访问页面的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活
5、动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;media screen and (max-width: 1240px)利用media screen实现网页布局的自适应 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度76
6、8以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验media screen and (min-width:1200px)#page width: 1100px; #content,.div1width: 730px;#secondarywidth:310pxmedia screen and (min-width: 960px) and (max-width: 1199px) #page width: 960px; #content,.div1width: 650px;#secondarywidth:250pxselectmax-width:200pxmedia screen an
7、d (min-width: 768px) and (max-width: 959px) #page width: 900px; #content,.div1width: 620px;#secondarywidth:220pxselectmax-width:180pxmedia only screen and (min-width: 480px) and (max-width: 767px)#page width: 450px; #content,.div1width: 420px;position: relative; #secondarydisplay:none#accesswidth: 4
8、50px; #access a padding-right:5px#access a imgdisplay:none#rssdisplay:none#branding #sdisplay:nonemedia only screen and (max-width: 479px) #page width: 300px; #content,.div1width: 300px;#secondarydisplay:none#accesswidth: 330px; #access a padding-right:10px;padding-left:10px#access a imgdisplay:none
9、#rssdisplay:none#branding #sdisplay:none#access ul ul awidth:100pxCSS3 word-wrap 属性允许长单词换行到下一行：p.test word-wrap:break-word;word-wrap: normal|break-word;值描述normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或 URL 地址内部进行换行。CSS white-space 属性规定段落中的文本不进行换行：p white-space: nowrap 值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留
10、。其行为方式类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。CSS3 text-overflow 属性使用 text-overflow 属性：div.testtext-overflow:ellipsis;语法text-overflow: clip|ellipsis|string;值描述测试clip修剪文本。测试ellipsis显示省略符号来代表被修剪的文本。测试string使用
11、给定的字符串来代表被修剪的文本。CSS3 text-shadow 属性基础的文本阴影效果：h1text-shadow: 5px 5px 5px #FF0000;语法text-shadow: h-shadow v-shadow blur color;注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值描述测试h-shadow必需。水平阴影的位置。允许负值。测试v-shadow必需。垂直阴影的位置。允许负值。测试blur可选。模糊的距离。测试color可选。阴影的颜色。参阅 CSS 颜色值。测试
