什么是焦点图

html-css030

什么是焦点图,第1张

网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。

css焦点图，不难理解网页设计现在流程html+css设计，css焦点图就是这样而来的，很多情况下需要结合js代码实现。

分类：

焦点图必须有图片，无图不成焦，不然纯文字的形式就是焦点文字或焦点新闻啦。

js焦点图，使用原生态的js代码实现的焦点图。样式相对单一，如借助css可实现多样的风格。

flash焦点图，看名字就可以理解，使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳，比纯网页形式更具有美感。不利于SEO与引擎的抓取。

以上内容参考：百度百科-网站焦点图

假设用来显示圆点div的class是point，图片区域的大小是10*10px的，然后那个图片的文件名是point_pic.gif。那么html的代码大致上可以写成下面这样

<div class="point"></div>

在css里面的定义可以是这样：

.point {width:10pxheight:10pxbackground:url(point_pic.gif) 0 0 no-repeat}

.point:hover {background:0 -10px}

这样就可以实现鼠标移上去以后改变背景图片的效果了，其实本质上就是先给div设置一个固定的大小，然后控制在鼠标滑过状态时，背景图片在div里面的位置

设置了float也得要宽度够才是平行排列，如果宽度不够它平行排列当然就是移到下面去了，这才是float的真正意义啊。

一般是外面套两个div，最外面的设overflow:hidden，第二个div设置足够平行显示的宽度。