《HTML教程》_第3章 页面布局和响应式.pptxVIP

Ajax作为一种客户端异步请求技术，当然离不开网页的布局与设计。网页布局是Web应用是最“重要”的部分，是客户直接看到的界面，直接决定项目的“生死”。用户不会品味项目结构的巧妙，也不会看代码是否规范，他所关心的只是界面是否“好看”，使用是否方便。所以，在实际应用中，只要是Web应用，网页布局是十分重要的。

随着计算机技术的飞速发展，出现了各种计算设备，比如智能手机平板电脑等等，它们的显示设备千差万别，即使同一品牌的手机不同型号也相差甚远，那我们的界面该怎样设计呢？难道是为每一种设备重新设计一个界面？这肯定是不行的。解决这个问题就会用到响应式设计，它能够根据显示设备的不同，自动适应设备进行显示。

3.1页面布局

网页布局可以使用div+css实现，也可以实用表格实现，现在HTML5新增了许多有意义的布局元素，完全可以使用这些布局元素实现网页布局了。

本节我们将通过一个例子，通过以前学过的知识，完成一个系统的界面设计。设计效果如图3-1所示。

图3-1考务报名系统界面

这里的阴影（文字阴影和边框阴影）和圆角完全由CSS3来进行实现，没有实现任何图片。而且可以实现点击链接自动选择选项卡的功能，也是完全由CSS3实现，没有一点JavaScript代码。

3.1.1网页基本结构

网页基本结构是用户看到的内容部分，不包含任何样式，只有一些HTML布局元素和内容元素。

考务报名系统的网页结构如清单3-1所示。

这个结构比较简单，从上到下依次是：页头、导航条、Tab页标签、显示容器和页脚组成，分别使用了HTML5的header、nav、section和footer布局元素。

使用div也可以达到同样的效果，但HTML5赋予了它们真正的语义，使它们不再是一个个的div，而是变成了意义明确的标记。

Footer中的copy为HTML的特殊字符©，关于HTML特殊符号请参阅文献[11]

将清单3-1中的代码保存为网页，在浏览器中观察效果，如图3-2所示。

图3-2考务报名系统基本结构的显示效果

从图3-2中看不出和图3-1有任何联系，下面我们通过CSS属性制作图3-1看到的效果。

由于前面没有系统讲述CSS各属性的有法，现在把用到的属性一一学习一下。其他没有用到的，大家可以查阅CSS手册或者相关的网站即可。

3.1.2制作页头

我们需要制作的页头是这样的：

观察这幅图片发现它由如下的样式：

★圆角矩形；

★背景为对角线渐变；

★边框有阴影；

★文字红色且字体较大；

★文字有阴影。

HTML5还没出现的时候，这样的效果必须以图片的方式呈现，即把它做成一幅图片，作为容器的背景。

现在好了，它只是个简单的header元素，只需要控制它的样式就好了。下面我们制作这几种效果。

用到的CSS属性如表3-1所示。

要制作颜色的渐变效果，还需要用到linear-gradient或者radial-gradient，它们的语法比较复杂，由于我们不是主要论述CSS，所以这些属性的语法就不再详细解释，有兴趣的读者可以参考CSS3相关书籍或网站。

由于CSS3目前各浏览器支持并不相同，所以CSS3的有些属性要加上前缀，随着CSS3规范的统一，这些差异终将消失，但现阶段还必须使用，下面介绍一下：

-ms-：兼容IE浏览器；

-moz-：兼容Firefox浏览器；

-webkit-：兼容Safari和Chrome浏览器；

-o-：兼容Opera浏览器。

注：如果浏览器没有显示我们制作的效果，请在对应的属性前加上相应的前缀。

首先，我们约定网页中所有元素的样式：

body{

margin:10px;

}

第二，制作字体效果，我们选用48px大小，比加粗更粗一些的的字体，颜色为鲜艳的枣红色，CSS代码如下：

font-size:48px;

font-weight:bolder;

color:#D02090;

第三，制作文字阴影。制作文字阴影使用text-shadow属性，我们制作的阴影水平方向上5像素，垂直方向上5像素，模糊距离5像素，颜色为暗灰色，CSS代码如下：

text-shadow:5px5px5pxdarkgray;

（text-shadow属性说明如下图：）

第四，制作从左上到右下的渐变式背景，制作背景需要background-image和linear-gradient两个属性，CSS代码如下：

background-image:-webkit-linear-gradient(tobottomright,Aqua,GreenYellow);

background-image:linear-gradient(tobottomright,Aqua,GreenYellow);

上面的代码中-webkit-linea