零点起飞学HTML+CSS之网站常用模块.pptx

《零点起飞学HTML+CSS之网站常用模块.pptx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第20章网站常用模块在网站制作中，不同的网站也经常会包含相同的模块。网站的大致结构都是一样的。上一章所讲的博客雏形里的实例，在其它网站制作中也是经常会用到的，只要改变一下标题、图片、内容就可以了。20.1制作导航条导航条是指网站的菜单，通过它可以跳转到网站的任何页面。它是网站中最关键的地方，因为它贯穿了整个网站。本节将介绍两种常用的导航条制作方法，分别是制作横向导航条和制作纵向导航条。20.1.1制作横向导航条制作横向导航条有两种制作方法，本小节将用两个例子分别介绍这两种制作方法。一种是使用table制作横向导航

2、条，一种是使用DIV+CSS制作横向导航条。20.1.2制作纵向导航条制作纵向导航条有两种制作方法，本小节将用两个例子分别介绍这两种制作方法。一种是使用table制作纵向导航条，一种是使用DIV+CSS制作纵向导航条。20.2制作下拉菜单下拉菜单通常应用于把一些具有相同功能的分类放在同一个下拉菜单中，并把这个下拉菜单置于导航条的一个选项下。下拉菜单是导航条的重要部分。想要实现多浏览器兼容的下拉菜单并不容易，需要用DIV+CSS+JavaScript来实现。20.2.1制作横向下拉菜单横向下拉菜单是指横向导航条下的

3、下级菜单，一般会有二级和三级的菜单。本小节将会介绍二级下拉菜单的两种显示效果和三级下拉菜单的显示效果。20.2.2制作纵向下拉菜单纵向下拉菜单是指纵向导航条下的下级菜单，一般会有二级和三级的菜单。本小节将会介绍二级下拉菜单显示效果和三级下拉菜单的显示效果。20.3CSS制作小三角形菜单小三角形显示的菜单，是指不使用图片，而是使用CSS制作出小三角形的箭头来作为菜单的图标。本节将举例说明这种菜单的制作方法。20.4制作居中效果在table标签里，使用属性align就可以制作一个居中效果。但是在DIV里，居中往往是没

4、那么简单的事情。本节将介绍两种居中方式，一种是水平居中，一种是垂直居中。20.4.1制作div水平居中在前面制作的博客中有提到过div的水平居中。在实际应用中，DIV的水平居中是应用非常的广的。本小节将使用一个十字架的制作来体现div的水平居中。20.4.2制作div垂直居中DIV垂直居中比DIV水平居中要难控制，本小节举例说明的将会是一个相对垂直居中。20.5制作搜索引擎使用CSS可以制作出漂亮的搜索引擎。用CSS+JavaScript放在页面里的。本小节就来讲解利用图片来制作搜索引擎的方法。20.6制作图片浏

5、览器制作图片浏览器，是通过CSS+JavaScript来共同完成的。这里将给出一个很好用的图片浏览器，当鼠标经过左边的图像时，便可以看到右边的大图。20.7JavaScript小程序在网站的制作过程中，难免会要用到一些JavaScript小程序来点缀网站。本节将介绍两种经常用到的JavaScript小程序。分别是：显示时间和鼠标跟随字体。20.7.1显示时间在浏览网站的时候，经常看到网站上会显示当天的时间，这就是使用JavaScript来进行设置的。本小节将举例说明这种显示时间的制作方法。20.7.2鼠标跟随字体

6、鼠标跟随字体就是当鼠标移动的时候，文字也会跟着鼠标移动，在很多个人网站上都可以看到这种效果。本小节将介绍一种比较常见的使用JavaScript制作的鼠标跟随字体效果。20.8本章小结本章主要学习了网站制作中经常会用到的一些实例。详细讲解了制作导航条、下拉菜单、小三角形菜单、居中效果、搜索引擎、图片浏览器的实现方法。还介绍了一些常见的JavaScript小程序，这些小程序是可以直接供读者使用的。