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

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中的©为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-linear-gradient是兼容webkit核心的浏览器，与linear-gradient是一样的属性，只不过linear-gradient是通用的，而-webkit-linear-gradient是针对webkit核心的浏览器。tobottomright说明方向是向右下角的，即从左上到右下的渐变，Aqua是起始颜色，GreenYellow是终止颜色。需要说明的是这是最简单的声明线性渐变的方式，更复杂的方式参见文献[10]的详细说明，也可参考其他CSS手册或书籍。第五，制作边框阴影和圆角，需要用到border-shadow和border-radius属性。CSS代码如下：box-shadow:10px10px5px#888888;border-radius:10px;box-shadow和text-shadow属性值类似，也是水平阴影10像素、垂直阴影10像素，模糊距离5像素，颜色为浅灰色。border-radius声明和border值声明一样，这里一个值表示四个角的弧度都是10像素。这个值也可以使用百分数表示。现在都制作好了，打开浏览器观察一下效果：似乎不太对劲！怎么办呢，用我们的盒子模型呀。设置一下padding就可以了：padding:20px;完整的页头代码如下：header{ font-size:48px; font-weight:bolder; color:#D02090; text-shadow:5px5px5pxdarkgray; background-image:-webkit-linear-gradient(tobottomright,Aqua,GreenYellow); background-image:linear-gradient(tobottomright,Aqua,GreenYellow);box-shadow:10px10px5px#888888; border-radius:10px;padding:20px;}页头已经制作完毕，下面我们开始制作导航菜单。3.1.3导航菜单

先来看一下导航菜单的结构：<!--导航条--><nav> <ul> <li><ahref="#selftest">自学考试</a></li> <li><ahref="#cet4">大学英语四六级</a></li> <li><ahref="#pth">普通话考试</a></li> <li><ahref="#cetspc">专四专八</a></li> <li><ahref="#admin">系统管理</a></li> </ul> </nav><!--Tab页标签--><sectionid="tab"> <spanid="selftest">自学考试</span> <spanid="cet4">大学英语四六级</span> <spanid="pth">普通话考试</span> <spanid="cetspc">专四专八</span> <spanid="admin">系统管理</span></section>导航菜单实际上有两部分组成一部分是超链接，即真正用于导航的部分；另一部分是为了说明当前显示内容的标题。导航链接由nav元素表示，其中包含了一个无序列表，每一列表项为一个超链接。在指定样式时就需要分清是对nav，ul，li还是a指定样式，虽然样式可以继承，但有些关于盒子的属性指定的元素不同，样式可能相差甚远，大家可以通过修改一些属性来观察一下。第二部分为内容标题，它要随着点击超链接的不同而显示不同的标题，这就需要用到HTML5的:target伪类。首先，指定nav的样式。Nav元素在header元素的下方，而表示标题的section元素在它的下方，都需要保持一定的距离。这可以通过margin属性来指定，而且只需要指定上下外边距即可，CSS代码如下：nav{ margin-top:30px; margin-bottom:35px;/*与#tab中的margin出现合并*/}这里需要说明的是，下外边距与下面的section元素的外边距会出现合并，必须大于等于section的上外边距。第二，制作横向菜单。默认情况下，所有导航链接垂直排列，我们要改变这种默认的情况，有两处办法，一种是使用浮动，但这会影响后面元素的排序，因为元素浮动后脱离标准流，其他元素看不到它的存在，在控制元素位置和显示效果上增加了难度。另一种方法是把li元素变换成行内元素，这不牵涉浮动，对后续元素无影响。所以，这里我们采用了后一处方法，即指定li为行内元素，CSS代码如下：navli{ display:inline;/*制作横向菜单*/}第三，制作导航超链接的效果。导航超链接为矩形，背景为径向渐变，无下划线，鼠标悬停和离开样式会发生改变，具有一定的动态效果，而且根据用户的选择显示标题也随之发生变化。CSS代码如下：navullia{ background-image:-webkit-radial-gradient(ellipse,GreenYellow,Aqua);background-image:radial-gradient(ellipse,GreenYellow,Aqua); background-size:100%; text-decoration:none; padding:15px;}代码说明如下图：是导航超链接的基本效果，接下来制作动态效果，这需要有到2.4.5节介绍的4个伪类：“:link,:visited,:hover和:activited”。它们的声明顺序是“爱恨原则”，CSS代码如下：navullia:link{ color:#FF00FF;}

navullia:visited{ color:#191970; background:aqua;}navullia:hover{ color:#B22222; background:#7CFC00; font-weight:bold;}

navullia:active{ color:#00FFFF; background:#808000; font-weight:bold;}代码说明如下图：第四，制作内容标题的Tab页效果。这一部分应根据用户选择的导航菜单动态确定，现在只用HTML5新增的:target伪类就可实现这一效果，完全不用编写任何JavaScript代码。#tab{ margin:30px;}#tabspan{ padding:15px; border-left:1pxsolidaqua;border-top:1pxsolidaqua; border-right:1pxsolidaqua; border-radius:10px10px0px0px;}

:target{ background:aqua; border:1pxsolidaqua;}代码说明如下图：Tab标题部分的span不设置下边框，是因为与下面的容器section共用边框，这样做使得定位简单，没必要为使span下边框与容器section的上边框重合而大伤脑筋。设置:target伪类就可以实现动态效果，可以根据用户对菜单项的选择，自动更换标题。3.1.4制作显示容器与页脚

这两部分比较简单，因为容器内还没有任何内容，这里面的内容后面再进行讨论。页脚也没有什么特殊样式，只