CSS：CSS基础之十三
代码如下:(主要部分)
第一步：
TurnPage.html
<title>纯CSS代码实现翻页</title>
<link href="TurnPage.css" rel="stylesheet" type="text/css" />
<body>
<dl>
<dt><a href="#a">国际</a><a href="#b">体育</a><a href="#c">娱乐</a></dt>
<dd>
<ul id="a">
<li><a href="#" >国际新闻</a></li>
<li><a href="#" >国际新闻</a></li>
<li><a href="#" >国际新闻</a></li>
<li><a href="#" >国际新闻</a></li>
<li><a href="#" >国际新闻</a></li>
<li><a href="#" >国际新闻</a></li>
</ul>
<ul id="b">
<li><a href="#" >体育新闻</a></li>
<li><a href="#" >体育新闻</a></li>
<li><a href="#" >体育新闻</a></li>
<li><a href="#" >体育新闻</a></li>
<li><a href="#" >体育新闻</a></li>
<li><a href="#" >体育新闻</a></li>
</ul>
<ul id="c">
<li><a href="#" >娱乐新闻</a></li>
<li><a href="#" >娱乐新闻</a></li>
<li><a href="#" >娱乐新闻</a></li>
<li><a href="#" >娱乐新闻</a></li>
<li><a href="#" >娱乐新闻</a></li>
<li><a href="#" >娱乐新闻</a></li>
</ul>
</dd>
</dl>
</body>
第二步：
TurnPage.css
* { margin: 0px; padding: 0px; }
body {
font-family: "宋体";
font-size: 12px;
text-decoration: none;
margin: 10px;
}
/***********dl dt dd **************/
dl {
position:absolute;
height: 170px;
width: 240px;
border: 10px solid #eee;
}
dd {
height: 170px;
width: 240px;
overflow: hidden;
}
dt { position: absolute; right: 1px; }
dt a {
background-color: #666;
text-align: right;
vertical-align: middle;
white-space: nowrap;
display: block;
margin-left: 1px;
height: 56px;
width: 30px;
line-height: 55px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
dt a:hover
{ background-color: #FF9933;}
ul {
border: 1px solid #CCCCCC;
height: 170px;
width: 260px;
margin: 0px;
padding: 0px;
background-image: url(arrowb.gif);
background-repeat: no-repeat;
background-position: 75% 20px;
}
li {
font-family: "宋体";
font-size: 12px;
line-height: 27px;
text-decoration: none;
margin-left: 20px;
}
#b { background-position:75% center }
#c { background-position:75% 86% }
dd a { text-decoration: none; }
效果演示如下：
分析:
1、 dl dt dd /*-- dl是带标题(dt)和内容(dd)的列表--*/
例如：
<dl>
<dt>图书类</dt>
<dd>《钢铁怎样炼成的》</dd>
<dd>《西游记》</dd>
<dt>音像类</dt>
<dd>《周杰伦专辑》</dd>
<dd>《黄金甲》</dd>
<dl>
2、 <ul id="a"><ul id="b"><ul id="c"> /*--实现锚部分，用<a href="#a">国际</a><a href="#b">体育</a><a href="#c">娱乐</a>--*/
3、 ul {height: 170px;width: 260px; } /*--实现多个UL的显示--*/
4、 background-image: url(arrowb.gif); background-position: 75% 20px;
#b { background-position:75% center }
#c { background-position:75% 86% }
/*--实现箭头动态变化关键部分--*//