网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片。
css焦点图,不难理解网页设计现在流程html+css设计,css焦点图就是这样而来的,很多情况下需要结合js代码实现。
分类:
焦点图必须有图片,无图不成焦,不然纯文字的形式就是焦点文字或焦点新闻啦。
js焦点图,使用原生态的js代码实现的焦点图。样式相对单一,如借助css可实现多样的风格。
flash焦点图,看名字就可以理解,使用flash设计或用flash as编程设计的焦点图。该焦点图优点是字体展现效果佳,比纯网页形式更具有美感。不利于SEO与引擎的抓取。
以上内容参考:百度百科-网站焦点图
CSS 3 选择器加入了一个叫 :target 的伪类,它的作用是选中id与地址栏中#匹配的元素。如下:
html:
<a href="#tab1">tab1</a><a href="#tab2">tab2</a>
<div id="tab1">...</div>
<div id="tab2">...</div>
css:
div { display: none }div:target { display: block }
当用户点击第一个链接的时候,地址栏会变成:http://.......#tab1,此时会显示id为tab1的div,点击第二个链接的时候,地址栏会变成:http://......#tab2,此时会显示id为tab2的div。
假设用来显示圆点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里面的位置