容器元素容器元素_第1页
容器元素容器元素_第2页
容器元素容器元素_第3页
容器元素容器元素_第4页
容器元素容器元素_第5页
已阅读5页，还剩39页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章容器元素所谓容器元素是指该元素代表一块区域，内部用于放置其他元素。例如div元素就是最常见的容器元素。上一章用到的figure元素也是容器元素，属于HTML语义化容器元素。本章首先介绍的容器元素是表格元素teble，然后介绍表单及相关元素，最后学习窗口容器，包括iframe子窗口、Bootstrap模态框和Bootstrap侧边面板。了解表格元素、子窗口元素、表单元素的基本标签和基本属性理解Bootstrap模态框的基本应用方法掌握各种表单元素的的基本功能能熟练制作网页表格内容安排表格5.1表单5.2窗口容器5.3小试牛刀5.45.1表格在CSS出现之前，表格元素曾广泛用于布局与定位。一个表格由若干行元素组成，每一个行元素又包含若干单元格。HTML的内容都放在这一个个单元格容器中。这些单元格可大可小，可横向合并，也可纵向合并，还可在单元格中嵌套表格。新建页面后第一件事就是画一个适当的表格，然后在单元格中插入文字、图片等内容，再把表格线去掉，就完成了表格布局。CSS出现以后，布局与定位不再使用表格。表格逐渐回归其原本的功能，即在页面上用来显示数据，构建文本、图像或其它对象。表格5.15.1.1表格相关标签2.<table>标签属性1.表格定义基本格式：

<table> <tr><td>…</td><td>…</td>…</tr> <tr><td>…</td><td>…</td>…</tr> …</table>（1）align属性（2）border属性（3）width属性（4）height属性（5）cellpadding属性（6）cellspacing属性表格5.13.表格相关的其它配套标签在一个表格中<table>标签、<tr>标签、<td>标签是必须有的标签，除此之外还有一些与表格相关的其它配套标签。（1）表格标题标签<caption><caption>标签定义表格的标题。<caption>标签必须直接放置到<table>标签之后。每个表格只能规定一个标题。标题会自动根据表格的宽度居中并且显示在表格上方。（2）表头单元格标签<th><th>标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。（3）表头标签<thead><thead>标签用于组合HTML表格的表头内容。（4）表格的主体标签<tbody><tbody>标签用于组合HTML表格的主体内容。（5）表格的页脚标签<tfoot><tfoot>标签用于组合HTML表格的页脚内容。表格5.15.1.2表格边框重叠CSS样式属性border-collapse格式：border-collapse：collapse|separate取值：collapse：表格边框折叠为单一边框separate：表格边框分离5.1.3Bootstrap表格预定义类Bootstrap跟表格相关的预定义类如表5-2所列类名功能.table在table标签中使用预定义类“.table”来设置表格的基础样式.table-striped在table标签中添加“.table-striped”类，可以在行元素上添加背景条.table-bordered在table标签中添加预定义类“.table-bordered”可以为表格添加边框.table-borderless在table标签中添加预定义类“.table-borderless”可以设置一个无边框的表格.table-hover在table标签中添加预定义类“.table-hover”可以为表格的每一行添加鼠标悬停效果（灰色背景）预定义类背景颜色.table-primary蓝色.table-success绿色.table-danger红色.table-dark黑色.table-info浅蓝色.table-warning橘色.table-active灰色.table-secondary灰色.table-light浅灰色5.1.4使用Bootstrap制作表格案例5.1案例5-1：使用Bootstrap制作一个4行3列的表格，效果如图5-2所示。表格分为表头和主体两大部分，分别用不用的背景颜色。表头使用预定义类.table-dark，样式为黑底白字；表格主体使用预定义类.table-primary，样式为蓝底黑字。在table标签使用预定义类.table-hover，使鼠标悬停在表格主体时，所在行的背景颜色变为灰色<html><head><title>案例5-1</title><metacharset="utf-8"><linkhref="css/bootstrap.min.css"rel="stylesheet"></head><body><tableclass="tabletable-hover"><thead> <trclass="table-dark"><th>姓名</th><th>年龄</th><th>Email</th></tr></thead><tbody> <trclass="table-primary"><td>张三</td><td>23</td><td>john@</td></tr> <trclass="table-primary"><td>李四</td><td>24</td><td>mary@</td></tr> <trclass="table-primary"><td>王五</td><td>25</td><td>july@</td></tr></tbody></table></body></html>5.1.5任务5-1：在网页中使用表格5.11.任务描述本任务在网页中插入一个表格，效果如图5-3所示。表格上面有标题。表格内容有文字、图片和超级链接。2.任务要求通过本任务的练习，要熟练掌握网页中使用表格的传统做法；掌握表格单元格横向合并和纵向合并的方法；掌握表格的嵌套；掌握通过CSS设置表格框线为单线的方法等。3.任务分析表格总体是一个5行5列的表。第1行的第1个单元格使用属性rowspan="4"向下合并4个单元格；第5行的第1个单元格使用属性colspan="5"向右合并5个单元格，使第5行5个单元格合并为1个单元格。在第5行的这个单元格内插入一个1行3列表格进行嵌套，单元格内容分别为“红色大衣”链接、“灰色大衣”链接和“黄色大衣”链接。通过表格的嵌套实现这三个链接横向平均分布。表格框线通过在CSS设置table的样式border-collapse:collapse;实现单线效果。嵌套的表格不显示框线。5.1.5任务5-1：在网页中使用表格5.14.工作过程步骤1站点规划（1）新建文件夹作为站点，站点内建立images文件夹，将本节素材存放在images文件夹中；（2）新建网页，设置<title>为“任务5-1”；将网页命名为task5-1.html保存在站点所在的目录。步骤2建立表格的基本结构网页task5-1.html里插入5行5列的表格步骤3设置表格的基本样式（1）设置表格宽度为640px，加上1px的黑色框线；（2）给单元格加上1px的黑色框线，完成设置之后的效果如图5-4所示，代码如下：table{width:640px;border:#0001pxsolid;}td{border:#0001pxsolid;}5.1.5任务5-1：在网页中使用表格5.1步骤4设置框线为细线在CSS样式表中给table加上一条声明border-collapse:collapse;这样就可以将内外框线重叠，形成一条细线。完成设置的效果如图5-5所示步骤5表格单元格合并（1）第1行的第1个单元格使用属性rowspan="4"向下合并4个单元格；（2）第5行的第1个单元格使用属性colspan="5"向右合并5个单元格，使第5行5个单元格合并为1个单元格。完成设置的效果如图5-6所示5.1.5任务5-1：在网页中使用表格5.1步骤6输入表格的内容（1）输入表头：在table标签下面添加caption元素；（2）在第1个单元格插入图片，设置该单元格的宽度为图片宽度190px；（3）输入表格文字内容，完成之后的效果如图5-7所示。5.1.5任务5-1：在网页中使用表格5.1步骤7制作表格第5行的链接（1）在表格第5行的单元格内嵌入一个1行3列的表，在3个单元格内输入链接内容；（2）在CSS样式表中去掉嵌入表格的内外框线；（3）保存task5-1.html文件，完成红色大衣表格的制作。步骤8制作灰色大衣表格（1）将task5-1.html另存为task5-1-step8.html；（2）在网页task5-1-step8.html中修改插入的图片，输入灰色大衣表格的数据；（3）保存task5-1-step8.html文件，完成灰色大衣表格的制作，效果如图5-8所示。步骤9制作黄色大衣表格（1）将task5-1.html另存为task5-1-step9.html；（2）在网页task5-1-step9.html中修改插入的图片，输入黄色大衣表格的数据；（3）保存task5-1-step9.html文件，完成黄色大衣表格的制作，效果如图5-9所示。5.2表单表单在网页中主要负责数据采集功能，它是WEB前端与后台数据的桥梁。一个表单有三个基本组成部分：表单标签：表单采用<form>标签进行定义；表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，是在form元素内插入<input>、<select>、<textarea>等标签构建；表单按钮：包括提交按钮、复位按钮和其它的按钮。表单5.25.2.1表单标签<form>格式：<formaction="…"method="…">表单域…表单按钮</form>功能：<form>标签为浏览者在屏幕上建立一张表单。表单标签<form>是成对标签，有两个属性：action和method。（1）action属性WWW是采用客户/服务器工作方式的。在浏览器端得到的用户反馈信息将被传送到Web服务器中，由相应的处理程序进行处理。action属性的作用就是指出该表单所对应的处理程序。它的参数值就是该程序的URL。（2）method属性method属性用于指定该表单的运行方式。属性的参数值为get和post之一，默认的方式是get。当值为get时表示该表单主要是从服务器中获取信息，具有较好的安全性，因此它传送给服务器的反馈信息长度不能超过255个字符；当值为post时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制，但安全性较差。表单5.25.2.2表单域表单域是指在<form>标签内的表单元素，包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。1.输入标签<input>格式：<inputtype="类型"value="值"name=”名称”>功能：<input>标签用于定义一个用户输入项。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。<input>是个单标签，没有结束标签。（1）文本框当type的类型为text时，input元素为文本框，如图5-10所示：（2）密码框当type的类型为password时，input元素为密码框，如图5-11所示。（3）文件选择框当type=”file”时，浏览器会在相应位置产生一个文件选择框，如图5-12所示。表单5.2（4）单选项当type=radio时，表示该输入项是一个单选项。如图5-13所示。（5）复选项当type=checkbox时，表示该输入项是一个复选项，如图5-13所示。（6）隐藏项当type=“hidden”时，表示该输入项是一个隐藏项。（7）email类型当type=“email”时，输入类型用于电邮地址的输入字段。效果如图5-14所示（8）搜索框当type="search”时，输入类型用于搜索字段，比如站内搜索或百度搜索等。（9）url类型当type="url”时，输入类型用于URL地址的输入字段。表单5.2（10）数值类型当type="number"时，输入类型用于数值的输入字段。（11）电话类型当inputtype="tel"时，输入类型用于电话号码的输入字段。该属性外观与常规的文本字段无异。如果是在移动端中，属性type="tel"会唤起系统的数字键盘。（12）范围类型当inputtype="range"时，输入类型用于指定范围值的输入字段。（13）颜色类型当inputtype="color"时，输入类型用于规定颜色。表单5.2（14）日期类型格式：<inputtype="date|month|week|time|datetime|datetime-local”/>取值：date：选择日、月、年month：选择月、年week：选择周、年time：选择时间（时、分）datetime：选择时间、日期、月、年（UTC时间）datetime-local：选择时间、日期、月、年（本地时间）表单5.22.选择标签<select> 格式：<select><optionvalue="值1">选项1</option><optionvalue="值2">选项2</option>…<optionvalue="值n">选项n</option></select>3.数据列表标签<datalist>格式：<inputlist="name"/><datalistid="name"><optionvalue="选项1"><optionvalue="选项2"><optionvalue="选项3"></datalist>表单5.24.文本域标签<textarea> 格式：<textarearows="行值"cols="列值"></textarea>5.标签<label> 格式：<labelfor=“id名称”>文字</label>功能：<label>标签为input元素定义标注。label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。label中for属性,表示label标签要绑定的HTML元素，当点击这个标签的时候，所绑定的元素将获取焦点。

表单5.25.2.3表单按钮表单按钮包括提交按钮、复位按钮和一般按钮。这三种按钮通过<input>标签的不同类型来实现。1.提交按钮一个form表单必须要有提交按钮，才能将表单数据传送到后台数据库之中。表单元素中可通过以下两种方法将表单的输入信息传送给服务器。（1）提交按钮格式：<inputtype="submit"value="按钮文字"name="名称">（2）图像按钮格式：<inputtype="image"value="按钮文字"name="名称">2.复位按钮格式：<inputtype="reset"value="按钮文字"name="名称">3.普通按钮格式1：<inputtype="button"value="按钮文字"name="名称"onclick="">格式2：<buttononclick="">按钮文字</button>表单5.25.2.4表单元素相关的其它属性表单元素相关的属性有自动地获得焦点属性autofocus、提示文字属性placeholder和必填字段属性equired。1.autofocus属性2.placeholder属性3.required属性5.2.5Bootstrap表单元素样式Bootstrap表单元素样式包括Bootstrap按钮类的样式和表单元素排列位置的样式。1.Bootstrap按钮类Bootstrap按钮类是一系列按钮的样式，包括.btn类、.btn-primary类、.btn-secondary类、.btn-success类、.btn-info类、btn-warning类、.btn-danger类、.btn-dark类、.btn-light类、.btn-link类等。其中预定义.btn类用于定义基本按钮，然后再通过其它类去定义按钮的样式。按钮类可用于<a>、<button>、<input>标签上。2.Bootstrap表单元素排列位置的样式（1）.form-label类与.form-check-input类.form-label类作用在<lable>标签，用来确保标签元素有一定的内边距。.form-check-input类作用在<inputtype=”checkbox”>标签或者<inputtype=”radio”>标签，用来修饰复选框和单选按钮。（2）.form-control类“.form-control”类作用在表单元素。使用了.form-control类的表单元素宽度都是设置为100%，size属性失效，并且加上边框样式5.2.6表单案例5.25.2.6使用Bootstrap制作一个网上调查表单案例案例5-2：使用Bootstrap制作一个网上调查的表单，效果如图5-30所示。网上调查表单包含两个文本框、1个文本域、1个下拉列表、1组单选项、1组多选项、1个提交按钮和1个重置按钮以及若干label元素。表单整体用“.container”类使其居中。在需要加边距的元素使用“.form-label”类或“.form-check-input”类。两个文本框和1个文本域用“.form-control”类定义其显示的宽度。下拉列表、单选项、多选项通过预定义类“.row”和“.col”去实现各个元素的横向并排。表单内的文字全部使用了<label>标签。在<label>标签中分别加入for属性，点击label元素，将焦点转到for属性匹配的id所在的元素中。代码如下：<html><head><metacharset="utf-8"><title>案例5-2</title><linkhref="css/bootstrap.min.css"rel="stylesheet"type="text/css"></head><body><formaction=""method="get"class="container"><labelfor="xm"class="form-label">昵称：</label><inputtype="text"name="xm"id="xm"class="form-controlform-label"/><labelfor="bh"class="form-label">编号：</label><inputtype="text"name="bh"id="bh"class="form-controlform-label"/><labelfor="jy"class="form-label">您对中国足球的建议：</label><textarearows="10"cols="60"name="jy"id="jy"class="form-control"></textarea><divclass="row"><divclass="coltext-center"><labelfor="zy">您的职业：</label><br/><selectsize="1"name="zy"id="zy"><option>运动员</option><option>医生</option><option>导游</option><option>其他</option></select></div><divclass="coltext-center"><label>您的性别：</label><br/><inputtype="radio"name="xb"value="1"checked="checked"class="form-check-input"/>男<inputtype="radio"name="xb"value="0"class="form-check-input"/>女</div><divclass="coltext-center"><label>您经常参加的运动:</label><br/><inputtype="checkbox"name="xb1"value="1"class="form-check-input"/>爬山<br/><inputtype="checkbox"name="xb2"value="2"class="form-check-input"/>足球<br/><inputtype="checkbox"name="xb3"value="3"class="form-check-input"/>蓝球</div></div><divclass="text-center"><inputtype="submit"value="提交"/><inputtype="reset"value="重选"/></div></form></body></html>5.2.7任务5-2：运用HTML5表单标签制作注册页面5.2

1.任务描述本任务在网页中插入一个表单，制作注册页面，效果如图5-31所示。表单域包含文本框、密码框、数据列表、email类型、电话类型、url类型、数值类型、范围类型、颜色类型、复选项、提交按钮等表单元素。2.任务要求通过本任务的练习，学生要全面掌握常用表单元素的基本制作方法；掌握label元素对表单元素焦点的控制方法；掌握自动获得焦点属性、必填字段属性、提示文字属性的基本设置。5.23.任务分析本任务在表单中插入若干input元素，通过在<input>标签中设置不同的type属性，呈现出不同的输入框类型。表单内的文字全部使用了<label>标签。在<label>标签中分别加入for属性，点击label元素，将焦点转到for属性对应的id所在的元素中。在label元素中，文字带星号的为必填字段，在相应id的input元素中设置required属性，则该输入框为必填字段。第一个输入框是文本框，在input元素中增加autofocus属性，则页面加载时自动获得焦点；第二个输入框是密码框，设置maxlength属性值为"8"，即最大字符数8位，再设置placeholder属性值为"8位字符"，则在浏览器中密码框会呈现文字提示："8位字符"；“性别”输入框通过数据列表datalist元素去实现项目内容选择；“出生日期”使用日期型输入框；email类型、电话类型和url类型在输入时必须使用正确的输入格式，否则会出现错误提示；“您对球队的排名目标”使用数值类型，取值范围在1至18；“您对目前球队表现认可度”为范围类型，取值范围在1至100。5.2.7任务5-2：运用HTML5表单标签制作注册页面5.25.2.7任务5-2：运用HTML5表单标签制作注册页面4.工作过程步骤1站点规划新建文件夹作为站点，在站点内新建网页，设置<title>为“任务5-2”。将网页命名为task5-2.html保存在站点所在的目录。步骤2建立表单网页的基本结构（1）网页task5-2.html里最外层插入div#container元素，在div#container内插入表单，代码如下：<divid="container"> <formmethod="get"action="#"> </form></div>（2）设置div#container的基本样式，定义宽度为600px，水平居中5.25.2.7任务5-2：运用HTML5表单标签制作注册页面步骤3制作“用户名”输入框（1）在表单中插入div.item元素，里面包括label文字和文本框两部分；（2）在input元素中设置type="text"为文本框。在input元素中增加autofocus属性，则页面加载时自动获得焦点；在input元素中增加required属性，则该文本框为必填字段；（3）在input元素中增加id，然后在<label>标签中加入for属性，for属性值为文本框的id，则在浏览器点击label元素时，焦点会转到文本框中；（4）设置div.item元素的样式，设置label元素为行内块，里面的文字向右对齐。步骤4制作“密码”输入框（1）“密码”输入包括“密码：”和“确认密码：”两部分。在表单中插入两个div.item元素，里面分别包括label文字和密码框两部分；（2）在input元素中设置type="password"为密码框。在input元素中设置maxlength属性值为"8"，即最大字符数8位，再设置placeholder属性值为"8位字符"，则在浏览器中密码框会呈现文字提示："8位字符"。5.25.2.7任务5-2：运用HTML5表单标签制作注册页面步骤5制作“性别”输入框（1）“性别”输入框通过数据列表datalist元素去实现男女选项。在表单中插入div.item元素，里面包括label文字和文本框以及数据列表datalist元素三部分；（2）设置datalist元素的id，并在input元素设置list属性值为datalist元素的id值，即在输入框中指定了数据列表来源。步骤6制作“出生日期”输入框（1）在表单中插入div.item元素，里面包括label文字和输入框两部分；（2）“出生日期”使用日期型输入框。在input元素中设置type=“date”为如期型输入框。5.25.2.7任务5-2：运用HTML5表单标签制作注册页面步骤7制作“Email”输入框、“联系电话”输入框和“个人主页”输入框（1）在表单中插入三个div.item元素，里面分别包括label文字和输入框两部分；（2）在input元素中设置type="email"为“Email”输入框；（3）在input元素中设置type="tel"为“联系电话”输入框；（4）在input元素中设置type="url"为“个人主页”输入框；email类型、电话类型和url类型在输入时必须使用正确的输入格式，否则会出现错误提示。步骤8制作“排名目标”输入框和“表现认可度”输入框（1）在表单中插入两个div.item元素，里面分别包括label文字和输入框两部分；（2）在input元素中设置type="number"为数值类型输入框。“您对球队的排名目标”使用数值类型，取值范围在1至18；（3）在input元素中设置type="range"为范围类型输入框。“您对目前球队表现认可度”为范围类型，取值范围在1至100。5.25.2.7任务5-2：运用HTML5表单标签制作注册页面步骤9制作“颜色”输入框（1）在表单中插入一个div.item元素，里面包括label文字和输入框两部分；（2）在input元素中设置type="color"为颜色类型输入框。步骤10制作注册确认和提交按钮（1）在表单中插入一个复选框，在input元素中设置type="checkbox"即为复选框；（2）输入同意注册文字；（3）在表单中插入一个提交按钮，在input元素中设置type=“submit”即为提交按钮；（4）设置提交按钮的样式。步骤11保存文件，完成制作。5.3窗口容器本节介绍的iframe浮动框架和Bootstrap模态框、Bootstrap侧边面板都是跟窗口相关的容器。iframe浮动框架是在父窗口内设置的一个子窗口，把其他页面的内容显示在子窗口中；Bootstrap模态框（Modal）则是覆盖在父窗体上的子窗体；Bootstrap侧边面板是在窗体侧边隐藏或显示面板。窗口容器5.3

5.3.1浮动框架标签<iframe> 格式：<iframesrc="URL"name="子窗口名称"></iframe>功能：<iframe>标签创建包含另外一个文档的内联框架，该框架以行内块的形式在一个页面中直接引入另一个页面，又称为浮动窗口或子窗口。<iframe>标签可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。当将浏览的画面分割成多个窗口后，各窗口将可以扮演不同的功能。比如，可以把网页做成：一个窗口显示的是目录，另一个窗口显示在目录中所选取的项目内容。<iframe>标签的常用属性如下：（1）src属性：用于设定子窗口显示的初始页面。如果没有设定src属性，则子窗口不会有初始显示的内容；（2）frameborder属性：设定围绕iframe的边框宽度。例如，要隐藏iframe的边框，需要设置frameborder属性值为0（3）height属性：定义边框的宽度；（4）width属性：定义边框的高度；（5）scrolling属性：定义是否有滚动条（yes|no|auto)。当子窗口显示的内容超出子窗口的宽度和高度时，默认有滚动条。（6）name属性：规定iframe子窗口的名称。如果要把子窗口作为超级链接的目标窗口，则必须给子窗口定义名字。窗口容器5.3

5.5.2Bootstrap窗口容器本节介绍Bootstrap窗口容器包括模态框和侧边面板。1.Bootstrap模态框模态框（Modal）是覆盖在父窗体上的子窗体。子窗体可提供信息交互等内容。使用模态框需要在头元素引入Bootstrap的基本CSS文件bootstrap.min.css和bootstrap的基本js文件bootstrap.bundle.min.js。模态框的构建是把一个div元素用预定义类“.modal”去定义，并且要设置其id属性。该div元素里面包含一个用预定义类“.modal-dialog”定义的对话框。要激发这个模态框时，在按钮中设置data-bs-target属性为对应模态框的id值，同时设置data-bs-toggle="modal"即可。属性功能data-bs-target="#identifier"指定要切换的特定的模态框（带有id="identifier"），是激发模态框必须有的属性data-bs-toggle="modal"用于打开模态窗口，是激发模态框必须有的属性data-bs-dismiss="modal"用于关闭模态窗口类名功能.modal用于定义模态框，把<div>的内容识别为模态框，是构建模态框必须有的预定义类。.modal-dialog用于定义模态对话框，是构建模态框必须有的预定义类。.modal-content用于为模态窗口整体设置样式.modal-header定义模态框头部.modal-title定义模态框标题.modal-body定义模态框内容，用于为模态窗口的主体设置样式.modal-footer定义模态框底部，用于为模态窗口的底部设置样式窗口容器5.3

2.Bootstrap侧边面板Bootstrap侧边面板类似于模态框，都需要引用jQuery插件。点击如图5-32所示的两个按钮，可打开侧边面板，如图5-33所示。

侧边面板通过offcanvas类进行创建,通过以下四个类来控制侧边面板的位置：.offcanvas-start显示在页面左侧；.offcanvas-end显示在页面右侧；.offcanvas-top显示在页面顶部；.offcanvas-bottom显示在页面底部。可以使用a链接的href

属性或者button元素使用data-bs-target属性来设置侧边面板打开开关。这两种情况都需要使用data-bs-toggle="offcanvas"。

5.3.3Bootstrap模态框应用案例5.3

案例5-3：运用Bootstrap制作一个模态框，如图5-34所示。点击按钮时打开模态框，在模态对话框点击“关闭”按钮则关闭模态框<html><head><title>案例5-3</title><metacharset="utf-8"><linkhref="css/bootstrap.min.css"rel="stylesheet"><scriptsrc="js/bootstrap.bundle.min.js"></script></head><body><divclass="containermt-3"><p>点击按钮打开模态框</p><buttontype="button"class="btnbtn-primary"data-bs-toggle="modal"data-bs-target="#myModal">打开模态框</button></div><!—构建模态框--><divclass="modal"id="myModal"><divclass="modal-dialog"><divclass="modal-content"><!--模态框头部--><divclass="modal-header"> <h4class="modal-title">模态框标题</h4> <buttontype="button"class="btn-close"data-bs-dismiss="modal"></button></div><!--模态框内容--><divclass="modal-body">模态框内容..</div><!--模态框底部--><divclass="modal-footer"> <buttontype="button"class="btnbtn-danger"data-bs-dismiss="modal">关闭</button></div></div></div></div></body></html>5.3.4任务5-3：运用iframe制作子窗口网页5.3

1.任务描述按图5-35效果设计并制作网页，其导航栏包括：封面、静夜思、春晓、悯农，点击导航超级链接，在下面的子窗口显示相应的内容。初始显示为图片封面。5.3

2.任务要求通过本任务的练习，要掌握在网页中创建子窗口的基本方法；熟练掌握<iframe>标签的基本语法；掌握在超链接中如何使用指定名字的子窗口作为目标窗口。3.任务分析本任务总共制作4个网页文件：主网页为task5-3.html，网页jys.html为唐诗《静夜思》，网页cx.h

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论