网页中的“下一页”怎么实现_随笔

网页中的“下一页”实现的方法。

如下参考：

1.首先，打开HTML编辑器并创建一个新的HTML文件，如index.html。

2.在index.html中的<script>标签，输入js代码：

varnow=parseInt(location.href.split('?')[1].split('=')[1])

$('body').append('<a href="index?page='+ (now-1)+'">上一页</a>')

$('body').append('<a href="index?page='+ (now+1)+'">下一页</a>')

3.在chrome浏览器中运行index.html页面，上一页和下一页的a标记将用js打印。

<!doctype html>

<html>

<head>

body {background-image: url(image/bg.jpg)}/*设置背景*/

.col{width:300pxfloat:left}/*设置左栏，容纳上下两个图片*/

.imgDiv70{width:300pxheight:200pxbackground-color:#f00display:block}/*上面的图片*/

.imgDiv72{width:300pxheight:200pxbackground-color:#00fdisplay:block}/*下面的图片*/

.imgDiv71{width:400pxheight:400pxbackground-color:#0f0display:blockfloat:left}/*右面的图片*/

.next{float:right}/*给链接打一个包裹，让这个包右对齐*/

.next img{width:50pxheight:50pxvertical-align:middlebackground-color:#0ff}/*设置图片并且垂直居中*/

.next span{height:50pxfont-family:"黑体"font-size:30pxline-height:50px}/*设置字体并且垂直居中*/

</style>

</head>

<body>

</body>

</html>

通过HTML标签来调整外观已经过时，一般HTML负责结构，CSS负责外观表现。你所希望的是一种表现方式，而且单纯通过HTML很难实现，所以我用了CSS写出来，并加上注释

我的这种写法看起来清晰多了吧？

建议多学习HTML以及CSS知识，例如慕课网

欢迎分享，转载请注明来源：内存溢出

网页中的“下一页”怎么实现