教学课件任务06-2：网页中列表的应用--使用列表制作复杂导航.pptx

教材配套资源页完整PPT课件教学课件任务06-2：网页中列表的应用-使用列表制作复杂导航1网页设计与开发项目06 网页中列表的应用任务6-2 使用列表制作复杂导航2任务6-2 使用列表制作复杂导航 知识点 掌握列表的嵌套及其样式技能点 学会使用列表制作多级导航菜单 能够熟练设置多级列表的样式3一、列表的嵌套u在使用列表时，列表项中也有可能包含若干子列表项。无序列表和有序列表不仅可以自身嵌套，而且可以互相嵌套。4一、列表的嵌套u【例6-2-1】列表的嵌套手机华为手机小米手机荣耀手机魅族手机手机配件手机壳耳机充电宝手机电池影音娱乐通信服务数码配件5二、制作多级导航菜单水平二级导航菜单制作u二级导航菜单通常是鼠标触发主菜单时，在主菜单下方或者左右两侧显示二级菜单，鼠标移入二级菜单点击可以打开相应的链接。二级子菜单出现的位置紧随一级菜单。6二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。7二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。*padding: 0; margin: 0;.dropdown,.dropdown-contentlist-style-type: none;8二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。由于两级菜单的标记均为li，为了方便定位到它们，可以充分利用子元素选择器“”。.dropdownliwidth: 100px; height: 40px;border: 2px solid;border-radius: 8px;line-height: 40px;text-align: center;color:#000; font-size:16px;cursor:pointer;/*手型光标*/9二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-content a color:#fff;display:block;width: 100px;text-align: center;line-height: 30px;text-decoration:none;background: #008;10二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-content a:hover background-color:#00f;11二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。.dropdownli position: relative;.dropdown-contentposition: absolute;left: 5px;top: 40px;12二、制作多级导航菜单水平二级导航菜单制作下拉菜单菜单1菜单2菜单3CSS样式部分（1）进行初始化的设置，将文档中所有元素的margin和padding设为0；（2）去掉所有列表项前面的图标；（3）分别对主菜单和子菜单项的样式进行设置。（4）鼠标移入li时改变子元素a的背景色； （5）由于子菜单的位置始终跟随主菜单，所以可以使用定位。将参照物主菜单设置成相对定位，下拉菜单容器设置成绝对定位，并且始终在主菜单项的下方。（6）设置二级下拉菜单隐藏，在鼠标划过主菜单的时候，下拉菜单显示。.dropdown-content display:none; /*初始时下拉菜单隐藏*/.dropdownli:hover .dropdown-content display:block;13二、制作多级导航菜单竖直伸缩型二级菜单制作u竖直伸缩型二级菜单是当鼠标触发主菜单时，相应的子菜单竖直显示在其下方，挤占其他主菜单项的位置。14二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。15二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。*padding: 0; margin: 0;.dropdown,.dropdown-contentlist-style-type: none;16二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。.dropdownliwidth: 100px;background: #000088;border: 1px solid #fa0;color: #fff;text-align: center;padding: 8px 0;cursor: pointer;17二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。.dropdown-content adisplay: block;width: 100px;background: #FA0;color: #00f;height: 30px;text-align: center;line-height: 30px;text-decoration: none;border-bottom: 1px solid;18二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。为美观起见，增加一点top偏移量。.dropdown-contentposition: relative;top: 8px;left: 0;19二、制作多级导航菜单竖直伸缩型二级菜单制作u首先，写好body中的列表元素。 menu1menu1-1menu1-2menu1-3 menu2 menu3然后，进行CSS样式的设置（1）初始化设置，将ul、ol等元素的默认padding、margin都置0。（2）设置所有列表项前面的图标类型为none。（3）设置第一级列表项的外观样式。（4）设置二级菜单所有的a为块级元素，并对其文字格式进行设置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本类似。（5）设置二级子菜单的位置。二级子菜单的出现要挤占后面一级菜单的位置，所以要在文档流中占据一定的高度，因此二级菜单容器要设置相对定位relative。（6）正常情况下，二级菜单隐藏，当鼠标滑过主菜单时，二级菜单才显示。（7）设置鼠标滑动到二级菜单时子菜单项背景色的变换。.dropdown-contentdisplay: none;.dropdownli:hover .dropdown-contentdisplay: block;.dropdown-content a:hoverbackground: #FF0;20实训任务u使用列表完成网上商城首页左侧导航菜单的二级导航效果，正常情况下导航菜单背景颜色为#455159，鼠标放上背景色为#ff6700，二级导航菜单可在图示文本的基础上加上图片。21实训任务u使用列表完成网上商城首页左侧导航菜单的二级导航效果，正常情况下导航菜单背景颜色为#455159，鼠标放上背景色为#ff6700，二级导航菜单可在图示文本的基础上加上图片。22本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 23