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

下载本文档

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

文档简介

Web前端开发技术基础任务3红色胜迹页面制作

——使用CSS设置列表样式通关任务1制作网站导航条AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述本任务将使用HTML中的列表标签搭建红色文化资源网的导航条结构，并通过CSS样式对其进行美化，最终效果如图3-3-1所示。任务描述任务目标1.掌握无序列表的基础样式设置。2.掌握鼠标悬停在超链接上时的样式设置。3.掌握块元素和行内元素的区别及转换方法。4.能够利用无序列表制作网站横向导航条。图3-3-1导航条最终效果任务实施——HTML结构分析导航条用无序列表<ul>标签搭建，将每个菜单项分别置于列表项目<li>标签中，并为菜单文字添加超链接<a>标签，代码结构如图3-3-2所示。

图3-3-2代码结构任务实施——构建HTML结构（1）创建站点并保存网页图3-3-3设置<title></title>标签对后的代码及效果1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目名称命名为“chapter3-3”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”，单击“创建”按钮创建新项目。2）将Web项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入文字“导航条”，为网页设置文档标题。（

2）创建HTML结构图3-3-4导航条HTML代码及效果任务实施——构建HTML结构任务实施——CSS样式分析图3-3-1导航条最终效果1）导航条宽度为960px，高度为50px，在页面水平方向居中。2）每个导航项目都向左浮动，宽度为159px，右外边距为1px，文字在垂直和水平方向居中，清除列表项前面的默认小圆点符号。3）每个导航项超链接文字都为白色，没有下画线，背景颜色为#c40001。4）鼠标指针经过超链接时，超链接的背景颜色变为红色（#ff0000）。任务实施——CSS样式添加在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1）清除所有元素的默认内、外边距，清除前后效果如图3-3-5所示。图3-3-5清除默认内、外边距的前后效果任务实施——CSS样式添加2）设置导航条<ul>的样式，效果如图3-3-6所示。图3-3-6完成上述设置后的效果任务实施——CSS样式添加企业说3）设置每个列表项<li>的样式。代码解析列表项<li>默认情况下为块元素，每个<li>都独占一行。为了使多个列表项<li>显示在同一行中，本任务使用float:left（向左浮动）来实现。项目列表<ul>的高度为50px，要使列表项中的文字在垂直方向居中，可以将line-height（行高）设置为与高度相同的50px。任务实施——CSS样式添加企业说4）设置列表项目中超链接的样式，设置完成前后的效果如图3-3-7和图3-3-8所示。代码解析图3-3-7超链接未转换为块元素的效果图3-3-8超链接转换为块元素的效果代码解析超链接<a>标签默认情况下为行内元素，行内元素的宽度和高度由其内容的大小决定，width（宽度）和height（高度）样式属性对行内元素是无效的。上面代码中的“display:block;”将超链接<a>转换为块元素后，超链接<a>即继承其父元素列表项<li>的宽和高。这里设置超链接为块元素，可让超链接的区域增大至与列表项<li>一样，使鼠标指针悬停状态的效果更美观，

用户单击超链接时会更为方便。任务实施——CSS样式添加企业说5）设置鼠标指针悬停在超链接时的样式。代码解析代码解析在CSS中，可以通过伪类定义不同的超链接鼠标状态的样式，常见的CSS超链接鼠标状态见表3-3-1。表3-3-1 常见的CSS超链接鼠标状态代码状态说明a:link未访问时的状态a:visited已访问过的状态a:hover鼠标指针悬停时的状态a:active鼠标单击时的状态Web前端开发技术基础通关任务2制作访问热点栏目AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述本任务主要使用HTML中的有序列表<ol>标签搭建红色胜迹二级页面中的访问热点栏目，并通过CSS样式对其进行美化，最终效果如图3-3-9所示。任务描述任务目标1.掌握有序列表的基础样式设置。2.掌握文本溢出省略样式的应用。3.能够利用有序列表制作访问热点栏目。图3-3-9访问热点栏目最终效果任务实施——HTML结构分析访问热点栏目使用<div>标签作为容器，包含栏目标题和栏目内容，分别使用<h2>标签和<ol>有序列表标签来标识。栏目内容将由8个列表项组成，每个列表项都使用<li>列表项标签来创建。为了增加互动性，每个列表项的文字都用<a>超链接标签来包裹，以便用户可以通过单击跳转到相应的详情页面，代码结构如图3-3-10所示。图3-3-10代码结构任务实施——构建HTML结构（1）创建站点并保存网页图3-3-11设置<title></title>标签对后的代码及效果1）打开项目“chapter3-3”，在项目中新建.html文件，将其重命名为“example02.html”。2）打开example02.html文件，在<title></title>标签对中输入文字“访问热点”，为网页设置文档标题，如图3-3-11所示。（

2）创建HTML结构任务实施——构建HTML结构任务实施——CSS样式分析1）清除所有元素的默认内外边距，移除超链接的默认下画线，将超链接的文字颜色改为灰色（#333）。2）栏目宽度为330px，

文字的行高为35px，栏目的上边框为4px、实线、红色（#c40001），左、右、下边框均为1px、实线、灰色（#cccccc），适当调整内外边距。3）栏目标题文字大小为18px，文字颜色为红色（#c40001），下边框为1px、实线、灰色（#cccccc）。4）每个列表项单行文本溢出时出现省略号效果，列表符号显示在文本内部。5）鼠标指针悬停在超链接时显示下画线。图3-3-9访问热点栏目最终效果任务实施——CSS样式添加在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1）清除所有元素的默认内外边距，设置前后效果分别如图3-3-13和图3-3-14所示。图3-3-13清除默认内外边距前的效果图3-3-14清除默认内外边距后的效果任务实施——CSS样式添加企业说2）设置超链接的样式。3）设置<div>的样式，效果如图3-3-15所示。任务实施——CSS样式添加4）设置<h2>的样式。5）设置<li>的样式，效果如图3-3-16所示。图3-3-16设置<li>样式后的效果任务实施——CSS样式添加6）设置鼠标指针悬停在列表项中的超链接时的样式。7）保存文件，在浏览器中查看页面效果。Web前端开发技术基础通关任务3制作红色胜迹栏目AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述在本任务中，我们将采用无序列表来呈现红色胜迹栏目，每个<li>标签都代表一个红色胜迹，通过CSS样式美化页面，使得信息呈现更加有序、清晰，最终效果如图3-3-17所示。任务描述任务目标1.掌握使用图像作为列表符号的设置方法。2.掌握利用无序列表制作文章列表的方法。图3-3-17红色胜迹栏目最终效果任务实施——HTML结构分析红色胜迹栏目使用<div>标签作为容器，栏目包含栏目标题和栏目内容，分别使用<h2>标签和<ul>无序列表标签来标识。栏目内容由8个列表项组成，每个列表项都使用<li>标签来创建。每个列表都包含文章标题和发布时间，发布时间使用<span>标签标识。为了增加互动性，每个列表项的标题和发布时间都用<a>超链接标签来包裹，以便用户可以通过单击跳转到相关的文章。代码结构如图3-3-18所示。图3-3-18代码结构任务实施——构建HTML结构（1）创建站点并保存网页1）打开项目“chapter3-3”，在项目中新建.html文件，将其重命名为“example03.html”。2）将本任务的图片素材复制到chapter3-3项目的img文件夹中。3）打开example03.html文件，在<title></title>标签对中输入文字“红色胜迹”，为网页设置文档标题。（2）创建站点并保存网页1）在<body></body>标签对中输入<div></div>标签对来制作红色胜迹栏目，设置其class为hssj。2）在<div></div>标签对中添加<h2></h2>标签对来制作栏目标题，并在标签对中输入“红色胜迹”。3）在<h2></h2>标签对后添加<ul></ul>标签对来制作栏目内容，在<ul></ul>标签对中添加<li></li>标签对，并在<li></li>标签对中添加<a></a>标签对，在<a></a>标签对中输入胜迹文章标题和发布日期。由于发布日期需要右对齐，因此将发布日期置于<span></span>标签对中，以便控制其对齐方式。4）同理，完成其余7个列表项的制作。完成后的代码及效果如图3-3-19所示。任务实施——构建HTML结构图3-3-19红色胜迹栏目HTML代码任务实施——CSS样式分析1）清除所有元素的默认内外边距，移除超链接的默认下画线，将超链接文字颜色改为灰色（#333）。2）栏目宽度为580px，文字的行高为35px，栏目边框为1px、实线、灰色（#ccc），适当调整内外边距。3）栏目标题文字大小为18px，文字颜色为红色（#c40001），下边框为1px、实线、灰色（#ccc）。4）列表项的下边框为1px、虚线、灰色（#ddd），列表符号为指定图片并显示在文本内部。5）列表项中的发布日期向右浮动。6）鼠标指针悬停在超链接时，文字显示为红色（#c40001）。图3-3-17红色胜迹栏目最终效果任务实施——CSS样式添加在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1）清除所有元素的默认内外边距。2）设置超链接的样式。任务实施——CSS样式添加企业说3）设置<div>的样式。4）设置<h2>的样式。任务实施——CSS样式添加5）设置<li>的样式，设置样式前后的效果分别如图3-3-20和图3-3-21所示。

图3-3-20设置<li>样式前的效果图3-3-21设置<li>样式后的效果任务实施——CSS样式添加6）设置列表项中发布日期的样式。8）保存文件，在浏览器中查看页面效果。7）设置鼠标指针悬停在列表项中超链接时的样式。Web前端开发技术基础通关任务4制作胜迹图展栏目AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述本任务，我们将采用项目列表来制作胜迹图展栏目，每个<dl>标签代表一个红色胜迹，<dl>中的<dt>包含胜迹图片，而<dd>包含对应的胜迹名称，通过CSS样式美化后，最终效果如图图3-3-22所示。任务描述任务目标1.掌握<dl>、<dt>、<dd>标签在网页中的作用及使用方法。2.掌握利用定义列表制作图文列表的方法。图3-3-22胜迹图展栏目最终效果任务实施——HTML结构分析胜迹图展栏目使用<div>标签作为容器，栏目包含栏目标题和栏目内容，栏目标题使用<h2>标签制作。栏目内容由8个图文列表组成，每个图文列表都使用<dl>定义列表标签来创建。图文列表包含胜迹图片和胜迹名称两部分，分别用<dt>（定义术语）标签和<dd>（定义描述）标签创建。代码结构如图3-3-23所示。图3-3-23代码结构任务实施——构建HTML结构（1）创建站点并保存网页1）打开项目“chapter3-3”，在项目中新建.html文件，将其重命名为“example04.html”。2）将本任务的图片素材复制到chapter3-3项目的img文件夹中。3）打开example04.html文件，在<title></title>标签对中输入文字“胜迹图展”，为网页设置文档标题。（2）创建站点并保存网页1）在<body></body>标签对中输入<div></div>标签对来制作胜迹图展栏目，设置其class为“sjtz”。2）在<div></div>标签对中添加<h2></h2>标签对来制作栏目标题，并在<h2></h2>标签对中输入“胜迹图展”。3）在<h2></h2>标签对后添加<dl></dl>标签对来制作第一个胜迹图文列表，在<dl></dl>标签对中分别添加<dt></dt>标签对和<dd></dd>标签对。在<dt></dt>标签对中添加<a></a>标签对，在<a></a>标签对中插入胜迹图片<img>标签，设置图片的alt属性。在<dd></dd>标签对中添加<a></a>标签对，在<a></a>标签对中输入胜迹的名称。4）同理，完成其余7个列表项的制作。完成后的代码及效果如图3-3-24所示。任务实施——构建HTML结构图3-3-24胜迹图展栏目HTML代码及效果任务实施——构建HTML结构企业说代码解析代码解析<dl>、<dt>和<dd>标签的关系和使用规则在HTML中，<dl>标签用于创建定义列表，该列表由一系列术语及其定义组成。每个术语都由<dt>标签标记，而每个定义由<dd>标签描述。这种结构为网页内容提供了清晰、有序的表达方式，特别适用于展示术语、概念及其解释。<dl>、<dt>和<dd>三者的关系如下。1）在定义列表中，<dt>和<dd>标签处于同级关系，即<dt>不能嵌套在<dd>内部，反之亦然。2）一个<dl>标签内可以包含多对<dt>和<dd>标签，以表示多个术语及其定义。3）一个<dt>标签可以用多个<dd>标签进行说明、描述，也可以没有。通常建议每个<dt>标签对应一个<dd>标签，以保持列表的清晰度和一致性。4）<dt>或<dd>标签必须嵌套在<dl>标签内，不能单独使用。任务实施——CSS样式分析4）每个列表<dl>都向左浮动，宽度为211px，内边距为10px，外边距为3px，背景颜色为#eee。5）胜迹图片所在<dt>标签宽度为211px，高度为150px，溢出部分隐藏。6）胜迹名称在<dd>标签中水平居中显示，行高为35px。图3-3-22胜迹图展栏目最终效果1）清除所有元素的默认内外边距，清除超链接的默认下画线，将超链接文字颜色改为灰色（#333）。2）栏目宽度为960px，高度为460px，在页面水平居中显示，内边距为5px，栏目边框为1px、实线、灰色（#ccc），清除左右两边的浮动影响。3）栏目标题文字大小为18px，文字颜色为#c40001，行高35px，下边框为1px、实线、灰色（#ccc）。任务实施——CSS样式添加在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1）清除所有元素的默认内外边距。2）设置超链接的样式。任务实施——CSS样式添加3）设置<div>的样式。4）设置<h2>的样式。任务实施——CSS样式添加5）设置每个胜迹列表<dl>的样式，设置样式的前后效果分别如图3-3-25和图3-3-26所示。图3-3-25设置列表项样式前的效果图3-3-26设置列表项样式后的效果任务实施——CSS样式添加6）设置胜迹图片所在的<dt>标签的样式。7）设置胜迹图片的样式。8）设置列表中胜迹名称的样式。知识宝典——列表样式列表是网页中一种重要的信息组织和展示方式，它们通过有序或无序的方式，清晰、直观地展示网页内容，帮助用户快速找到所需信息，不仅能够提高页面的可读性和用户体验，还能够通过层次分明的结构引导用户进行浏览和操作。无序列表的默认列表项符号为黑色实心圆●，有序列表的默认列表项符号为数字1，2，3，…，通过list-style-type属性可以改变列表项符号类型。其语法格式为：1

.设置列表项的符号类型（list-style-type）list-style-type:属性值;无序列表list-style-type常用属性值及说明见表3-3-2，举例及效果见表3-3-3。有序列表list-style-type常用属性值及说明见表3-3-4，举例及效果见表3-3-5。属性值说明none无标记disc默认值，实心圆

●circle空心圆

○square实心方块

■表3-3-2 无序列表list-style-type常用属性值及说明属性值说明none无标记decimal默认值，如：数字1、2、3…lower-roman小写罗马数字，如：i、ii、iii…upper-roman大写罗马数字，如：I、II、III…lower-alpha小写英文字母，如a、b、c…upper-alpha大写英文字母，A、B、C…表3-3-4 有序列表list-style-type常用属性值及说明知识宝典——列表样式表3-3-3 无序列表list-style-type属性值举例及效果知识宝典——列表样式表3-3-5 有序列表list-style-type属性值举例及效果知识宝典——列表样式知识宝典——列表样式list-style-image属性可以设置指定图像作为有序或无序列表项符号，举例及效果见表3-3-6。其语法格式为：2

.设置图像作为列表项符号（list-style-image）list-style-image:url(图像路径和名称);注意：需始终规定一个list-style-type属性，以防list-style-image图像不能正常显示。表3-3-6 列表list-style-image属性值举例及效果知识宝典——列表样式list-style-position属性可以声明列表符号相对于列表项内容的位置。其属性值包括outside和inside。取值为outside（外部）时，符号会放在离列表项边框边界一定距离处。取值为inside（内部）时，列表项符号就像插入在列表项内容最前面的行内元素一样。liststyle-position常用属性值及说明见表3-3-7，举例及效果见表3-3-8。其语法格式为：3.定位列表项符号（list-style-position）list-style-position:属性值;表3-3-7 list-style-position常用属性值及说明知识宝典——列表样式表3-3-8 list-style-position属性值举例及效果知识宝典——列表样式list-style简写属性可以综合设置列表的样式，设置的属性顺序如下。list-style-type→list-style-position→list-style-image可以不设置其中的某一属性值，如“list-style:insideurl(img/arrow.png

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

温馨提示

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

最新文档

评论

0/150

提交评论