Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏_第1页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏_第2页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏_第3页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏_第4页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 6.3任务引入 制作与美化水平导航栏_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目6非遗项目申报指南页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS高级应用任务6.3制作与美化水平导航栏前端技术开发任务引入一非遗项目申报指南页面的原型图制作水平导航栏任务描述制作与美化水平导航栏1.使用列表创建水平导航栏，在页面上居中显示。2.列表项内容为超链接，并设置超链接样式。3.文字样式的设置。4.列表样式的设置。5.鼠标悬停时列表项样式的设置。任务实施二3124列表项不显示项目符号，背景样式的设置等设置超链接样式使用列表来创建导航栏，并放置在一个层中，便于管理列表项设置浮动，让其横向排列列表样式超链接样式创建列表列表项横向排列任务实施二水平导航栏HTML代码<divid="nav"><ul> <li>

<ahref="#"target="_blank">首页</a> </li>…</ul></div>1.设置层的大小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.设置导航栏背景图片感谢观看

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论