随堂笔记

需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面。现在需要要求点击球队名字要跳转到球队资料库页面。 这样就会产生了a标签的嵌套。 但是总所周知a标签是内联元素(inline element) 这样在内层a标签加一层object标签嵌套,可以解决了a标签嵌套的问题了。这个办法在火狐和谷歌、IE9及以上是没问题的。但是IE8及以下就会有问题,因为IE8不支持object标签,它会将object解析成一个对象a标签的内容显示不出来。所以就有了下面的第二种方案。 IE10、IE11、谷歌怎样兼容a: 第一种方法、浏览器设置兼容模式 打开IE,点击“工具”菜单,选择“兼容性视图设置”,勾选“在兼容性视图中显示所有网站”选项 第二种方法、在使用编辑器的网页的 下面加 css样式部分 .topsinput,.topsinput2{ margin-right:2px; border:1px solid #fff; border-left:1px solid #909093; border-top:1px solid #909093; font-size:12px; color:#6e6f73; background-color:#f0f1f3; padding-top:4px; padding-left:3px; width:160px;} .topsinput2{ color:#000;} onmouseover 事件会在鼠标指针移动到指定的对象上时发生 1.鼠标触到图片跳出窗口 mouse 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。 1. 老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 2. 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。 3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 @import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如: main.css ———————- @import “sub1.css”; @import “sub2.css”; sub1.css ———————- p {color:red;} sub2.css ———————- .myclass {color:blue}这样更利于修改和扩展。 大致就这几种差别了,其它的都一样,从上面的分析来看,还是使用link标签比较好。标准网页制作加载CSS文件时,还应该选定要加载的媒体(media),比如screen,print,或者全部all等。 提示:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。
posted @ 2017-05-15 21:21  张学亮  阅读(151)  评论(0编辑  收藏  举报