CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性! animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）： 之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。 <button onclick=”fadeIn()”>显示</button> [...]

在一个外贸购物网站的制作过程中，遇到了Auto值的Transition Bug问题，各种搜索尝试之后得到解决方案 当我们需要给width、height等值设置Transition（过渡）时，如果我们的起始状态（或结束状态）为auto时，Transition就会失效。 由于二级菜单数量不定，因此ul.sub高度不定，我们需要为其赋予auto值(即根据内容高度自由扩展)，这时的Transition（过渡）就不灵了。 hover状态会起效，但是Transition失灵。 该怎么解决呢？这时我们需要尽可能的绕过auto值，可以通过使用max-height绕过height:auto值。当然，width可以使用max-width。 即 首先我们需要确保max-height的值超过所有项中的最大值，也就是说一定要罩得住。 其实这里的transiton是从0到200px之间过渡，需要赋予合适的过渡持续时间、合理的max-height值以取得最佳的效果，可以根据实际情况来设定不同的值！ 如果有更好的方法，欢迎交流！

select是下拉列表菜单，option是里面每个项目的值，给select标签的option内容加上超链接，也就是当选择某个option内容的内容时，能跳转到该页面，如何给select标签的option内容加上超链接？这是有多种方法可以实现了，我只介绍一种最简单，方便的方法，直接根据onchange属性使之跳转。 <select> <option value=””>&mdash; Primary Nav &mdash;</option> <option value=” ” [...]

网上下载的字体格式一般为.TTF，如何将.TTF转换成.EOT，.SVG，.WOFF等格式的字体呢？ fontsquirrel是一个可以在线转换字体格式的网站，也有比较多的特殊字体可以免费下载，转换字体网址http://www.fontsquirrel.com/tools/webfont-generator 上传你需要转换的字体文件 可根据你的实际情况勾选BASIC，OPTIMAL，EXPERT 点击右下角紫色的按钮，下载转换好的字体即可。 下载后的字体包含了各种格式的字体，如下图所示 CSS调用方法： @font-face { font-family: [...]

我们知道，中文站字体一般使用的是宋体和微软雅黑，英文站的是Arial，可是偶尔为了美观，我们需要使用一些特殊的字体，这样有些客户如果没有装该特殊字体，那么就会看不到该效果，那么我们如何在网页html中加入特殊字体呢？ 1.做成图片插入网页中 如上图红色框部分 这种方法不适合在网页中使用过多，因为图片不利于优化，且图片太多对网站加载速度也会有一定的影响。 2.下载需使用的特殊字体 不同的字体格式，适应不同的浏览器 常见的   .TTF或.OTF，适用于Firefox 3.5、Safari、Opera SVG，适用于Chrome、IPhone [...]

px、pt、em 这些css 文字大小单位对于我们来说并不陌生，但是我们最常用是通常是px，但如果网站需要自适应各种不同的浏览器尺寸，我们就得改变使用px作为字体大小单位的习惯，这是为什么呢？ 因为em是相对单位，网页中的文字能放大和缩小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。 下面我们来看看两者的区别,使用px作为字体单位 正常状态： 屏幕缩放以后： 正常状态和缩放以后的字体大小没有任何变化。 使用em作为字体单位 正常状态： [...]

display:inline-block和float:left都可以使元素向左浮动，那么什么时候该用display:inline-block，而什么时候该用float:left呢？ 第一，如果需要元素水平居中的时候，用display:inline-block，如下图 红色框部分是用ul li架构起来的，如果把li使用float:left，那么text-align: center就会失效，所以需要居中时，一般使用display:inline-block 2.需要元素垂直水平对齐时使用display:inline-block 这个是li float:left的效果图，由于高度不一样，将其余元素挤下去了。 下面是li display:inline-block的效果图，第二行仍然对齐，其余处留白。 [...]

在外贸网站设计过程中，为了网站的美观或者部分产品的需要，我们会为网站添加一个背景，有时候是小图片平铺，有时候是一整张大的背景图片，由于浏览器尺寸、分辨率的原因，如果背景是一张大图，那么在浏览器尺寸、分辨率不同的情况一下，呈现的效果也会不一样，为了保证好的效果，我们需要让背景图片自适应浏览器窗口大小，即不论浏览器尺寸、分辨率的大小如何，图 片都能占满整个屏幕。下面我们来看看代码： body {background:url(../xxx.jpg);filter:”progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’)”; -moz-background-size:100% 100%;background-size:100% 100%; } 正常状态效果： 浏览器窗口缩小后： [...]

px、em这两个字体单位我们都不陌生，对于rem这个字体单位可能有很多人并不了解，其实这是css3新增的一个字体单位，那么这三个字体单位有什么区别，各有什么特点呢？下面我们来看一下！ rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 px也即像素 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 [...]

一般背景图片平铺我们都会直接使用代码repeat-x或repeat-y，这个可以运用到纯色背景或是渐变有规律的背景，如果网站中需要圆角的背景图片，且可随着宽度自由拉伸，那么我们应该怎么做呢？ 常规的方法都是直接把图片用ps做好，宽度也定好了，然后在css中直接插入背景图片，但是在宽度不一定的情况下，就不能这么做了。 <div> <b></b><b></b><b></b><b></b> <div> <h3>圆角图片</h3> <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。</div> </div> </div> /*圆角框通用设置样式，如果要运用多个不同颜色，以下部分不用重新变化——————————–*/ [...]

随着智能手机的普及，多数人也不再仅仅用电脑来浏览网页、搜索东西，现在有手机，平板电脑等等。所以原来固定宽度的设计在手机、平板上浏览体验并不好，因此我们的网页需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果、提供更好的用户体验，下面我们来看看： 正常效果 比较窄的效果 最窄的效果 当屏幕分辨率大于1024px时，网页宽度将会是960px。通过Media query来检验屏幕分辨率，如果小于960px，页面宽度将会用自适应来取代固定宽度；如果小于600px，主题和边栏将会撑满屏幕并一列显示。当小于480px时，主题和左侧栏会在一栏显示 代码就不贴了，太多 在网页代码的头部，加入一行viewport元标签。 <meta name=”viewport” [...]

外贸网站建设过程中，我们最常用的英文字体就是Arial, Helvetica, sans-serif,通常情况下默认的字体也是这些，但是现在越来越多的英文网站客户要求使用非常规字体，这时候就需要我们用CSS来改变整个网站或是某些地方的字体，但是在运用这个CSS的时候需要同一个字体的多种不同格式如ttf、eot、woff、svg，需要将原有的字体转换成这四种没的格式进行加载。我们知道字体通常的格式是ttf或是otf，其他几种是需要我们手动转换的，下面我们就来看看几个不同的在线转换工具： Online Font Converter 可转换成各种不同的格式，但是上传的字体不能太大，最好在几十K左右，如果字体太大，是转换不了的 Font Squirrel 可批量选择要转换的字体格式，但是对字体大小也有要求，一般不要超过1M,否则是没办法转换的，转换的速度有点慢，需要等的时间比较长！ [...]

Div ul透明css样式代码 background-color:#935637; filter:alpha(opacity=50);适用于IE6/7/8浏览器 -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;适用于w3c标准，即适用于火狐，谷歌，苹果等等 一般一起写就能适用于各种浏览器 [...]

如果网页要用到五角星，我们通常想到的最直接方法是在Ps里面绘制一个五角星再存成图片插入网页中，下面我们就来看看如何通过CSS绘制五角星： 网页代码： CSS样式 #star-five { margin: 50px 0; position: relative; [...]