资讯专栏INFORMATION COLUMN

用CSS3 transition属性实现淡入淡出轮播图

姘存按 / 2052人阅读

摘要:首先,巧妙的使用这一标记,将游览器从所有情况中分离出来。元素不能用作语义用途以外的其他目的。空白段落元素并非用于跳行。当浏览器支持时,它们会自动地呈现出来并发挥作用。

Html


1、Html5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区别HTML和HTML5?


HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。


拖拽释放(Drag and drop) API

语义化更好的内容标签(header,nav,footer,aside,article,section)

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API


getCurrentPosition() 方法来获得用户的位置


1.检测是否支持地理定位

2.如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。

3.如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

4.showPosition() 函数获得并显示经度和纬度

本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage的数据在浏览器关闭后自动删除

表单控件,calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

移除的元素

纯表现的元素:basefont,big,center,font, s,strike,tt,u;

对可用性产生负面影响的元素:frame,frameset,noframes;

HTML5新标签兼容:


IE8/IE7/IE6支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,

浏览器支持新标签后,还需要添加标签默认的样式:


当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

首先利用条件注释判断是不是IE9之前版本,如果是就执行js。先把所有新标签写入e数组中,然后遍历整个数组,并创建副本。


该脚本已经托管在Google Project Hosting上,你可以直接外链这个脚本:


 另外,这段脚本需要放在页面起始的部分,最好是head中,不要放在底部。这样IE在解析页面标签之前就会先运行这段代码。


如何区分: DOCTYPE声明新增的结构元素功能元素

2.目前主流的浏览器内核有哪些,有哪些常见的兼容性问题


Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

兼容性问题:


png24位的图片在iE6浏览器上出现背景


解决方案:做成PNG8,也可以引用一段脚本处理.

浏览器默认的margin和padding不同


解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。

IE6 双边距 bug:在 IE6 下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。


#box{ float:left; width:10px; margin:0 0 0 10px;}

这种情况之下 IE6 会产生20px的距离


解决方案:在float的标签样式控制中加入 display:inline; 将其转化为行内属性。( 这个符号只有 IE6 会识别)

渐进识别的方式,从总体中逐渐排除局部。


首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。

接着,再次使用 "+" 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

.bb{

background-color:#f1ee18; /所有识别/

.background-color:#00deff9; /IE6、7、8识别/

+background-color:#a200ff; /IE6、7识别/

_background-color:#1e0bd1; /IE6识别/

}


IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性


解决方法:统一通过getAttribute()获取自定义属性

IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性


解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示


解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决

超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了


解决方法:改变CSS属性的排列顺序 L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

怪异模式问题:漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法:`


上下margin重合问题:ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。


解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。

ie6对png图片格式支持不好


解决方案:引用一段脚本处理

3.怎么存储和读取localstorage


存值setItem localStorage.setItem("a","1"); //存储的值为"1"

取值getItem var a3 = localStorage.getItem("a");//获取a的值

http://www.cnblogs.com/yunkou...


4.描述一段语义的html代码


(HTML5中新增加的很多标签(如:


等)就是基于语义化设计原则)

< div id="header">

    < h1>标题< /h1>

            < h2>专注Web前端技术< /h2>

                    < /div>


                        语义 HTML 具有以下特性:

                        文字包裹在元素中,用以反映内容。例如:

                        段落包含在

                        元素中。

                        顺序表包含在


                        元素中。

                        从其他来源引用的大型文字块包含在

                        元素中。

                        HTML 元素不能用作语义用途以外的其他目的。例如:

                        包含标题,但并非用于放大文本。

                        包含大段引述,但并非用于文本缩进。

                        空白段落元素 (

                        ) 并非用于跳行。

                        文本并不直接包含任何样式信息。例如:

                        不使用 或

                        等格式标记。

                        类或 ID 中不引用颜色或位置。

                        5.99%的网站都需要被重构是那本书上写的?


                        网站重构:应用web标准进行设计(第2版)

                        6.什么叫优雅降级和渐进增强?


                        优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。(Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)

                        渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时,它们会自动地呈现出来并发挥作用。)

                        区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。


                        7.页面重构怎么操作?


                        编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。

                        页面重构就是根据原有页面内容和结构的基础上,通过div+css写出符合web标准的页面结构。

                        具体实现要达到以下三点:


                        结构完整,可通过标准验证


                        标签语义化,结构合理


                        充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化


                        8.语义化的理解?


                        直观的认识标签,对于搜索引擎的抓取有好处

                        html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

                        在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

                        搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。

                        使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

                        9.HTML5的离线储存?


                        localStorage 长期存储数据,浏览器关闭后数据不丢失;

                        sessionStorage 数据在浏览器关闭后自动删除。

                        10.Document.write和innerHTML的区别


                        document.write是重写整个document, 写入内容是字符串的html

                        innerHTML是HTMLElement的属性,是一个元素的内部html内容

                        document.write只能重绘整个页面

                        innerHTML可以重绘页面的一部分

                        1、write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中

                        ;innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

                        2、两者都可向页面输出内容,innerHTML比document.write更灵活。

                        当文档加载时调用document.write直接向页面输出内容,文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write()

                        方法:一是在使用该方在文档中输出 HTML,二是在调用该方法的的窗口之外的窗口、框架中产生新文档(务必使用close关闭文档)。

                        在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记,在写模式下,innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

                        3、两者都可动态包含外部资源如JavaScript文件

                        通过document.write插入


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91188.html

相关文章

  • CSS3 transition属性实现淡入淡出播图

    最近想自己写下播图,在网上发现一个网友CSS transition属性实现轮播,赶脚超简单哦,自己学习了后整理如下。(找不到原网址了-.-...就不贴了...)(如果不了解transition,先去这里(点我,点我)学习下)思路图片淡入淡...

    Heier 评论0 收藏0
  • 基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果

    ...eft: 0; top: 0; width: 100%; height: 100%; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; -o-transition: opacity 2s linear; transition: opacity 2s linear; opacity:0; filter:alpha(opacity=0); } .fadein{ ...

    XUI 评论0 收藏0
  • React动画

    ...增与减以及DOM节点(或属性)的变化.其中React提供的ReactCSSTransition能够帮助我们便捷的识别出增加或删除的组件,从而让我们能够专注于更加简单的属性变化的动画.2.这里统一将缓动函数通过js实现的动画称作js动画,缓动函数由css提...

    ThinkSNS 评论0 收藏0
  • 移动端布局与适配

    ...举了几种解决的办法。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。然而1px在不同的… 如何搭建移动端CSS样式库 在搭建公司的样式库时自己的一点整理,中间遇到了很多疑惑,也解决了很多疑...

    Clect 评论0 收藏0
  • 原生js + css3 + 定时器 无缝播图(部分)

    ...function () { this.times(); }; /*在原型上添加一个添加 transition 方法*/ Banner.prototype.addTransition= function () { this.imageBox.style.transition = "transform 0.2s"; this.imageBox.style.webkitTransition = "all 0.2s"; }; /*在原型上添加一个 移除transit...

    IamDLY 评论0 收藏0

发表评论

0条评论

姘存按

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<