ios0213的专栏

:after定义和用法:after 选择器在被选元素的内容后面插入内容,也可以在被选择元素后面添加新的样式。如：this is a test123用:after 设置样式，如下:p:after{content:"-添加的内容";color:red;fontsize:16px;}则显示后效果为:123-添加的内容

伪类：CSS 伪类用于向某些选择器添加特殊的效果。如：锚伪类==a:hover  a:visited a:link  a:action:first-child 伪类使用 :first-child 伪类来选择元素的第一个子元素:lang 伪类:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为

无标题文档a{ position:relative; display:inline-block; outline:none; text-decoration:none; color:#636; font-size:24px; padding:5px 25px;}a:hover::before,a:hover::after{ position:absolute; /*注意

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :fir

无标题文档.wrap{ margin:0 auto; border:1px solid #FFF;}.menu { width: 80%; height: 40px; margin: 0 auto; margin-top: 50px; border-top:1px solid #F1F1F1;}.menuin { padding: 0; margin: 0; flo

无标题文档* { padding: 0; margin: 0;}div { margin: 0 auto; margin-top: 100px; text-align: center;}.search { width: 500px; height: 35px; line-height:35px; /*设置行高让光标IE浏览器下在文本框中居中显示*/ border:

在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。Data URL基本原理为什么Data URL是个好东西

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长多项改变如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：如：div{transition: width 2s, height 2s, transform 2s;-moz-tra

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？您可能感兴趣的相关文章Web 开发人员和设计师必读文

让div 透明，兼容IE FFtransparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。

所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。RGBA颜色归为CSS3属性，其余RGB的区别在于多了个A，也就是Alpha透明度，这是个很好的东西啊，我们以后要实现半透明效果（无论是背景，边框，文字颜色等都可以用半透明实

Magic Zoom v3.1.19 是最新版的图片放大镜组件，非常的好用，可以任意的定义放大镜的尺寸，放大镜的显示位置，可以定义图片标题，甚至滤镜的透明度均可定义，设置参数相当丰富，可以根据自己要求DIY出不同的效果。这个组件兼容IE6以上和Firefox，代码整合简易。1.在区加入以下代码：2. 图片使用如下面示例：如果需要不同的效果，就增加相应的代码参数，具

无标题文档body{ padding:0; margin:0; margin:0 auto; background-color:#069; width:80%; height:800px; border:1px solid #F00;}div{ height:200px; width:200px; border:1px solid #0F0;}如上

无标题文档* { padding: 0; margin: 0;}body { background-color: #F2F2F2;}.wrap { width: 55%; margin: 0 auto; padding: 50px;}.header { margin-top: 10px; margin-bottom: 50px; text-align: cente

nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以 Node 对象返回。 previousSibling 返回列表项的 previousSibling（前一个同胞节点）：document.getElementById("item2").previousSibling;

input:focus,textarea:focus{ background-color:#CCC;}

前言CSSOM全称CSS对象模型，涉及两部分内容，第一部分和操作样式表相关，第二部分和元素尺寸相关，本文介绍第二部分内容。Window接口的扩展innerWidthinnerHeightouterWidthouterHeightpageXOffsetpageYOffsetscrollXscrollYElement接口的扩展clientTopclientLeftclien

无标题文档a.demo{position:relative;}a.demo span{display:none;}a.demo:hover span{position:absolute;display:block;top:-0.6em;left:12em;}span{color:#F00;}welcome

无标题文档*{margin:0;padding:0;}.wrap{width:900px;padding:0;margin:0 auto;border:1px solid #999;margin-top:40px;}.header{position:fixed;height:40px;width:100%;top:0;back

无标题文档#demo1{width:800px;height:230px;border:#F00 1px solid;}#demo1:hover{border-radius:25px;-webkit-border-radius:25px;}#demo2{height:70px;width:220px;border:#F00 1px solid

传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，只需要border-radius属性，支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4一、border-radius属性CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能

ul{margin:0;padding:0;list-style-type:none;}a:link,a:visited{display:block;width:160px;padding:4px;background-color:#BEBEBE;text-decoration:none;color:#FFF;text-align:center;

常见的如：#wrap{width:80%px;margnin:0 auto;}但是在这种方法在IE浏览器较低的版本中不支持，可以这样：#wrap{width:80%px;margnin:0 auto;align:left;}还可以这样：#wrap{width:720px;position:relative;left:50%;

常规图片一般采用这种方式插入现在可以用div方式，将图片设置为这个div的背景图片，此时div的宽度要比图片的宽度要宽，如：

无标题文档.wrap{width:90%;height:1000px;border:2px solid #CCC;margin:0 auto;}.wrap_01{height:900px;margin:0px 10px 0px 10px;background-color:#EFEFEF;}.footer{height:40px;backg

function check(browser)  {  document.getElementById("answer").value=browser  }您喜欢哪款浏览器？Internet ExplorerFirefoxNetscapeOpera您喜欢的浏览器是：

无标题文档#demo1{ position:relative; left:300px; top:100px; width:300px; height:200px; background-color:#F00;}#demo2{ position:absolute; width:300px; height:200px; top:100px; left:100px; ba

无标题文档* { padding: 0; margin: 0;}body{ background-color:#F0E9D8;}#wrap { margin: 0px auto; width: 80%; background-color:#FFF;}#left { float:left; width:20%; height:500px; border:2px s

当一个元素应用到两个不同的规则样式的时候，会穿样式层叠的问题，不同的样式规则会实加在该元素上，相同的规则则会出现层叠，该元素会采用就近的样式来进行显示如：无标题文档#demo{ color:#F00; font-size:24px;}p{ color:#fff; background-color:#096;}span{ color:#000; backgr

thead tbody tfoot  IE浏览器低版本中支持不是很完善，现在HTML5支持教好，可以参考（得意生活网） 源代码，里面有这三个标签的具体使用。

之前是用DOM style 方式给元素设置或者刷新样式，可以利用元素的className属性设置元素的样式。如：无标题文档.demo1{ color:#F00;}.demo2{ background-color:#066;}how are you?var m=document.getElementById("test");m.className="de