纯html+css实现翻页焦点图特效

1、新建html文档。

2、书写hmtl代码。

<dl>

 <dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>

 <dd> <img src="1.jpg" alt="" title="" id="a" /> <img src="2.jpg" alt="" title="" id="b" /> <img src="3.jpg" alt="" title="" id="c" /> </dd>

</dl>

3、初始化css代码。

<style>

* { margin: 0; padding: 0 }

html { overflow-y: scroll }

body, h1, h2, h3, p, div, dl, dt, dd, ul, ol, li, table, th, td, form, button, input, textarea, legend, hr { padding: 0; margin: 0 }

body { padding: 0; margin: 0; background:#fe6d6a; color: #333; font: 12px/18px "微软雅黑", arial; height: 1000% }

button, input, select, textarea { font-size: 100% }

textarea { font: 14px/20px "微软雅黑" }

button { border: 0 }

li { list-style: none }

img { border: 0; }

a { color: #06c; text-decoration: none; cursor: pointer; outline: none; hide-focus:expression(this.hideFocus = true);}

a:hover { color: #06c; text-decoration: underline }

.left{ float:left;}

.right{ float:right;}

.clear:after,ul:after{content:"";display:block;visibility:hidden;height:0;clear:both;}

.clear,.area,.con:after{zoom:1}

.first_hide { position: fixed; left: 0; top: 0; width: 100% }

</style>

4、书写css代码。

<style>

dl { position: absolute; width: 240px; height: 170px; border: 10px solid #eee; }

dd { margin: 0; width: 240px; height: 170px; overflow: hidden; }

img { border: 1px solid black }

dt { position: absolute; right: 3px; top: 50px; }

a { display: block; margin: 1px; width: 20px; height: 20px; text-align: center; font: 700 12px/20px "宋体", sans-serif; color: #fff; text-decoration: none; background: #666; border: 1px solid #fff; filter: alpha(opacity=40); opacity: .4; }

a:hover { background: #000 }

</style>

5、代码整体结构。

6、查看效果。