在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看到的结果,并不是从上到下排列显示,而是和计算机显示器访问的布局相同.为什么会这样?因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的,因为很多网页是按照800px左右标准制作的,所以Safari浏览器默认按照980px的宽度进行显示,就可以正常显示绝大…
在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML5大力的推广与应用,又出现了各种各样的HTML5平台,现在已经是一个富含多元化的市场机会,它强大的Web应用开发能力才让人们不得不转换固有的互联网思维,寻找新的网页解决方案.开始由技术应用转向整个行业的良性生态化,而且还存在巨大的上升空间.现在HTML5会从广告行业逐渐往游戏行业.广播电视行业和媒体…
基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1  响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在响应式布局的页面上传送最佳的.前后联系的图片尺寸.如果是背景图片,我们可以准备多张不同尺寸的图片,然后在各自的媒体查询样式中使用对应的图片背景.再结合min-width.min-height.max-width.max-height等样式属性来限制窗口最小或最大宽度和高度,模拟响应式及流式布局,从而…
在上例中,我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”.例如,width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中.通过这个标签属性,我们可以很方便地在不同的设备下实现丰富的界…
在学习Media Queries模块前,先通过一个响应式布局实例来了解一下响应式布局和Media Queries模块的简单应用.在本例中,使用HTML5的结构元素定义了5个盒子.当浏览器窗口尺寸不同时,页面会根据当前窗口的大小选择使用不同的样式.当窗口宽度在1000px以上时,页头和页脚分别在页面的最上方和最下方整行显示,中间主体分为三列显示:当窗口宽度在640px以上.1000px以下时,中间的第三列隐藏:而当窗口宽度在640px以下时,5个区块从上到下排列显示.代码如下所示: 在本例中,通过…
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架.HTML5新增表单元素有<datalist>.<keygen>和<output>.<datalist>元素规定输入…
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类型更加的丰富了,主要有transform(变换).transition(过渡)和animation(动画).不仅在类型上更加多样,还可以对特定的属性设置transition,所以在以后面对更多的脚本开发者,会更加的方便简单.对于CSS3的特性,圆角.文本阴影.盒模型阴影和渐变是网页制作更加便捷与网页…
HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于头部的内容都不会在网页上直接显示,而是通过另外的方式起作用.在<head>标记中可以使用的标记不多,包含一些常见的如<title>.<base>.<link>和<meta>等标记.<head>与</head>之间必须有<…
第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用户在操作界面上有互动效果.做HTML5开发主要使用JavaScript语言,JavaScript是一种在客户端广泛使用的脚步语言,在JavaScript当中为我们提供了一些内置函数.对象和DOM操作,借助这些内容我们可以来实现一些客户端的特效.验证.交互等,使我们的页面看起来不那么呆板.必要时还要学…
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线…