Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏.pptx

项目6非遗项目申报指南页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS高级应用

任务6.3制作与美化水平导航栏前端技术开发

任务引入一非遗项目申报指南页面的原型图制作水平导航栏

任务描述制作与美化水平导航栏1.使用列表创建水平导航栏，在页面上居中显示。2.列表项内容为超链接，并设置超链接样式。3.文字样式的设置。4.列表样式的设置。5.鼠标悬停时列表项样式的设置。

任务实施二3124列表项不显示项目符号，背景样式的设置等设置超链接样式使用列表来创建导航栏，并放置在一个层中，便于管理列表项设置浮动，让其横向排列列表样式超链接样式创建列表列表项横向排列

任务实施二水平导航栏HTML代码divid=navul li ahref=#target=_blank首页/a /li…/ul/div1.设置层的大小2.设置层的背景色层“nav”的CSS代码#nav{ width:1000px; height:60px; background:#CCC;margin:0auto;}3.设置层在页面上居中显示阶段性网页效果

任务实施二1.清除列表默认样式，边距和填充2.设置列表项宽度，并使其浮动起来导航栏列表的CSS代码#navul{ width:1000px; height:60px; margin:0px; padding:0px; }3.设置列表项的行高=列表高度=层高度，最外层父元素的高度#navulli{ float:left; width:200px; line-height:60px; list-style:none; text-align:center; background:#990000;} 4.设置列表项不显示项目符号，文字居中5.设置列表项背景色阶段性网页效果

任务实施二1.设置超链接样式2.设置超链接悬停状态时，背景颜色为黑色。导航栏列表的CSS代码#navullia{ font-size:20px; text-decoration:none; color:#fff;}#navulli:hover{ background:#000;}#navulli{ background:url(../img/bg_6.png);}3.设置导航栏背景图片

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》