网页遇到一些小问题_ie浏览器网页[通俗易懂]

网页遇到一些小问题_ie浏览器网页[通俗易懂]开年就马不停蹄的忙起来了,听说后续有20个网址要做,此刻我的内心是崩溃的,同时也有点期待,毕竟我的工作经验太少了,能在工作中得到锻炼是我一直想做的事情。好了,第一个页面已经做完了,中间出现了几个问题,记录一下,希望下次遇到类似的问题可以快速的over掉。1.客户要做一个流动的文字效果,我当时第一

大家好,欢迎来到IT知识分享网。

开年就马不停蹄的忙起来了,听说后续有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;

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/29686.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信