商务网页设计与制作（第2版）课件 第21课 制作导航栏综合范例_第1页
商务网页设计与制作（第2版）课件 第21课 制作导航栏综合范例_第2页
商务网页设计与制作（第2版）课件 第21课 制作导航栏综合范例_第3页
商务网页设计与制作（第2版）课件 第21课 制作导航栏综合范例_第4页
商务网页设计与制作（第2版）课件 第21课 制作导航栏综合范例_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

第4章 CSS网页式样制作技术4.7.4制作导航栏综合范例属性描述list-style在一个声明中设置所有的列表属性list-style-image将图像设置为列表项的图标list-style-position设置列表项标记的放置位置list-style-type设置列表项标记的类型4.7.4制作导航栏综合范例制作导航栏有很多种技术，采用文本列表的边框与边距技术制作导航栏是最简洁实用的技术之一。在CSS中，有序列表标签<ol>和无序列表标签<ul>基本没有区别，列表项有序还是无序、如何编号是通过list-style-type属性来定义的，还可以采用list-style-image属性来指定列表项的图标。列表项的主要属性值描述none无标记disc默认。标记是实心圆circle标记是空心圆square标记是实心方块decimal标记是数字decimal-leading-zero0开头的数字标记（01,02,03等）lower-roman小写罗马数字（i,ii,iii,iv,v等）upper-roman大写罗马数字（I,II,III,IV,V等）lower-alpha小写英文字母（a,b,c,d,e等）upper-alpha大写英文字母（A,B,C,D,E等）lower-latin小写拉丁字母（a,b,c,d,e等）upper-latin大写拉丁字母（A,B,C,D,E等)list-style-type的常见属性值值描述none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符inline默认。此元素将显示为内联元素，元素前后没有换行符inherit规定应该从父元素继承display属性的值另，容器类元素均具有display属性，该属性是制作导航栏需要使用。display属性常见值1．制作纵向排列导航栏利用文本列表制作导航栏，首先在CSS中做好如下工作。需要定义DIV块的尺寸，适合用于确定导航栏（文本列表）的位置。定义一个文本列表及其整体样式，定义好边距。制作列表项，做出纵向分隔符的美观效果。制作列表项超链接整体样式。制作列表项超链接在未访问、已访问的显示效果，以及鼠标指针经过时的显示效果，通过反差效果增强美感，要充分利用左边框的颜色做好突出显示。然后，在HTML中设置DIV标签、文本列表及列表项，并设置列表项的超链接。

.menulia:link,.menulia:visited{/*设置超链接未访问、已访问的显示效果*/background-color:#0066CC;/*设置列表项背景色*/color:#FFFFFF;/*设置列表项文字颜色*/border-left:15pxsolid#000099;/*使用左边框设置显示出对比效果*/ }

.menulia:hover{/*设置鼠标指针经过列表项时的样式，形成反差*/background-color:#000099; /*改变列表背景色*/color:#FFFF00;/*改变文字颜色*/border-left:15pxsolid#FFFF00;/*改变列表项左边框的颜色*/}</style></head><body><divclass="menu"><ul><li><ahref="#">首页</a></li><li><ahref="#">产品</a></li><li><ahref="#">方案</a></li><li><ahref="#">服务</a></li><li><ahref="#">联系我们</a></li></ul></div></body></html><html><head><title>纵向导航栏</title><style>body{background-color:#33CCFF;}.menu{/*定义类选择符.menu的整体样式*/width:130px;text-align:right;vertical-align:middle;font-family:宋体;font-size:1em;color:#FFFFFF;}

.menuul{/*用文本列表制作导航栏的整体样式*/list-style-type:none; /*不显示项目符号*/margin:0px;/*设置内外边距很重要，确定显示位置*/padding:0px;}

.menuli{/*设置列表项的样式*/border-bottom:1pxsolid#CCCCCC;/*利用下边框做出分割线效果*/}

.menulia{/*设置列表项的超链接整体样式*/display:block;/*设置列表项为块级元素*/height:1.5em;padding:2px;text-decoration:none;/*去掉下划线*/}2．制作横向排列导航栏以上例为参考，把它改成横向导航栏，只需要改动4处：一是把“.menu”中的“width:130px”删除，解除导航栏总体宽度为130px的限制；二是把“.menu”中的“text-align:right”改成“text-align:center”，让导航栏中的文字居中显示，适应横向导航栏的美观

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

温馨提示

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

最新文档

评论

0/150

提交评论