随笔分类 - css
摘要：transition-duration是属于css3的属性，用来指定对象过渡的持续时间。为了兼容不同的浏览器，需要加上相应的前缀，有以下几种写法，我们设定持续时间为3秒：selector{
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;
} 这个属性怎么用来制作动画呢？既然是动画， 肯定有个初始状态和结束状态，那么我们只需要指定这两个状态就可以了。首先，我
阅读全文
摘要：一、最近在学习linux，当然得自己装了linux系统，我在win7下通过虚拟机安装了fedora.我也是个菜鸟，自行百度，谷歌，帮你搞定。虚拟机使用的是：vmware，这个直接百度就能查到。fedora的下载地址：http://mirror.karneval.cz/pub/linux/fedora/linux/具体的安装方法，请参考：1.http://wenku.baidu.com/view/7894a95677232f60dccca101.html2.http://wenku.baidu.com/view/775820f74693daef5ef73df2.html二、视差学习，最近视差网页
阅读全文
摘要：使用css来制作三角，在日常用得较多。恰好这几天项目中有用到，之前只是从网上copy下来代码直接用，但是今天在用的时候遇到一些问题，于是借此机会把这个css绘制三角好好研究下吧。我们分别写一个<div>,<s>,<span>标签，并给上下左右四个border赋值不同的颜色，看看是什么样子：html：<div class="triangle"></div> <p> <s class="triangle"></s> <span class="tri
阅读全文
摘要：在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。首先，我们创建一个简单的table，代码如下：<table class="my-table"> <tr> <td>first row</td> <td>first row</td> </tr> <tr> <td>s
阅读全文
摘要：在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。首先，我们创建一个简单的table，代码如下：<table class="my-table"> <tr> <td>first row</td> <td>first row</td> </tr> <tr> <td>s
阅读全文
摘要：今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例：#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}</style><
阅读全文
摘要：不知是哪位牛人发明了用css画三角形这个牛逼的方法，后来这个技术一直流行到现在，的确很好用。在日常项目中也经常会用到这个技术，但是今天在使用的时候，在IE8/9下，使用text-indent的时候会有问题。先看看实例代码，我们在.right这个div的border上面画一个三角形。html代码如下：<div class="right"> <s><i></i></s> <p>画个三角形</p></div>css代码如下：.right { width: 330px; height:
阅读全文
摘要：今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例：#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}
.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}
</style>
&
阅读全文
摘要：转载自：http://www.hujuntao.com/archives/ie-remove-the-link-to-the-dotted-rectangle-several-ways.html虚线框简直就是个多余的东西，上一篇教大家怎么去除Firefox中链接和按钮虚线框，今天叫大家去掉去除IE中链接的虚线框。方法一：利用javascript的onfocus事件，实现如下：Html代码<a href="http://www.hujuntao.com/" onfocus="this.blur();">设计蜂巢</a>如果引入了jQ
阅读全文
摘要：要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于 haslayout。haslayout是WindowsInternetExplorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元 素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout的 属性，属性值可以为true或false。当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局（layout）要想更好的理解css
阅读全文
摘要：转自蓝色理想：http://www.blueidea.com/tech/site/2006/3698_5.asp英文原文在此：http://www.satzansatz.de/cssd/onhavinglayout.htm文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。引用一段来自Dean Edwards的评价：I recommend that every CSS designer and DOM scripter read this. Unders
阅读全文
摘要：在写css代码的时候，经常需要对ul,ol等标签做处理，去掉列表前的项目符号，或者更换成其他符号。一般的用到的样式有以下两种：ul,ol { list-style:none;
}ul,ol { list-style-type:none;
}这两种写法都生效，但当时却不知道二者的区别是什么，有时候甚至怀疑自己是否记错了，今天看css相关书籍的时候，刚好看到这一部分，于是把这个简单却容易混淆的地方记录一下。list-style是对列表标签的缩写，而list-style-type是其中的一个属性，而list-style一共可以包含三个值，即:list-style:list-style...
阅读全文
摘要：最近做一个活动页面，页面中有一个按钮，如果抠图处理单独作为按钮图片的话，效果不是很好，于是想将整个图作为背景，然后在设置一个<a>标签作为按钮通过绝对定位使其与图片中的按钮重合，从而达到点击按钮的效果。一切在chrome和FF下都很顺利，又在IE下栽了跟头。因为在IE下不会出现<a>标签的hover样式，也无法点击。若果将<a>设置背景色，则IE下就可以识别<a>了，但是又没有透明的背景色，于是想到用滤镜，但是IE6又无法兼容。后来还是只能将图片作为背景来设置，而不是通过<img>标签来放图片，就不会出现这些问题了。之前是用的<
阅读全文
摘要：对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下：http://www.fantxi.com/demo/html/browser_detector.html 然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera..
阅读全文
摘要：其实之前做日常项目的时候，发现了font-size设置在IE6下带来的问题，然后去查了下，是由于IE6下div中的默认font-size值是12px，这篇博文有讲到，IE6中设置div的最小高度 ，然后，我自己也写个例子测试一下。仅用IE6和chrome进行对比测试。首先在页面中定义两个div标签，宽度*高度为200px*30px<divid="Layer1">div1</div><divid="Layer2">div2</div>然后设定其样式，如下：#Layer1{position:absolute;w
阅读全文
摘要：IE6下font-size值设置与否对元素height,background产生的影响(一) 日前所做的一个小项目中，碰到一个IE6的bug，情况如下： 我使用一个<p><span>文字文字</span><span class=”picture”></span><span>文字文字</span></p>来描述一段文字，在这段文字中，还有一些小的图片穿插其中。其中我将小图片通过设置span.picture的background来实现。 html代码如下：<pclass="flow-nu
阅读全文
