第一步：
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、
根據教師所發的素材，選其中之一，自行創作一個作品。由教師安排學生上交并品評。
效果圖:
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
