W前端技术基础开发概述12_第1页
W前端技术基础开发概述12_第2页
W前端技术基础开发概述12_第3页
W前端技术基础开发概述12_第4页
W前端技术基础开发概述12_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术基础任务4红色故事页面制作——使用CSS设置表格样式通关任务1 制作红色人物页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述本任务将使用HTML中的表格标签搭建广西红色文化资源网站的红色人物表格，并通过CSS样式对其进行美化，最终效果如图3-4-1所示。任务描述任务目标1.掌握创建表格的方法。2.掌握表格HTML标签的用法。3.掌握使用CSS样式美化表格的方法。4.能够利用表格制作红色人物页面。图3-4-1任务效果图任务实施——结构分析任务实施——构建HTML结构（1）创建站点并保存网页1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目名称命名为“chapter3-4”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”，单击“创建”按钮新建项目。2）将项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入标题文字“红色人物”。1）在<body></body>标签对中输入<table></table>标签对来制作表格，设置<table>标签中的border边框属性值为1px，设置cellspacing单元格间距属性值为0px。2）在<table></table>标签对中输入<caption></caption>标签对，并在其中输入“红色人物”文字，作为表格标题。3）在<caption></caption>标签对后添加6个<tr></tr>标签对，在第1个<tr></tr>标签对中输入4个<th></th>标签对，并分别在其中输入文字“中心人物”“故事名称”“故事背景”“类别”，设置表格表头的内容。（

2）创建HTML主体结构任务实施——构建HTML结构4）在第2个<tr></tr>标签对中输入4个<td></td>标签对，并在其中分别输入第1行单元格的文字内容：“黄日葵”“国难书生”“救国救民的革命场景”“音乐剧”。5）在第3个<tr></tr>标签对中输入4个<td></td>标签对，并在其中分别输入第2行单元格的文字内容：“陈树湘”“血色湘江”“红色湘江战役为背景”“音乐剧”。6）在第4个<tr></tr>标签对中输入4个<td></td>标签对，并在其中分别输入第3行单元格的文字内容：“朱锡昂”“八桂先驱”“朱锡昂42年的革命事迹为背景”“采茶戏”。7）在第5个<tr></tr>标签对中输入4个<td></td>标签对，并在其中分别输入第4行单元格的文字内容：“韦拔群”“拔哥”“革命事迹为背景”“民族歌剧”。8）在第6个<tr></tr>标签对中输入4个<td></td>标签对，并在其中分别输入第5行单元格的文字内容：“黄文秀”“黄文秀”“黄文秀的扶贫事迹为背景”“壮剧”。完成后的代码及效果（

3）css样式分析任务实施——构建HTML结构1）设置表格标题外边距为10px，文字大小为20px。2）设置表格边框为1px、实线、黑色，相邻的单元格边框合并在一起，表格在页面上水平居中，表格文字大小14px，文字居中。3）设置表格表头单元格的背景颜色为#f00，高40px，文字大小为16px，文字颜色为#fff。4）设置表格单元格高40px、宽180px，文字大小为16px。红色人物完成CSS样式设置后的效果（

3）css样式添加任务实施——构建HTML结构知识宝典-——表格的HTML标签及属性（1）表格标签<table><table></table>定义一个表格，表格的其他组成元素，如行、单元格等，都包含在<table></table>标签对中。<table>标签常用的属性、值及描述见表3-4-1。（2）行标签<tr><tr></tr>定义表格中的一行，嵌套在<table></table>中。在<table></table>标签对中有多少<tr></tr>标签对，表格就有多少行。<tr>标签包含一个或多个<th>或<td>标签。（3）表头单元格标签<th><th></th>标签对定义HTML表格中的表头单元格，文本通常呈现为粗体且居中显示。HTML表格中的单元格分为以下两种类型。表头单元格：包含表头信息（由th元素创建）。标准单元格：包含普通数据单元格信息（由td元素创建）。知识宝典-——表格的HTML标签及属性（5）标题标签<caption><caption></caption>标签对定义表格的标题，必须直接放置到<table>开始标签之后。一个表格只能定义一个标题。通常，标题会居中于表格之上。（6）单元格合并属性colspan和rowspancolspan用来指定单元格横向跨越的列数，即实现列合并。colspan属性用在<td>或<th>标签中。例如，横向合并相邻的3个单元格，就可以使用colspan属性，且能指定要跨越的列数。其语法格式为：rowspan用来指定单元格纵向跨越的行数，即实现行合并。rowspan属性通常用于<td>和<th>标签中。例如，纵向合并相邻的2个单元格，就可以使用rowspan属性，且能指定要跨越的行数。其语法格式为：知识宝典-——表格的HTML标签及属性2.常用的CSS表格样式定义定义表格样式时，CSS表格属性能够极大地改善表格的外观，可以创建出各种美观的表格。（1）设置表格或单元格的宽度和高度对单元格标签<td>应用width和height属性。其中，width属性设置表格或单元格的宽度，height属性设置表格或单元格的高度。这两个属性可以控制单元格宽度和高度。（2）设置表格或单元格内容的水平对齐方式表格或单元格内容的水平对齐方式可使用text-align属性设置。其语法格式为：该属性的常用属性值及描述见表3-4-3。知识宝典-——表格的HTML标签及属性（3）设置表格或单元格内容的垂直对齐方式表格或单元格中内容的默认对齐方式是水平方向左对齐、垂直方向居中。表格或单元格内容的垂直对齐方式可使用vertical-align属性设置。其语法格式为：该属性的常用属性值及描述见表3-4-4。知识宝典-——表格的HTML标签及属性border-collapse属性的常用属性值及描述见表3-4-6。（6）设置表格边框合并当使用CSS设置单元格边框时，如果给每个单元格都设置宽度为1px的边框，那么相邻两个单元格边框的实际宽度是1px+1px=2px，美观程度将受影响。此时可以使用broder_x0002_collapse属性将相邻的边框合并为单线。其语法格式为：Web前端开发技术基础通关任务2 制作红色故事页面AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述本任务将在表格中使用HTML中的合并单元格标签搭建广西红色文化资源网站的红色故事页面，并通过CSS样式对单元格背景、边框和鼠标指针悬停时的变色等效果进行美化，最终效果如图3-4-4所示。任务描述任务目标1.掌握合并单元格、拆分单元格的操作方法。2.能够使用CSS样式美化表格。图3-4-2任务效果图任务实施——结构分析本页面使用<table>表格标签来进行HTML结构的搭建。整个表格包含6行5列，使用<caption></caption>标签对设置表格标题，使用<th></th>标签对设置表格表头，使用<td></td>标签对设置表格单元格，最后在表格标签中添加相应的文本内容。代码结构如图3-4-5所示.（1）HTML结构分析图3-4-5：结构布局分析图任务实施——构建HTML结构（2）创建站点并保存网页企说1）打开项目“chapter3-4”，在项目中新建.html文件，将其重命名为example02.html。2）打开example02.html文件，在<title></title>标签对中输入标题文字“红色故事”，如图3-4-7所示。（

2）创建HTML主体结构任务实施——构建HTML结构1）在<body></body>标签对中添加<table></table>标签对来制作表格，设置<table>标签中的border边框属性值为1px。2）在<table></table>标签对中添加<caption></caption>标签对，并在其中输入“红色故事”文字，设置表格标题。3）在<table></table>标签对中添加6个<tr></tr>标签对，在第1个<tr></tr>标签对中添加5个<th></th>标签对，并分别在其中输入文字“故事名称”“中心人物”“故事介绍”“故事图片”“类别”，设置表格表头。4）在第2个<tr></tr>标签对中添加5个<td></td>标签对，并在其中输入相应的内容。其中，在第3个<td></td>标签对中添加<p></p>段落，在第4个<td></td>标签对中插入图片<img>标签，并将<img>标签的width属性设置为100px，将height属性设置为70px。5）第3~6行表格单元格设置同上。6）将第2个<tr></tr>标签中第5个<td></td>标签对的rowspan属性值设为2，设置纵向单元格合并。7）将第6个<tr></tr>标签中第1个<td></td>标签对的colspan属性值设为2，设置横向单元格合并。8）在第2个、第4个和第6个<tr></tr>标签对中添加类选择器class，其命名类名称为“one”。9）在第3个和第5个<tr></tr>标签对中添加类选择器class，其命名类名称为“two”。（

3）css样式分析任务实施——构建HTML结构1）清除所有元素的默认内外边距，设置字体样式为“微软雅黑”。2）设置表格在页面上水平居中，边框2px、实线、黑色，表格相邻的单元格边框合二为一。3）设置表格标题文字大小为28px。4）设置表头高为55px、宽为100px，文字大小为16px，居中，文字颜色为#fff，背景颜色为#f00。5）设置表格单元格文字居中，颜色为#000000，文字大小为14px。6）设置表格图片与单元格之间的距离为5px。7）设置表格单元格文字段落的宽为500px，外边距为4px，文字大小为12px，行高为20px，首行缩进2em，文字左对齐。8）设置.one在该行的背景颜色为#ebebeb。9）设置.two在该行的背景颜色为#fff。10）设置鼠标指针悬停在.one时该行的背景颜色为#ccc。11）设置鼠标指针悬停在.two时该行的背景颜色为#d2d2d2。红色故事完成CSS样式设置后的效果（

3）css样式添加任务实施——构建HTML结构Web前端开发技术基础晋级任务

广西红色故事——书籍篇搭建AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述综合应用文本标签、图像标签、表格标签、列表标签完成广西红色故事——书籍篇的制作，并完成导航中各页面的链接，没有链接的菜单文字则为空链接，具体网页效果如图3-4-9所示。任务描述任务目标1.掌握合并单元格、拆分单元格的操作方法。2.能够使用CSS样式美化表格。图3-4-9任务效果图任务实施——结构分析1）页面结构分为页面头部<header>、中间主体<table>和页面尾部<footer>三大块。2）页面头部<header>包括“banner”和导航栏两部分，分别用<div>和<nav>标

识，

设

置<div>的类名为banner。

在<div>中插入banner图

片，

并

设

置

图

片宽度为850px；

在<nav>中添加无序列表<ul>，为当前页面“红色故事”所在的<a>设置类名为“act”。3）在中间主体部分<table>设置表格标题，并设置8行4列的表格，在其输入文字。4）表格第1行为表头单元格行，并在其输入文字。5）将表格的第4、6、8行的单元格合并，并在其中输入文字。6）为第3~8行的<tr>标签设置不同的类名，以实现隔行变色的效果。7）进行页面尾部<footer>模块的结构和内容制作。在页面尾部加入水平线<hr>标签并输入相应的文字，注意版权符号的输入。（1）HTML结构搭建操作要点图3-4-10：结构布局分析图（

2）CSS样式美化操作要点任务实施——构建HTML结构1）清除所有元素的默认内外边距，设置所有元素的盒子计算方式为块模式“border-box”。2）设置页面的默认字体为微软雅黑、文字大小为14px、文字颜色为#333、行高为35px。3）清除超链接的默认下画线，设置超链接的文字颜色为#333。4）设置类名为“banner”的<div>盒子内容水平居中。5）设置导航栏<nav>的高度为50px、背景颜色为#c40001。6）设置<nav>中的<ul>在页面中水平居中、宽度为960px，清除默认的列表项目符号。7）设置<nav>中的列表项<li>向左浮动、宽度为150px、行高为50px、文本内容水平居中、背景颜色为#c40001。8）设置<nav>的列表项<li>中的超链接为块元素、文字颜色为白色、文字为粗体。9）设置鼠标指针悬停时的超链接，以及当前菜单项（即class为act的<a>标签）的背景颜色为红色

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论