HTMLCSS第20章典型实例.ppt
第20章 典型实例(二),本章将继续学习网站制作中的典型实例。在这里将会学习到制作导航条、制作下拉菜单、CSS制作小三角形菜单、div制作居中效果、制作漂亮搜索引擎、CSS制作图片浏览器、使用javascript小程序。,20.1 制作导航条,导航条是指网站的菜单,它是网站中最关键的地方,因为它贯穿了整个网站。这里将介绍两种常用的导航条制作方法。分别是:制作横向导航条和制作纵向导航条。,20.2 制作下拉菜单,下拉菜单是导航条必不可少的。想要实现多浏览器兼容的下拉菜单并不容易,需要用div+CSS+javascript来实现。本节将讲述两种下拉菜单的制作方法。一种是横向的下拉菜单,一种是纵向的下拉菜单。,制作横向菜单的纵向下拉菜单 制作横向菜单的横向下拉菜单制作横向菜单的三级下拉菜单制作纵向菜单的下拉菜单制作纵向菜单的三级下拉菜单,20.3 CSS制作小三角形菜单,小三角形显示的菜单,是指用CSS制作小三角形的箭头来当菜单的图标,可以不用图片就可以制作出漂亮的菜单。,20.4 div制作居中效果,在table的世界里,只要使用属性align便可以达到一个居中效果。但是在div的世界里,居中往往是没那么简单的事情。,制作div水平居中 制作div垂直居中,div居中效果包括:,20.5 制作漂亮搜索引擎,制作漂亮的搜索引擎,是用图片制作,用CSS+javascript放在页面里的。这里将举例说明怎么制作一个漂亮的搜索引擎。,20.6 CSS制作图片浏览器,CSS制作图片浏览器,是通过CSS+javascript来共同完成的。这里将给出一个很好用的图片浏览器,当鼠标经过左边的图像时,便可以看到右边的大图。,20.7 使用javascript小程序,在网站的使用中,不免会用到一些javascript小程序来点缀网站,本节将介绍两种经常用到的javascript小程序。分别是:显示时间效果和鼠标跟随字体效果。,20.8 小结,本章学习了网站制作中的典型实例,通过学习,可以了解到各式各样的网页效果是如何制作出来的。在学习之余,本章提供了一系列示例的源代码,方便读者直接使用。本章所提供的实例都是在平时制作网站时需要用到的,对于以后制作网站会给予很大的帮助。,性格决定命运,专注成就人生,源智天下,