幼网页面中遇到的问题及解决方法

开年就马不停蹄的忙起来了，听说后续有20个网址要做，此刻我的内心是崩溃的，同时也有点期待，毕竟我的工作经验太少了，能在工作中得到锻炼是我一直想做的事情。

好了，第一个页面已经做完了，中间出现了几个问题，记录一下，希望下次遇到类似的问题可以快速的over掉。

1.客户要做一个流动的文字效果，我当时第一反应是css3 animation动画来做，但是毕竟是pc端的网页，考虑到兼容性的问题，我放弃了css3这个方案（可以试一下，毕竟手机移动端可以用）.第二个想法是做成gif图片，我尝试用ps去做，但是效果很不理想，于是我去找原版网页的原型，老网页是用flash做的，我是一点flash都不会，现学现卖来不及了。我想到了js，于是我用jquery的animate()来完成了这个效果，写完之后也是云里雾里的，运动的轨迹到现在还是不太明白，这是我今后需要去学习的地方。ps：慕课网是一个好地方，js动画这个课程很棒，给了我多一条思路。

2.图片格式有png jpg gif两种，在做一个透明度变化时，使用png图片在ie8下会出现黑边：PNG加透明opacity在Jquery动画中出现黑边，jpg图片不会出现这种情况，当时困扰了很久啊，后来一百度找到了解决办法，在img表签外面在加一个div,代码如下：

.warp { 
filter:alpha(opacity=20); 
} 
//这里是单独对IE678设置的样式，chrome等其他高级浏览器还是照样用background引用 
.img24 { 
background:none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img24.png'); 
width:100px; 
height:100px; 
}

 

3.select美化问题。select下拉框的美化我碰到过好几次了，这一次终于有一个号的解决方法了。代码如下：

<div class="styled-select">
                             <span class="cur-select">-- 教育网站 --</span>
                             <select>
                             <option>--教育网站--</option>
                             <option>教育网站</option>
                             <option>教育网站</option>
                             </select>
                     </div>

下拉框长什么样由span决定，可以在css里面写。 select的appearance设为none,opacity设为0.

4.vertial-align这个属性设置一下，能起到非常好的效果。比如2个div,将他们的样式设为display:inline-block;在加上width,他们会排在一行，不需要使用浮动，但是当在里面加文字内容的时候，会出现错位的情况，可以设置vertial-align:top;