的四种状态 A:link 连接平常状态 A:hover 鼠标放上去的时候 A:active 鼠标按下的时候 A:visited 连接被访问过后的状态 target属性 _blank浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。 _parent这个目...
CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类 伪元素种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 p>i:first-child {color: red}firstsecond //伪类 :first-child 添加样式到第一个子元素如果我们不使用...
1 2 3 4 5 test1 6 7 #container { 8 background-color: #f1f1f1; 9 width: 80%;10 margin: 20px auto;11 }12 .item {13 float: left;14 color: white;15 text-shadow:0 1px black;16 margin: 10px 20px;17 padding: 20px;18 }19 #container > .item:nth-child(1) {20 background-color: #F00080;21 }22 #container > .item:nth-child(2) {23 background-color: #D8AAD8;24 }25 #container > .item:nth...
为什么设置z-index属性无效: z-index属性生效需要特定的条件才可以的，否则当然不会生效。下面简单介绍两种不生效的情况。 一.对象没有应用绝对定位或者相对定位: 对象必须应用绝对定位或者相对定位之后，z-index属性才有生效的可能。 二.浏览器兼容性导致: 例如，在IE6浏览器下select下拉框无法被div所覆盖，尽管div对象的使用绝对定位且z-index属性值设置的足够大还是不行。 解决方法可以参阅IE6浏览器下div无法遮盖...
前言 CSS3中出现了几种关于背景图片的新属性：background-origin、background-clip、background-position等.之前大致了解了下，但是background-origin与background-clip的区别尚不清楚。就google了一篇，发现不错，翻译下来吧。 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, CSS3 new features! ps: 原文在线代码演示已由codepen.io 搬至runjs.cn background-posi...
定义和用法： box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 默认值：content-box; 继承性：无； css版本：css3 语法：box-sizing: content-box | border-box |inherit; 属性值说明： content-box 默认值;由css2.1规定的宽度高度行为;宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。 可以理解为：对元素设置border和padding最终会改变元素的width,h...
position有五个值：static、relative、absolute、fixed、inherit。 static 是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页制作时，没有指定 position，也就表示使用 static。 relative 没有脱离布局流，此时可以使用 top、right、bottom、left 属性。 top 和 bottom 共存时，使用 top 值，忽略 bottom 值； left 和 right 共存时，使用 left 值，忽略 right 值； relative 是相对位置，指相对于...
热火朝天的css3无疑吸引了很多前端开发者的眼球，然而在css3中的动画属性则是新功能中的主打招牌，说到css3的动画属性不得不让人想起这三个属性：Transform?Transition?Animation。 transform属性虽然看起来可以实现动画的效果，但本质其实是静态的，说白一点其实就是一个图形的变形工具；而transition属性是一个简单 的动画属性，操作起来非常的简单；在这里主要为大家介绍Animations属性，这是个名副其实的动画属性，虽然官方也没...
原文：A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。 很多的设计师和开发者发现Flex布局很容易使用，它定位元素简单因此很多复杂的布局能够用很少的代码实现，引领更简单的开发过程。Flex布局的...
这里把CSS3的新属性单独拿出来讲解一下： border-radius 属性用于创建圆角 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-shadow 用于向方框添加阴影 div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;} border-image 属性允许您规定...
What? image-rendering作为现阶段还处于实验性质中的css属性，他的作用是在浏览器对图片进行比例缩放时，设置其缩放使用的算法，从而来得到我们最终想要的图片结果。而且这个属性可以应用于img，canvas和background-image中。 Note 由于该属性未得到所有浏览器的支持，本文直接在文章里应用该属性，所以阅读此文时请使用最新版本的浏览器 Usage image{ image-rendering:auto;} 其可选的值有： auto使用默认算法，即...
.BtnOkay /* 黄 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; background-color: #FBBB13; background-repeat: no-repeat; background-position: 98% 48%; cursor: pointer; } .BtnLogin /* Steam绿 */ { font-weight: bold; font-family: "Microsoft JhengHei"; color: #FFFFFF; border: 0px; ...
最近在工作中总是要求IE8兼容CSS3属性，在网上搜了搜主要是引入了一个htc文件（ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不多，具体差异值得探讨） 下载地址：https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性： 1.border-radius圆角 CSS代码如下： .pie_radius{ width:250px;height:250px; background-color:#34...
最近看了一篇总结ie常见bug的文章，里面提到ie多数的bug源于她的特有属性：hasLayout。这个属性以前也了解过一点，但没有深入去理解，于是查阅了一些相关的资料，现在在此来对这个属性作一下总结。 一、hasLayout的定义。 这里我就不一一敲了，直接复制百度的咯。 在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLa...
opacity属性的定义和用法: 检索或设置对象的不透明度。 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果。 对应的脚本特性为opacity。 语法结构: opacity: 取值: :使用浮点数指定对象的不透明度。 值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。 浏览器支持: （1）.IE浏览器支持此属性。 （2）.火狐李蓝旗支持此属性。 （3）.谷歌浏览器...