网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用_第1页
网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用_第2页
网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用_第3页
网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用_第4页
网页设计与制作基础（HTML5+CSS3）课件 第5章 列表应用_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

第5章

列表应用目录无序列表定义和使用01有序列表定义和使用02自定义列表的定义和使用03列表综合案例04无序列表是网页中使用最多的列表形式。使用<ul></ul>标记，其中的每个列表项目使用<li></li>标记。无序列表也称为项目列表，各个项目<li>之间属于并列关系，没有先后顺序之分，它们之间使用项目符号来显示。例如下面的例子使用列表来呈现笔记本的品牌：<ul><li>联想笔记本</li><li>惠普笔记本</li><li>戴尔笔记本</li><li>苹果笔记本</li></ul>5.1无序列表小圆点为默认的项目符号，可以设置ul的样式，利用liststyle来更改显示的项目符号，例如设置为空心圆：ul{list-style:circle;}，设置效果如图所示：5.1无序列表常见的项目符号有：disc实心圆（默认值）circle空心圆square实心方块none无列表除了使用项目符号，还可以自定义项目符号，只需设置ul样式，将样式设置为图片：ul{list-style-image:url(images/ico1.png);

}一个列表如果同时设置了项目符号和自定义项目图片，自定义项目图片将覆盖默认的项目符号。

5.1无序列表下面的例子使用HTML5的nav和无序列表，实现了导航栏菜单制作。效果如图所示。<body><h3>web前端开发</h3><nav><ul><li><ahref="#">HTML5</a></li><li><ahref="#">CSS3</a></li><li><ahref="#">JavaScript</a></li></ul></nav><h3>web后端开发</h3><nav><ul><li><ahref="#">Servlet</a></li><li><ahref="#">JSP</a></li><li><ahref="#">MySql</a></li></ul></nav></body>5.1无序列表列表可以嵌套使用，即一个列表中还可以包含多个层次的列表。<ul><li>联想笔记本<ul><li>ThinkPadX1</li><li>ThinkPadT14</li><li>ideapad14S</li></ul></li><li>惠普笔记本<ul><li>星14Pro</li><li>星15青春</li><li>ENVY13X360度轻薄翻转</li></ul>

</li><li>戴尔笔记本</li><li>苹果笔记本</li></ul>5.1无序列表有序列表使用<ol></ol>标记，其中的每个列表项目是有先后顺序的。<h1>最受欢迎的五大花茶：</h1><ol><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li><li>玫瑰花茶</li><li>金银花茶</li></ol>5.2有序列表5.2有序列表可以使用ol的liststyle来设置编号的样式，例如设置编号样式为小写字母：ol{list-style:lower-alpha;}。常见的有序列表编号有：decimal:数字，默认值lower-alpha:小写英文字母upper-alpha:大写英文字母lower-roman:小写罗马数字upper-roman:大写罗马数字none:无编号有序列表的编号一般从1,a,A，或者i开始编号，如果要更改起始的编号，可以使用start属性修改。例如：<olstart="3"><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li>

</ol>如果设置了ol{list-style:lower-alpha;}那么从小写字母的第3个，开始编号。5.2有序列表<dl></dl>标记来生成自定义列表<dl>标签里面包含<dt>和<dd>标签，<dt>是自定义列表标题，<dd>是自定义列表的内容。<h1>成语词条天天记</h1>

<dl>

<dt>白云苍狗</dt>

<dd>比喻世事变幻无常。</dd>

<dt>分庭抗礼</dt>

<dd>原指宾客和主人分别站在庭院两边,以平等的礼节相见。后用以比喻互

相对立,地位相当。</dd><dt>守株待兔</dt>

<dd>比喻死守经验，不知变通。亦用以讽刺妄想不劳而获的侥幸心理。

</dd>

</dl>5.3自定义列表5.4.1使用列表设计垂直导航菜单1.首先使用ul建立列表菜单，并为li的每一项插入超链接，做成目录。<ulid="menu"><li><ahref="#">花茶种类</a></li><li><ahref="#">花茶功效</a></li><li><ahref="#">花茶泡法</a></li><li><ahref="#">花茶采购</a></li><li><ahref="#"></a></li></ul>2.设置列表样式：设置列表不显示项目符号，并设置列表总体宽度为160px。#menu{list-style-type:none;

/*不显示项目符号*/margin:0;padding:0;width:160px;}5.4列表综合应用5.4列表综合应用5.4.1使用列表设计垂直导航菜单3.设置正常超链接样式：#menulia{display:block;

/*设置为块级元素*/padding:2px4px;text-decoration:none;

/*不显示下划线*/background-color:#3A6A24;border:2pxsolidbeige;color:aliceblue;}4.设置鼠标经过a:hover时，背景颜色设置为亮绿色，并且边框为立体边框效果，以达到菜单切换效果。#menulia:hover{color:black;background-color:#94D046;border-style:outset;

}下面的例子实现了教务管理系统的菜单设计，菜单使用层叠缩放效果。鼠标放在一级标题上面，下面会显示下拉子菜单，如图所示：5.4.2使用列表实现下拉菜单功能建立列表基本内容5.4.2使用列表实现下拉菜单功能设置整个div层的样式（.menu），一级菜单“教务中心”“家校互动”“数据中心”“与我联系”的样式。5.4.2使用列表实现下拉菜单功能设置设置二级菜单ul的整体样式，以及每个项目的样式：5.4.2使用列表实现下拉菜单功能设置二级菜单的超链接样式5.4.2使用列表实现下拉菜单功能设置当鼠标指针经过一级菜

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

温馨提示

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

最新文档

评论

0/150

提交评论