HTML分页的效果实现

html-css013

HTML分页的效果实现,第1张

通常情况下这是css中的解决方法。

给你个测试页:

(在此之前建议楼主下载苏沈小雨的CSS样式表,如果楼主打算长期做网页的话)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Untitled Page</title>

<style type="text/css">

/*说明:color:blue表示蓝色。*/

a{margin:0 5pxtext-decoration:none}

a:link{color:gray}/*链接*/

a:visited{color:gray}/*己经访问过的链接*/

a:hover{color:blue}/*当鼠标停在链接上时的样式*/

a:active{color:blue}/*当链接正在被点击时的样式*/

</style>

</head>

<body>

<a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a><a href="index.htm" class="normal">链接1</a>

</body>

</html>

很简单的,我给你说两种方法。

第一种最简单,直接生成若干个<div>或者<table>,因为你说是文章,所以我以下用<div>,这样比较简单。

<div id="div1">第一页内容</div>

<div id="div2" style="display:none">第二页内容</div>

<div id="div3" style="display:none">第三页内容</div>

然后你再作几个链接类似于1,2,3这样的文字,点击文字,相应的页面显示,其他页面隐藏。这样就等于有了分页效果。

第二种,

var array =["第一页内容","第二页内容","第三页内容"]

<div id="div1">第一页内容</div>

然后你再作几个链接类似于1,2,3这样的文字,点击文字,把<div>中的内容换成数组中相应的内容。