网页中的“下一页”实现的方法。
如下参考:
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>
<title>电子商务</title>
<style type="text/css">
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>
<div class="col"><img class="imgDiv70" src="image/70.jpg"><img class="imgDiv72" src="image/72.jpg"></div>
<img class="imgDiv71" src="image/71.jpg">
<div style="clear:both"></div><!--清除浮动,不过一般不推荐这么用-->
<a href="4.html" class="next"><img alt="下一页" src="image/back.png" ><span>下一页</span></a>
</body>
</html>
通过HTML标签来调整外观已经过时,一般HTML负责结构,CSS负责外观表现。你所希望的是一种表现方式,而且单纯通过HTML很难实现,所以我用了CSS写出来,并加上注释
我的这种写法看起来清晰多了吧?
建议多学习HTML以及CSS知识,例如 慕课网