HTML怎么分页，index.html#home为第一个页面，以此类推？

html-css05

HTML怎么分页，index.html#home为第一个页面，以此类推？,第1张

类似#home这种链接是在一个页面内的跳转，跳转到的位置我们称之为“锚点”。下面的代码存到index.html即可查看效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="position: fixedtop: 0left: 0background-color: #fff"><a href="#home">首页</a><a href="#page2">page2</a><a href="#page3">page3</a></div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="home"></a><br><br>这里是首页部分</div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="page2"></a><br><br>这里是page2部分</div><div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px"><a id="page3"></a><br><br>这里是page3部分</div></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>中的内容换成数组中相应的内容。

通常情况下这是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>