Web前端技术 课件 模块二 任务1 入驻歌手栏目实现

入驻歌手栏目实现Web前端技术主讲老师：姜文秀延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述一个吸引用户的网页，往往包含很多图片。合理的使用图文混排，能够让页面内容更丰富，更引人入胜。本任务采用目前流行的flex布局方式，结合<div>、<span>和<img/>标签，完成“奕品堂音乐”网站主页上的“入驻歌手”栏目。效果如图2-1-1所示。延时符页面效果图延时符学习目标延时符学习目标掌握添加外部CSS样式的方法和CSS后代选择器的含义及使用方法；掌握CSS弹性布局flex多行弹性元素控制方法；掌握文本添加和样式设置方法。知识目标能够根据效果图使用合理标签进行页面结构搭建；能为页面添加外部CSS样式；能够根据需求灵活选择各类基础选择器进行样式添加；技能目标延时符培养严谨、精益求精的工作态度；培养良好的审美观念；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符span标签图像标签外部样式文件CSS的元素显示模式字体样式行高后代选择器弹性布局属性HTML标签：span标签延时符<span>标签是没有语义的，它就是一个盒子，用来装内容。span意为跨度、跨距。<span>标签用来布局，一行上可以多个<span>，宽度不可以设置，大小由内容撑开，上下边距不可以设置。前面的任务已经介绍过图像标签<img/>和它的src、width、height属性。要想在网页中灵活地使用图像，仅依靠src属性是远远不够的，为此HTML还为<img/>标签提供了其他的属性。HTML标签：图像标签延时符CSS样式：引入外部样式文件延时符外部样式也可称之为外链式或链入式，是将所有的CSS样式写在一个或多个扩展名为“.css”的样式文件中，通过<link/>标签将外部样式表文件链接到需要使用该样式的HTML文件中，其基本语法格式如下：外部样式及元素显示模式视频讲解<linkrel="stylesheet"type="text/css"href="CSS文件的路径"/>(1) rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。(2) type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。在一些宽松的语法格式中，type属性可以省略，但是建议写全。(3) href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径，建议使用相对路径，这个属性的设置最为关键。CSS样式：CSS的元素显示模式延时符网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点可以更好的布局网页。元素显示模式就是元素（标签）以什么方式进行显示，比如<div>独占一行，比如一行可以放多个<span>。HTML元素一般分为块级元素和行内元素两种类型。(1)

块级元素。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。块级元素的特点：①独占一行。②高度，宽度、外边距以及内边距都可以控制。③宽度默认是容器（父级宽度）的100%。④是一个容器及盒子，里面可以放行内或者块级元素。注意：文字类的元素内不能使用块级元素。<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。同理，<h1>-<h6>等都是文字类块级标签，里面也不能放其他块级元素。CSS样式：CSS的元素显示模式延时符(2)

行内元素。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。行内元素的特点：①相邻行内元素在一行上，一行可以显示多个。②高、宽直接设置是无效的。③默认宽度就是它本身内容的宽度。④行内元素只能容纳文本或其他行内元素。注意：链接里面不能再放链接。特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。CSS样式：CSS的元素显示模式延时符（3）行内块元素。在行内元素中有几个特殊的标签，<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。行内块元素的特点：①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。②默认宽度就是它本身内容的宽度（行内元素特点）。③高度，行高、外边距以及内边距都可以控制（块级元素特点）。CSS样式：CSS字体样式属性延时符为了方便控制页面中的文字的外观，CSS提供了一些字体有关的样式属性，具体如下。font-size：字号大小。font-size属性用于设置字号，该属性的值可以使用相对长度单位或绝对长度单位。相对长度单位有em，相对于当前对象内文本的字体尺寸的倍率；px，像素，是目前使用最频繁，最常用的单位，推荐使用。绝对长度单位有：in，英寸；cm，厘米，这个单位很大，慎用；mm，毫米；pt，点。font-family:字体。(5)font：综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法如下。选择器{font:font-stylefont-weightfont-size/line-heightfont-family}使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。(4)font-style：字体风格font-style属性用于设置字体风格，如设置斜体、倾斜或正常字体。其可用属性值默认为normal，表示标准的字体样式。italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别。(3)font-weight：字体加粗。取值为normal（正常粗细）、bold（加粗）、bolder（更粗）、lighter（更细）、100-900（100的整数，定义从细到粗，其中400等同于normal，700等同于bold，值越大字体越粗(2)font-family:字体。font-family属性用于设置文本字体。只要是操作系统正常安装的字体，在网页中都可以使用，如宋体、楷体、微软雅黑、黑体等。可以为文本同时设定几个不同字体，中间用逗号分隔。CSS样式：line-height行高延时符line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称之为行高。line-height常用的属性值单位有3种，分别为像素px、相对值em和百分比%，实际工作中使用最多的是像素px。注意：CSS没有给我们提供单行文字垂直居中的代码，这里可以使用一个小技巧来实现，就是让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。CSS样式：后代选择器延时符在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签），复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器又称为包含选择器，可以选择父元素里面后代元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。基本语法如下：元素1元素2{样式声明}上述语法表示选择元素1里面的所有元素2(后代元素)。元素1和元素2中间用空格隔开，元素1是父级，元素2是后代，最终选择的是元素2，元素2可以是儿子，也可以是孙辈等，只要是元素1的后代即可，元素1和元素2可以是任意基础选择器。CSS样式：justify-content延时符flex布局中，justify-content属性定义了项目在主轴上的对齐方式，使用这个属性前一定要确定好主轴是哪个。justify-content属性值如表2-1-4所示。CSS样式：flex-wrap延时符flex布局中，默认情况下项目都排在一条线（又称为“轴线”）上，flex布局中默认是不换行的。如果装不下，会缩小子元素的宽度，放到父元素里面。flex-wrap属性默认值nowrap，表示不换行。wrap表示换行。后代选择器及弹性布局属性视频讲解任务实施延时符结构分析样式分析设置页面样式页面结构结构分析延时符“入驻歌手”栏目由3个部分组成，分别为标题、图文混排（图片、图片说明文字）、仿按钮文字。所有的部分用<div>标签进行区域划分，所有的文字使用<span>标签，图片使用<img/>标签定义。样式分析1div.title、div.contentlist盒子使用flex布局，内容为水平分布，主轴方向为水平，d