Web前端技术 课件 模块二 任务3 头部导航栏目实现

头部导航栏目实现Web前端技术主讲老师：***延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述网页中的导航菜单如字典的检索条目，也如导航的地图，指引着用户快速进入不同的功能页面里，基本上在线的网站都会有导航菜单，大部分是一级导航菜单，也有不少是功能更复杂的二级或者多级菜单，总的来说，就是根据网站的内容把它们分类，并且以导航菜单的形式展示。因此，设计导航菜单是网页设计必须熟练掌握的技能，导航菜单设计有多种方案，目前用得最多的是利用列表与浮动布局相结合的技术实现。本小节将以音乐网站为例设计包含LOGO、搜索框等组合的导航菜单。延时符页面效果图延时符学习目标延时符学习目标掌握输入标签和行内span标签的方法；掌握CSS子代选择符的方法；掌握CSS后代选择符的方法。知识目标能够根据效果图使用合理标签进行页面结构搭建；能学会规划导航菜单的方法；能够正确采用子代选择符和后代选择符设置样式；能利用border-radius、background-position和text-indent设置搜索框。技能目标延时符培养细致认真的工作态度；培养与他人合作沟通的能力。素养目标知识点导图延时符知识点导图延时符相关知识延时符表单输入标签结构化伪类选择器border-radius属性text-indent属性子代选择符/后代选择符弹性布局之flex属性float属性HTML标签：表单延时符网站所具有的功能不仅仅是展示信息给用户，同时还能接收用户提交的信息。我们常见的登录注册、点餐取货等都是能够实现交互功能的系统，在前端设计中，实现交互功能重要的HTML标签就是表单，掌握表单的相关内容对以后学习动态网站设计有很大帮助。表单不是表格，既不用来显示数据，也不用来布局页面，它提供了一个交互的容器，在其中放置了多种标签用于与用户进行互动，比如登录表单中有文本输入框、密码框、提交按钮和复选框等标签，留言板表单中有多行文本框、文件上传和提交按钮等标签，当用户输入数据后，点击提交按钮，表单会收集所有填入的数据一并通过网络提交给后台系统服务器端进行处理，这就属于动态网页设计的范畴了。我们只需要掌握表单的设计，至于提交之后数据处理过程不在本书的知识范围内。表单的语法：<formname=“表单名称”action=“表单处理程序”method=“数据传送方式”>……</form>HTML标签：表单延时符在表单<form>标签中，可以设置表单的基本属性，包括表单名称、处理程序和传送方式等。一般情况下，表单的处理程序action属性和传送方式method属性是必不可少的参数，action属性用于指定表单数据提交到哪个地址进行处理，method用于指定数据提交到服务器时使用哪种HTTP提交方法，有两个值：get和post。（1） GET。get方法是通过URL传递给程序，数据容量小，且数据内容可在URL中直接查看，非常不安全。（2） POST。post方法将表单中的数据放在表单数据体中，按照变量和值相对应的方式传递到处理程序，它能传输大容量数据，且数据内容对用户不可见，非常安全。method的默认值是post。网页除了向用户传递信息外，还可以让用户与网页进行互动，HTML5提供了多种输入标签实现互动功能，比如输入框、密码框、单选按钮、复选按钮、菜单列表和提交按钮等，一般来说，输入标签需要放在表单标签<form></form>里，但随着移动设备的普及，前端技术不断发展，目前无需表单也可以完成与服务器端的信息交互功能。<input>是一个输入簇标签，通过其type属性决定不同的表现形式，如<inputtype=”text”>为单行文本框，<inputtype=”password”>为密码框，<inputtype=”radio”>为单选按钮等，熟练掌握这些属性，就能够得心应手地设计互动页面。HTML标签：输入标签延时符表单视频讲解本任务案例使用单行文本框来设计搜索框，代码如下：<inputtype="text"placeholder="音乐/视频/电台/用户">它的表现形式如图2-4-4所示，placeholder属性规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入值之前显示在输入框中。（本例中是提示可输入的搜索关键词类型）。当用户在输入框中输入内容时，提示信息会自动消失，如图2-4-5所示。

图2-3-4placeholder初始效果图图2-3-5placeholder单击文本框后效果图CSS样式：结构化伪类选择器延时符结构化伪类选择器是CSS3中新增加的选择器。作用：根据元素在HTML中的结构关系查找元素。优势：减少对于HTML中类的依赖，有利于保持代码整洁。场景：常用于查找某父级选择器中的子元素。常用的结构化伪类选择器如下：（1） :first-child和:last-child:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。例如：ulli:first-child表示为父元素ul的第一个子元素li设置样式。ulli:last-child表示为父元素ul中最后一个li元素设置样式。（2） :nth-child(n)和:nth-last-child(n):nth-child(n)用于选择作为其父元素的第n个子元素（n>=1）:nth-last-child(n)用于选择作为其父元素的倒数第n个子元素（n>=1）例如：ulli:nth-child(2)表示为父元素ul的第二个子元素li设置样式。ulli:nth-last-child(2)表示为父元素ul的倒数第二个子元素li设置样式。CSS样式：border-radius属性延时符border-radius允许设置元素的外边框圆角，它有两个单位，一个是绝对单位，比如px、pt、em等，一个是相对单位，比如%。属性值设置与margin、padding一样，可分别设置为单值（同时四个角）、双值（上下-左右）、三值（上-左右-下）和四值（上-右-下-左）。有个常用的设置方法为border-radius：50%，如果原图是正方形，则设置后为正圆形，如果原因是长方形，则设置后为椭圆形，如下图2-3-9和2-3-10所示：图2-3-9使用border-radius将正方形变为正圆图2-3-10使用border-radius将长方形变为椭圆CSS样式：text-indent属性延时符text-indent属性规定文本块中首行文本的缩进。在本例中设置该属性是为了确保用户输入的文本的起始位置在放大镜后面，而不会覆盖在放大镜图标上。当页面中有大量段落时，使用该属性可以快速设置首行文本的缩进。搜索框样式设置视频讲解CSS样式：子代选择符/后代选择符延时符网页中的元素，具有明显的层级关系。可以利用他们的相对位置和隶属关系，来定位元素，以简化选择符的设计。层级关系相关的选择符有两种：子代选择符和后代选择符。（1） 子代选择符：格式：选择符A>选择符B。作用：访问选择符A下的所有选择符B（只访问到下一级，只有一级）。（2） 后代选择符：格式：选择符A选择符B。作用：访问选择符A下的所有选择符B（无论嵌套多少级）。子代选择符/后代选择符视频讲解CSS样式：弹性布局之flex属性延时符在前面的章节中已经讲过flex弹性布局的几个基本属性，如需更加细致地设计页面，还需要掌握flex属性，flex属性是flex-grow、flex-shrink、flex-basis三个属性的缩写，用来设置flex项目的尺寸。先分别介绍flex-grow、flex-shrink、flex-basis属性的基本用法。（1） flex-grow。该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。CSS样式：弹性布局之flex属性延时符（2） flex-shrink。该属性用来设置子元素的缩小比例，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。（3） flex-basis。该属性用来设置元素的宽度，通常情况下大家使用width设置宽度。但是如果元素上同时设置了width和flex-basis，那么width的值就会被flex-basis覆盖掉。flex属性有几个常用缩写如表2-3-1所示：弹性布局之flex属性视频讲解CSS样式：float属性延时符块级元素在页面中会独占一行，可定义宽高，自上而下排列，也就是定位体系中的常规流。由于块级元素独占一行，即使元素后面有空间，也不会分配给下一个块级元素，如何在一行内显示多个块级元素是页面布局必须要解决的问题，常规流无法解决，那就要用到浮动(float)技术。浮动可以理解为让某个块级元素脱离常规流，漂浮在常规流之上。浮动的属性值如表2-3-2。font-family:字体。Float属性视频讲解任务实施延时符结构分析样式分析设置页面样式页面结构结构分析延时符“导航菜单”栏目由上下2个部分组成。上半部分由LOGO、菜单项、搜索框和注册登录链接结成，其中LOGO用<img>标签定义，导航菜单项用无序列表<ul><li>标签定义，热点