利用无序列表制作网站导航条_第1页
利用无序列表制作网站导航条_第2页
利用无序列表制作网站导航条_第3页
利用无序列表制作网站导航条_第4页
利用无序列表制作网站导航条_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

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

文档简介

电子商务网页设计与制作Design

and

Creation

of

E-commerce

WebPages利用无序列表制作网站导航条主讲人：陶小波THISIS案例分析无序列表的定义和用法用无序列表制作网站导航条导航条各种样式效果的设置4CONTENT

一、案例分析1、中间灰色条形区域是导航条的背景色。2、导航条上一共有6个菜单栏，分别是“首页、关于内利、内利新闻等”栏目。3、导航条的6个菜单栏字体颜色是黄色，且无下划线。页面特点分析4、当鼠标放在菜单栏字体上之后，未点击状态的时候菜单栏字体颜色自动变成白色，且有下划线，同时二级菜单显示内容的字体仍然为黄色5、当鼠标进入二级子菜单栏之后，子菜单栏成黄色凸起区块状，同时字体变成白色。页面特点分析

二、无序列表的定义和用法无序列表的标签是ul是unorderlist的缩写，顾名思义就是没有顺序的一种列表，它是一个闭合标签，结尾为</ul>，具体使用语法如图：“ul”的搭档列表项目标签“li”标签项目li是list的缩写，也是一个闭合标签，结尾为</li>，具体使用语法如图：<li>内容</li>。

三、用无序列表制作网站导航条视频演示1、首先用一个绝对定位的div框架设置导航条的背景框2、用无序列表标签ul和li在HTML页面输入导航条菜单内容的HTML代码注意：如果有二级子菜单，则需要在一级菜单内容代码的内部嵌套用ul和li标签输入的子菜单内容。课程总结3、当我们代码区域操作完成后，可进入设计页面进行样式的设置，通过建立不同规则的样式表，分别对导航条菜单的各种效果进行样式设置。<li>内容</li>。4、在样式设置过程中：对超链接a和以及鼠标放上去的特效：hover设置用的比较多，也容易让初学者混淆，需要注意区分。本操作案例中子菜单隐藏和鼠标放上去之后显示的特效设置特别难以掌握。如图：当我们在#dhulliul后面设置display参数为none的时候，即代表一级菜单下面的所有元素都会在页面中消失；为了让消失的二级菜单在鼠标放上去的时候显示，我们需要在dhulliul中间的li后面设置一个：hover让display参数值为block，则代表子菜单在鼠标放上去的时候又会显示出来。#dhulliul{display:none}#dhulli:hoverul{display:block}5、案例中的样式仅仅是导航条的常用样式效果，不同的网站导航条菜单栏其布局和样式不同，希望同学们能够灵活应用，多积累多总结。电子商务网页设计与制作Design

and

Creationof

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论