HTML5+CSS3网页设计任务教程（第2版） 课件 单元5 页面局部布局

页面局部布局单元5目录02中英文混合标题03阅读更多内容01图文混排与文字溢出04制作文字选项卡与图片选项卡05制作内容折叠与菜单折叠06制作导航条07制作文字列表、图文混排列表和缩略图列表08制作登录界面09制作评论区5-1HTML5+CSS3网页设计任务教程（第二版）图文混排与文字溢出任务5-1

图文混排与文字溢出任务5-1

图文混排与文字溢出CSS提供的四种排版模型：标准流排版、浮动排版、定位排版、flex排版。一个页面中：默认的排版方式就是普通文档流的方式进行排版（页面的内容按照标签的顺序从上到下从左到右排列）,这是在普通文档流的形式下，块状元素默认占据一整行。float:left使得每个小盒子可以在同一行显示，浮动的元素可以脱离文档流及文字围绕图片进行摆放。因此，当图片和文字混合排版的时候，因<img>标签属于行内元素，但在表现上更倾向于inline-block，这种内容可替换的元素虽然属于inline，但又能自由设置height、width等值，所以要给其设置浮动属性，文字才能围绕图片进行摆放。任务5-1

图文混排与文字溢出图文混排、文字溢出word-wrap:break-word;的具体效果。1、纯中文：自动换行，一个汉字看做一个单词。2、纯英文或纯数字（中间没有空格）：直接把单词截断换行。3、遇到英文空格或者换行符：会换行。4、遇到英文单词和英文空格：在空格处换行不截断单词。图文混排、文字溢出word-break:break-all;的具体效果。1、纯中文：自动换行，一个汉字看做一个单词。2、纯英文或纯数字（中间没有空格）：直接把单词截断换行。3、遇到英文空格或者换行符：会换行。4、遇到英文单词和英文空格：在空格处换行截断单词。图文混排、文字溢出一行、多行文本省略的相关知识。1、单行文本框溢出内容以省略号显示overflow:hidden;溢出隐藏。text-overflow:ellipsis;当对象内文本溢出时显示省略标记(...)。white-space:nowrap;强制在同一行内显示所有文本，直到文本结束或者遭遇<br>对象。2、多行文本框溢出内容以省略号显示overflow:hidden;溢出隐藏。display:-webkit-box;作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical;设置伸缩盒子的子元素排列方式：从上到下垂直排列。-webkit-line-clamp:3;表示如果文本内容超出三行则在第三行末尾以省略号显示。图文混排、文字溢出text-overflow:ellipsis;的具体效果。1、overflow:hidden;overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。2、white-space:nowrap;white-space属性设置如何处理元素内的空白。nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇<br>对象。3、text-overflow:ellipsis;text-overflow:clip|ellipsisclip:当前对象内文本溢出时不显示省略标记(...)，而是将溢出部分裁剪。ellipsis:当对象内文本溢出时显示省略标记(...)。5-2HTML5+CSS3网页设计任务教程（第二版）中英文混合标题任务5-2

中英文混合标题任务5-2

中英文混合标题1、弹性布局左右居中flex-start（默认值）：左对齐。flex-end：右对齐。center：居中。space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。2、弹性布局上下居中flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。中英文混合标题1、display:flex是一种布局方式。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。2、flex-grow属性取值是一个数值，默认值为0。当取值为0时，表示不索取父元素的剩余空间。当取值大于0时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取得越多。5-3HTML5+CSS3网页设计任务教程（第二版）阅读更多内容任务5-3

阅读更多内容任务5-3

阅读更多内容1、<label>标签的for属性规定<label>标签与哪一个表单元素绑定，若是用户点击<label>标签元素内的文本，则会切换到绑定的表单元素。注意：<label>标签for属性的值只能是表单元素中ID的值，而不能是类CLASS的值。2、input#toggle-trigger必须放在p#content大段文字之前，因为元素选择器~波浪号意思是选取某个元素之后的所有相同元素，:checked~.some意味着设置的是checkbox被选中后.some的样式。因此，label.lab通过absolute来定位在div#main的底部。3、-webkit-line-clamp属性用于限制块容器可能包含的行数。仅当显示属性设置为“-webkit-box”或“-webkit-inline-box”并且“-webkit-box-orient”属性设置为“垂直”时，此属性才有效。5-4HTML5+CSS3网页设计任务教程（第二版）制作文字选项卡与图片选项卡任务5-4

制作文字选项卡与图片选项卡〓

文字选项卡两种方法制作的选项卡都是通过<a>标签实现锚点链接以及溢出隐藏属性来完成的。将每块需要显示内容标签设置和外层标签一样的宽度和高度，并且加上ID属性，通过超链接即可显示选项卡功能。任务5-4

制作文字选项卡与图片选项卡〓

图片选项卡图片选项卡则是完全通过对盒子进行CSS样式设置完成的。选项卡的制作使用<label>标签的for属性值与<input>标签的ID属性值相同。input:checked~label：相邻同胞选择器，选择被选中的<input>标签后所有的<label>标签，注意：<input>和<label>标签有共同的父元素。input:checked+label：相邻同胞选择器，选择被选中的<input>标签后第一个<label>标签，注意：<input>和<label>标签有共同的父元素。:checked伪类选择器用于选择匹配所有被选中的radio或checkbox（是指type为“radio”或者“checkbox”的<input>）。任务5-4

制作文字选项卡与图片选项卡〓

图片选项卡5-5HTML5+CSS3网页设计任务教程（第二版）制作内容折叠与菜单折叠任务5-5

制作内容折叠与菜单折叠〓

内容折叠任务5-5

制作内容折叠与菜单折叠〓

内容折叠四个<input>的type="radio"，同时name="accordion"，代表只能选中一个，用来实现选项卡的单选。四个单选按钮默认只有一项被选中，我们可以设置.ac-containerinput:checked~article.ac-content{height:200px;}属性来打开需要的选项。<label>中的for属性规定了<label>与哪个表单元素绑定。for属性的值和表单元素的ID值一样，即可完成该<label>标签与该表单元素的绑定。通过.ac-containerinput:checked~article{transition:height0.5sease-in-out,box-shadow0.1slinear;}来设置菜单动态效果。任务5-5

制作内容折叠与菜单折叠〓

菜单折叠任务5-5

制作内容折叠与菜单折叠〓

菜单折叠在HTML中，<details>标签是HTML5中新增的标签，是用来定义供用户开启和关闭的交互式控件，在<details>标签中通常使用<summary>标签来定义标题，而<details>标签中的其它部分为标题的详细信息。标题是可见的，而标题的详细信息默认是隐藏的（除非设置了open属性），当点击标题时，会显示出标题的详细信息。<details>标签通常和<summary>标签一起使用，用来实现一个开启和关闭的交互式控件。如果单独使用，标题默认为详细信息。<details>标签的open属性是用来规定<details>标签中的内容默认是否可见。<details>标签中通常会有<summary>标签，<summary>标签用来定义控件的标题，当点击该标题时，将显示隐藏的详细信息。5-6HTML5+CSS3网页设计任务教程（第二版）制作导航条任务5-6

制作导航条〓

横向导航条横向导航条在页面的上部，且背景色一致，根据之前所学知识可知，导航条整体是一个无序列表，四个超链接在同一行上就需要设置float样式属性，除此，每个超链接都去除了下划线，设置了hover样式。给超链接<a>设置宽度200px和padding6px，因为<a>是内联元素因此要设置display:block;才能实现宽度和内边距。任务5-6

制作导航条〓

带背景图像横向导航条1、背景图像属性：background-image:url(位置及名称);此时，背景图像默认在父级元素内的左上角。2、背景图像重复属性：background-repeat:no-repeat;这个属性表示背景图像的平铺方式，no-repeat值表示背景图像不平铺。3、背景位置属性：background-position:rightbottom;此值表示背景图像横向在右边，纵向在下边，即右下角；值centercenter;表示背景图像位于中心；值centerright;表示背景图像位于中间靠右；值100px200px;表示靠左100像素，靠下200像素。任务5-6

制作导航条〓

二级导航条1、可以使用任何的HTML元素来打开下拉菜单，如：<span>、<a>或<button>元素。使用容器元素（如：<div>）来创建下拉菜单的内容，并放在任何你想放的位置上。使用<div>元素来包裹这些元素，并使用CSS设置下拉内容的样式。2、用来设置下拉菜单的.dropdown类使用position:relative，这将设置下拉菜单的内容放置在下拉按钮（使用position:absolute）的右下角位置。.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。任务5-6

制作导航条〓

Flex布局菜单给<ul>和<li>标签添加display:flex;属性，该属性对块级元素、行内块元素、行内元素都是一视同仁的，不存在块级元素和行内元素的关系。即便是<span>行内元素，当添加了display:flex属性后，也会有宽和高。给<li>和<a>设置flex-grow为1，每个菜单项会等分剩余空间。5-7HTML5+CSS3网页设计任务教程（第二版）制作文字列表、图文混排列表和缩略图列表任务5-7制作文字列表、图文混排列表和缩略图列表〓

新闻文字列表新闻列表是一个无序列表，但去除了无序列表默认的样式，取而代之的是使用背景图像实现的图标；新闻标题和新闻时间两个文字内容在一行内，且一个靠左，一个靠右，需要使用行内块结构，且浮动属性float分别是左和右；每一个列表项都是一个超链接，超链接的内容应该以块状显示，设置下边框线为虚线。文本溢出省略处理需要设置：text-overflow:ellipsis;white-space:nowrap;overflow:hidden;文本溢出隐藏处理则需要设置：word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;任务5-7制作文字列表、图文混排列表和缩略图列表〓

图文混排列表图文混排的新闻列表采用<ul>和<li>标签来实现，新闻的图片和文字等内容都放在<li>标签内，div.left放置图片，div.right放置文字内容。需要采用clear:both;属性来清除<li>标签的浮动属性。标题需要设置文本溢出省略处理，内容只能有三行文字且需要设置文本溢出省略处理，我们采用-webkit-line-clamp:3;属性设置内容只能显示三行。任务5-7制作文字列表、图文混排列表和缩略图列表〓

单击放大、悬停放大任务中的图片大小一致，且每一个图片下方有图片标题，相对于图片标题居中。图片与文本一体，作为无序列表的列表项。图片大小一致可通过设置图片宽、高度完成，文本居中可通过行内区域标记<span>设置display属性为块状（block）来完成。图片超链接只需要将图片设置成<a>标签的内容。任务中图片放大有两种情况，一种是纯粹地使用图片超链接完成，即单击图片实现放大，此时放大后的图片位置是固定的，而且放大后图片显示在最前面，需要设置：:focusimg{z-index:99;position:absolute;}此处的z-index属性的值只要是当前图层最大值就可以。另一种是鼠标悬停时放大，我们使用CSS3中的transform属性设置放大效果，可设置：:hover{transform:scale(3);}设置图片按照比例放大3倍任务5-7制作文字列表、图文混排列表和缩略图列表〓

九宫格缩略图:nth-child(n)：匹配属于其父元素的第n个子元素（n从1开始）。:nth-last-child(n)：匹配属于其父元素的倒数第n个子元素。:only-child：匹配属于其父元素的唯一一个子元素，等价于:nth-child(1):nth-last-child(1)。:nth-child(m):nth-last-child(n)：匹配属于其父元素的第m个子元素，同时又是倒数第n个子元素。例如.containerimg:nth-child(1):nth-last-child(4),.containerimg:nth-child(2):nth-last-child(3),.containerimg:nth-child(3):nth-last-child(2),.containerimg:nth-child(4):nth-last-child(1)代表四张图片的情况，第1张同时是倒数第4张，第2张同时是倒数第3张，第3张同时是倒数第2张，第4张同时是倒数第1张，同时满足以上四个条件就只有四张图片的情况。5-8HTML5+CSS3网页设计任务教程（第二版）制作登录界面任务5-8制作登录界面为了排版整齐，我们采用表格布局，登录界面需要有标题，用户名，密码，按钮，忘记密码等元素，因此我们需要插入5行2列的表格，表格边框设置为不可见，第1,4,5行需要合并列。表单元素<input>标签使用了text属性、password属性、submit按钮和reset按钮以及checkbox属性。text框和password框都使用了图像作背景，同时设置required属性确保必填。5-9HTML5+CSS3网页设计任务教程（第二版）制作评论区任务5-8制作评论区评论区的制作主要是用户对某一条内