第一步：
TurnPage2.html
<title>
纯
CSS
代码实现翻页
</title>
<link href="TurnPage2.css" rel="stylesheet" type="text/css" />
<body>
<dl>
<dt><a href=
"#a"
>1</a><a href=
"#b"
>2</a><a href=
"#c"
>3</a></dt>
<dd>
<img src="1.jpg"
id="a"
/>
<img src="2.jpg"
id="b"
/>
<img src="3.jpg"
id="c"
/>
</dd>
</dl>
</body>
</html>
第二步：
TurnPage.css
* { margin: 0px;padding: 0px; }
body {
"
宋体
";
font-size: 12px;
text-decoration: none;
margin: 10px;
}
/***********dl dt dd **************/
dl {
height: 170px;
width: 240px;
position: absolute;
border: 10px solid #CCCCCC;
}
dd
{
height: 170px;
width: 240px;
overflow: hidden;
}
dt
{
position: absolute;
top: 50px;
right: 5px;
}
img{ border: 1px solid #000; }
a{
display: block;
height: 20px;
width: 20px;
background-color: #666;
border: 1px solid #fff;
filter: Alpha(Opacity=40);
"
宋体
";
font-size: 12px;
line-height: 20px;
text-decoration: none;
font-weight: 700;
vertical-align: middle;
text-align: center;
color: #fff;
}
a:hover { background:#000; }
分析
:
1、
dl dt
/*--
同时运用
position: absolute;--*/
2、
dd
/*--
overflow: hidden;
是实现只显示一张图的关键--*/
3、
a
filter: Alpha(Opacity=40); /*-
主要为了实现半透明效果*/
练习:
1、
完成后,请将核心部分抄在笔记本上
2、
根据教师所发的素材，选其中之一，自行创作一个作品。由教师安排学生上交并品评。
效果图:
