HTML5+CSS3 Web前端开发

前言

Web前端开发是由很多互联网公司一致命名的一种工作职位。毋庸置疑，Web前端开发这个职位是由网页设计演变而来，但随着近几年来，移动互联网时代的到来，Web前端开发已经有了更广泛的内涵，因为像微信公众号、手机APP(其中的Web APP和Hybrid APP)和移动端网页的开发都需要Web前端开发技术。

目前，Web前端开发对人才的需求量非常大，前端开发人员的薪酬通常比同层次的后端开发人员薪酬水平还要高，这是因为前端开发由于涉及界面设计和交互，个性化很强，导致项目的重用性水平低，而后端很多项目都可以重用，比如许多不同的网站可以共用一个后台，这就造成了前端开发人员的需求量远大于后端开发人员的需求量。

Web前端开发技术的基础是HTML5、CSS3和JavaScript。虽然其主要任务仍然是网页设计，但已经产生了巨大的变化，比如通过CSS3就能制作出炫丽的动画和交互效果，而过去却要依赖于Flash或JavaScript；固定宽度的网页布局已逐步向能适应各种屏幕的响应式网页布局华丽转变；基于组件式的网页设计思想相对于从头开始的网页制作方法来说，能极大地减少开发人员的工作量。

Web前端开发的教学主要有两项任务，即传授知识和培养兴趣。笔者认为教学成功的关键是在这两方面寻找一个折中。如果上课讲授的知识点过多过细，则学生思考和实践的环节就会减少；如果讲授的知识点过少，片面强调让学生实践，则学生由于知识点没理清，又容易陷入低水平的盲目实践。

为此，本书在编写时，注重培养学生兴趣，在章节安排上尽快让学生进入CSS阶段的学习，将表格和表单的内容安排在CSS基础知识的后面，因为只有接触到CSS，学生才会领会到这门课程的乐趣。并且本书重点讲授CSS的内容，因为CSS仍然是Web前端开发这门课程最重要的内容。其次，考虑到初学者以前并未接触过任何网页设计语言，本书将传统的CSS知识和CSS3的内容进行统一编排，从而使读者更容易系统掌握CSS的传统技术和新技术。Bootstrap作为前端开发的一种流行技术，代表了网页制作技术的两大发展趋势：
一是响应式网页布局的趋势，可以说，响应式网页布局将是网页布局历史上的第二次革命，第一次革命是CSS布局取代表格布局；二是基于组件的网页制作方法，这种网页制作方法能避免从头开始写代码，避免了过去网页制作过程中令人厌倦的重复劳动，极大地提高了网站的开发效率，因此Bootstrap必将引起更多网站开发者的重视。

为了便于读者阅读和减少篇幅，本书采用精简代码的编排方式，读者一般都能够容易地将其还原成完整代码，同时每个代码都标有序号，读者能够方便地在配套源代码中找到完整代码并能直接运行。

本书的教学大概需要64学时，其中实验学时不少于16学时。如果学时量不足，则可以主要讲授第2、4、5章的内容。带“*”号的章节建议学生自学。

本书为将其作为教材的教师提供教学用多媒体课件、实例源文件和实验大纲，可登录本书的配套网站http://wxy.hynu.cn/ec免费下载，也可和作者联系(微信号： tangsx4，邮箱： [email protected])。

本书由唐四薪编写了第3～10章。林睦纲、唐琼编写了第1章和第2章的部分内容。参加编写的还有谭晓兰、喻缘、刘燕群、唐沪湘、刘旭阳、陆彩琴、唐金娟、谢海波、尹军、唐琼、何青、唐佐芝、舒清健等，他们编写了第2章的部分内容。

本书的写作得到衡阳师范学院“十三五”专业综合改革试点项目“计算机科学与技术”的支持。本书是衡阳市科技计划项目(2016KJ02)的研究成果。

由于编者水平和教学经验有限，书中错误和不妥之处在所难免，欢迎广大读者和同行批评指正。

 

作者

　　2018年3月

第5章CSS布局网页本质上是一种在浏览器上完成的平面设计作品，网页布局就是将网页元素合理排列在网页版面上，达到美观大方、井然有序的效果。使用CSS进行网页布局，本质是利用标准流、浮动或定位属性的性质对网页布局元素进行合理排列。5.1浮动在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制定者也想到了这样排列限制的问题，因此又给出了浮动和定位方式，从而使排版的灵活性大大提高。如果希望相邻的块级元素盒子左右排列(所有盒子浮动)或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)做出图文混排的效果，这时最简单的实现办法就是运用浮动(float)属性使盒子在浮动方式下定位。5.1.1盒子浮动后的特点在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图51所示。使用“浮动”方式后，这种排列方式就会发生改变。图513个盒子在标准流中CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠近，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。下面通过一个实验来演示浮动的作用，基础代码(51.html)如下，这个代码中没有使用浮动，它的显示效果如图51所示。div{padding:10px; margin:10px; border:1px dashed #111;background-color:#90baff;}.father{background-color:#ff9;border:1px solid #111;}

1.  一个盒子浮动接下来在上述代码中添加一条CSS代码，使Box1盒子浮动。代码(52.html)如下： .son1{float:left;}此时显示效果如图52所示，可发现在给Box1添加浮动属性后，Box1的宽度不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果再在未浮动的盒子Box2中添一行文本，就会发现Box2中的内容是环绕着浮动盒子的，如图53所示。图52第一个盒子浮动图53增加第二个盒子的内容

总结： 设置元素浮动后，元素发生了如下一些改变： (1) 浮动后的盒子将以行内块(inlineblock)元素显示，即宽度会自动收缩，但保持块级元素的其他性质。(2) 浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置。(3) 未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。提示： 所谓“脱离标准流”，是指元素不再占据在标准流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。例如在图52中，当Box1浮动后，Box2就顶到了Box1的位置，相当于Box2视Box1不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如Box2中的内容会跟在Box1盒子之后进行排列，而不会忽略Box1盒子的存在。2.  多个盒子浮动在Box1浮动的基础上再设置Box2也左浮动，代码(53.html)如下： .son2{float:left;}图54设置两个盒子浮动此时显示效果如图54所示(在Box3中添加了一行文本)。可发现Box2盒子浮动后仍然遵循上面浮动的规律，即Box2的宽度也不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果将Box1的浮动方式改为右浮动： .son1{float:right}，则显示效果如图55所示，可看到Box2移动到了Box1的前面，这说明元素浮动后其显示顺序和它们在代码中的位置可能并不一致。接下来设置Box3也左浮动： .son3{float:left}，则显示效果如图56所示。可发现3个盒子都浮动后，就产生了块级元素水平排列的效果。同时由于都脱离了标准流，导致其父元素中的内容为空。图55改变浮动方向图563个盒子都浮动

对于多个盒子浮动，除了每个浮动盒子都遵循单个盒子浮动的规律外，还有以下两条规律： (1)   多个浮动元素不会相互重叠，一个浮动元素的外边界(margin)碰到另一个浮动元素的外边界后便停止运动。(2)   若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动(见图57)。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住(见图58)。图57没有足够的水平空间图58被Box1卡住了

5.1.2清除浮动元素的影响clear是清除浮动属性，它的取值有left、right、both和none(默认值)。如果设置盒子的clear属性值为left或right，表示该盒子的左边或右边不允许有浮动的元素。值设置为both则表示两边都不允许有浮动元素，因此该盒子将会在浏览器中另起一行显示。例如,在图55两个盒子浮动的基础上，设置Box3清除浮动，即在51.html 基础上设置如下CSS代码(54.html)，效果如图59所示。.son1{float:right;}.son2{float:left;}.son3{clear:both;}可以看到，对Box3清除浮动(clear:both;)，表示Box3的左右两边都不允许有浮动的元素，因此Box3移动到了下一行显示。实际上，clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box3同时设置清除浮动和浮动，即： .son3{clear:both; float:left;}则效果如图510所示，可看到Box3的左右仍然没有浮动的元素。图59对Box3清除浮动图510对Box3设置清除浮动和浮动

由此可见，清除浮动是清除其他盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动。由于上下margin叠加现象只会发生在标准流的情况下，而浮动方式下盒子的任何margin都不会叠加，所以设置盒子浮动并清除浮动后，上下两个盒子的margin不叠加。在图510中，Box3到Box1之间的垂直距离是20px，即它们的margin之和。5.1.3清除浮动影响的方法在网页布局中，浮动元素会影响其他元素的正常排列，导致网页元素不能按人们的意愿显示。因此设置元素浮动后应尽量清除该元素浮动对其他元素的影响。对于下列两种情形应采用不同的方法清除浮动。1.  来自子元素的浮动如果一个父元素内所有的子元素都浮动，一定要记得对这个父元素作清除浮动处理。否则该父元素下面的元素会顶到浮动元素的位置上去(如图511所示)，下面的代码(55.html)可清除子元素浮动对父元素的影响，其显示效果如图512所示。div{padding:10px; margin:10px;border:1px dashed #111;background-color:#9bf;}.father{background-color:#ff9;border:1px solid #111;}.cls {clear: both; }.son1{float:right; }.son2{float:left;}.box3{background:#ccf;}

图511未清除子元素浮动时的效果图512清除子元素浮动后的效果

这种方法添加了一个元素(.cls)专门用来清除浮动，如果不愿添加新元素，可使用伪元素的方式来设置清除浮动。下面的代码在父元素内部的末尾添加一个伪元素，使用伪元素清除浮动的经典代码(56.html)如下： .father:after { content: ”; display: table; clear: both; }.father { zoom: 1; }/兼容IE6、IE7,如不需要可去掉/注意： 对于一个父元素内的所有子元素都浮动，一种极其错误的做法是设置父元素的高度来掩饰浮动对它的影响，如.father{height:50px;}，这样做只是掩饰了浮动，并没有清除浮动的影响，虽然使父元素看起来正常了，但父元素下面的元素仍然会顶到上面去。因此，在CSS布局时，如果发现一个元素移动到它原来位置的左上方或右上方，并且和其他元素发生了重叠，则很可能是受到了其他盒子浮动的影响。2.  来自兄弟元素的浮动如果一个元素前面的兄弟元素浮动(见图513)，则可以对紧邻该浮动元素的后一个元素作清除浮动处理。例如，不希望Box3受前面兄弟元素浮动的影响，则可对Box3清除浮动，代码(57.html)如下，显示效果如图514所示。div{padding:10px 20px;  margin:7px; border:1px dashed #111;background-color:#9bf; float:left; }/所有div都浮动/.box3{background:#ccF; clear:both;}/对Box-3清除浮动/

图513清除浮动前图514清除浮动后

除了直接对后面的元素清除浮动外，还可以增加一个元素专用于清除浮动，代码如下： 

虽然增加一个元素使代码变得冗余，但这样使每个元素的功能变得更加清晰，因此推荐使用。3.  避免滥用浮动由于元素浮动会对其他元素的布局产生影响，因此应避免滥用浮动，下面是两种滥用浮动的典型场景。(1) 为了使元素宽度收缩而设置浮动，由于浮动元素的宽度会自动收缩(称为主动包裹)，于是就用浮动属性代替width属性。实际上，如果只需要改变元素的宽度，应设置width属性，而不是float。(2) 为了清除浮动的影响而浮动，清除浮动正确的做法是使用clear属性(例如图59中的Box3)，但如果对Box3设置float属性，再设置width值，似乎也能达到图59中的效果，但实际上这种错误的做法将导致更多的元素受到浮动的影响而布局混乱。因此，如果要清除浮动应对相应的元素设置clear属性，而不是float。5.2浮动的应用举例利用单个盒子浮动，可制作出图文混排及首字下沉等效果。利用多个盒子浮动，则可制作出水平导航条等效果。5.2.1图文混排及首字下沉效果如果将一个盒子浮动，另一个盒子不浮动，那么浮动的盒子将被未浮动盒子的内容所环绕。如果这个浮动的盒子是图像元素，而未浮动的盒子是一段文本，那么就实现了图文混排效果。示例代码(58.html)如下，效果如图515所示。img{border:1px gray dashed; margin:10px 10px 10px 0;padding:5px; float:left;/设置图像元素浮动/}p{margin:0;font:14px/1.5 “宋体”; text-indent: 2em;}

在遥远古希腊的大草原中,……这就是”人马族”。

人马族里唯独的一个例外–奇伦……

图515图文混排效果在图文混排的基础上让第一个汉字也浮动，同时变大，则出现了首字下沉的效果，添加的CSS代码(59.html)如下，效果如图516所示。p:first-letter{font-size:3em; float:left;}如果将第一个段落浮动，则出现了文章导读框效果，代码(510.html)如下，效果如图517所示。图516首字下沉和图文混排效果图517导读框效果

p{margin:0; font-size:14px; line-height:1.5;text-indent: 2em;}p:first-child{width:160px; float:left;/第一个段落浮动/margin:10px 10px 0 0; padding:10px;border:3px gray double; background:#9BD;}

在遥远的古希腊大草原中……

“半人半兽”代表着理性与非理性……

从以上3个例子可以看出，网页中无论是图像还是文本，对于任何元素，在排版时都应视为一个盒子，而不必在乎元素的内容是什么。5.2.2水平导航条在4.6.3节中，利用元素的盒子模型制作了一个竖直导航条。如果要把这个竖直导航条变为水平导航条，有以下两种方法： 方法一，设置所有a元素浮动，这是因为多个元素浮动，这些元素就会水平排列。当然水平导航条一般不需设置宽度，可以把width属性去掉。图518是水平导航条的效果，它的结构代码(511.html)如下： 

图518水平导航条CSS样式主要是给元素设置盒子和背景属性，代码如下： #nav{font-size: 14px;}
#nav a {color: red; background-color: #9CF;text-align: center; text-decoration: none;padding:6px 10px 4px;  border: 1px solid #39F;float:left;/使a元素浮动,实现水平排列/}#nav a a{margin-left:5px;}/设置第2到最后一个a元素有5px的左间距/#nav a:hover {color: white; background-color: #930; }/设置前景色和背景色/提示： (1)   本例使用了相邻选择器(#nav a a)选中了除第1个a元素之外的其他a元素，再给它们设置左边距，这样就实现了第一个a元素没有左边距。(2)   设置了浮动后元素将自动以块级元素显示，因此就不需要再对#nav a选择器添加display:block属性了，因为这是多余的。方法二，将所有a元素的display属性设置为inlineblock，inlineblock元素兼有块级元素和行内元素的特点，表现在它可以像块级元素一样设置宽度和高度，同时它又像行内元素一样是从左到右排列，宽度不会自动伸展。其CSS关键代码如下： #nav a {…display: inline-block; }/将5-11.html的float:left;改成这条/5.2.3新闻栏目框在网站的首页中，文字内容一般被组织成栏目框的形式。网站是按栏目组织内容的，因此栏目框是最常见的网页界面元素，掌握栏目框的制作是网页制作中一项重要的基本功。如图519所示的是一种简洁风格的栏目框。图519栏目框示例栏目框可分为栏目标题栏和内容列表区。对于栏目标题栏，常见的结构代码如下： 

可见，栏目标题栏由两部分组成，即左边的栏目标题和右边的“更多”链接，因此需要两个HTML元素来存放。为了将栏目标题栏组合成一个整体，使用了一个div元素将这两个元素包裹起来。对于“更多”链接，之所以将其放入一个span元素中，是为了将CSS布局样式和CSS文本样式分离。即对span元素设置布局样式，而对a元素设置文本样式。span元素在这里起到了布局元素的作用。对于内容列表区域，从语义上看，它是一个典型的无序列表，因此使用ul元素来描述列表区域，其结构代码如下： 

• 07-25

 … 

• 07-06

然后将标题栏代码和内容列表区域代码用一个div元素包含起来，即得到栏目框的完整结构代码(512.html)如下： 

提示： 由于在网页中一般有多个栏目框，因此对栏目框中的元素一般设置class属性，而不设置id属性，从而使栏目框的样式代码可以被很多个风格相似的栏目框共用。接下来设置栏目框的样式，从外表来看，栏目框的文本样式主要是设置文字大小和行距。栏目框的布局样式主要是要使栏目标题和“更多”链接分布在容器两端。新闻标题和日期也分布在容器的两端。这称为两端对齐，要实现两端对齐，主要有以下3种方法。(1) 左右都浮动法： 设置左边的元素左浮动，右边的元素右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以还必须设置外围盒子的高度，或设置外围盒子清除浮动，使它能包含住两个浮动的盒子。标题栏的CSS样式代码(512.html)如下： .news{ width:420px;margin-left: 20px;}.title {