CSS:CSS基础之十四

第一步:
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、根据教师所发的素材,选其中之一,自行创作一个作品。由教师安排学生上交并品评。

效果图:

CSS:CSS基础之十四

你可能感兴趣的:(html,C++,c,css,C#)