纯CSS翻页效果-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaozhao_19/article/details/2276236

本文介绍了一种使用纯CSS实现的翻页效果。通过设置不同的链接ID和利用CSS样式，可以实现在不同分类下的新闻标题切换显示。文章提供了完整的HTML和CSS代码示例，并详细解释了每一部分的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下:(主要部分)

第一步：

TurnPage.html

<title>纯CSS代码实现翻页</title>

<body>

<dl>

<dd>

</ul>

</ul>

</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>

<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% }

/*--实现箭头动态变化关键部分--*//

CSS：CSS基础之十三