HTML+CSS第20章典型实例(二).ppt

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