任务七 用项目列表定位导航条学习指导.docxVIP

任务七 用项目列表定位导航条学习指导 任务七页面?| 素材下载 | 电子教程7 1、知识目标与要求 （1）掌握ul样式的属性； （2）掌握li样式的属性 2、技能目标与要求 （1）掌握定位导航条的制作技巧； 3、方法能力目标与要求 （1）掌握项目列表定位导航条方法； 4、职业素养目标与要求 （1）培养严谨、细致、负责任的工作态度； （2）培养主动参与、团队协作的集体意识；（3）培养科学文明、积极向上的传媒道德 任务描述 网站除了页面布局之外，最重要的就是导航部分，导航很大程度上决定了网页的风格。任务六中的导航采用直接排列a标签方法，通过设置a标签的margin属性调整位置；或者用表格进行超级链接的定位。在CSS设计的网页中，更多是通过项目列表（即 ol 和 ul标签）定位导航。由于项目列表小巧而灵活，引入了CSS后，被赋予了很多新的属性，甚至超越了它最初设计时的功能。此任务运项目列表定位导航，通过对导航的设计和制作，使读者掌握项目列表样式的制作技巧，并能熟练应用。制作页面如下图7-1所示： 制作思路 本任务重点是用项目列表制作导航。超链接常常结合项目列表来定位，以下是典型的超链接导航定位代码。 ??ul ? lia href=#首页/a/li ? lia href=#陕西/a/li ? lia href=#西安/a/li? ??/ul 本任务导航条上有面包屑导航和二级导航，分别用两个ul进行制作。 超链接通过列表项li横向水平排列的方法进行定位； 项目列表ul及其列表项li都是块元素。有默认margin和padding，在样式制作时需将其值清0，否则会影响排版。 ul要去掉项目列表的符号，设置list-style-type:none; 超链接用锚伪类进行美化和位置调整，需设置display:block;。 代码如下： ul { ??????? margin: 0px; ??????? padding: 0px; ??????? list-style-type: none; } li { ??????? float: left; } .nav2 a { ??????? font-size: 12px; ??????? background-image: url(button1.jpg); ??????? background-repeat: no-repeat; ??????? text-align: center; ??????? display: block; ??????? height: 22px; ??????? width: 80px; ??????? padding-top:10px; ??????? text-decoration: none; ?