6月份学习总结.docVIP

CSS :after 选择器 元素后面插入内容，并设置所插入内容的样式 CSS display:table属性 当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 CSS3 transition-property 属性 把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果： div { transition-property:width; -moz-transition-property: width; /* Firefox 4 */ -webkit-transition-property:width; /* Safari 和 Chrome */ -o-transition-property:width; /* Opera */ } CSS :active 选择器 选择活动链接，并设置其样式： a:active { background-color:yellow; } 定义和用法 :active 选择器用于选择活动链接。 当您在一个链接上点击时，它就会成为活动的（激活的）。 提示：请使用 :link 选择器对指向未被访问页面的链接设置样式，:visited 用于设置指向已访问页面的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式。 亲自试一试 - 实例 例子 1 选择未访问、已访问、悬浮和活动链接，并设置它们的样式： a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} 利用@media screen实现网页布局的自适应 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验 @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} } @media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} } @media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} } @media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none