对话高考网(4)
来源:互联网 发布:传奇霸业移动网络 编辑:程序博客网 时间:2024/04/29 15:13
新闻页面的制作与分页
这周完善了一下主页面,为页面增添了页脚元素,主要成果是大约完成了新闻页面的制作。
我将主页面的新闻板块移植了过来,为了各条新闻的美观程度,在前面加上小图标。效果如图:
该图标需要以png图片为基础,运用css样式中的background:url属性添加到页面中,示例为
background: url(./png/form.png) no-repeat 0 12px ;
在也顺便向大家这里推荐一个下载png图标资源的网站,http://www.iconfont.cn/,可自定义调节图片,方便使用。
通过网站学习,研究了一下jsp页面的分页跳转,将由数据库中读取出的数据排列并分页以及实现上一页下一页的页面跳转等,初步实现的功能如图:
在相邻页面跳转的同时使用输入页数方式实现快捷跳转,运用css与js结合的方法实现,具体代码如下:
<div class="lasttitle"> <div> 第1/10页 [ <a href="#">首页</a> ] [ <a href="#">上一页</a> ] [ <a href="#">下一页</a> ] [ <a href="#">末页</a> ] <input id = "page" name = "page" value = "1" style="width:40px;height: 18px;border: #CCCCCC solid 1px;font-size: 12px;" type="text"> <input value=">>" style="font-size: 14px;border: #FFFFFF solid 0px;background-color: #FFFFF;" type="submit"> <script language="JavaScript"> function gotopage(){ obj = document.getElementById("page"); var PN = obj.value; var Num = parseInt(PN); if(isNaN(Num)){ alert("请输入有效的数字"); return false; } if (Num > 10) { alert("没有那么多页"); return false; } if (Num < 1) { alert("请输入有效的数字"); return false; } pagenum = (Num - 1) * 60; location.replace("#"+ pagenum); return false; } </script> <table cellspacing = "0" cellpadding="0" align="center"> <form name = "pageform" onsubmit="return gotopage()"></form> </table> </div>
由于实现该类跳转还需要后台的配合,以上代码只是前端部分代码,后台组尚在搭建,剩余的后台部分将在以后补充呈现。
news.jsp新闻页面暂时搭建到这里,接下来主要开始学习论坛的搭建技术,这也是本网站的精髓所在,包括呈现方式与效果,我将在网上找教学视频以及经典范例进行学习与领悟。
0 0
- 对话高考网(4)
- 对话高考网(1)
- 对话高考网(2)
- 对话高考网(3)
- 对话高考网(5)
- 倒计时(高考)实例
- 高考
- 高考
- 高考
- C++建模实战1-高考录取系统(4)
- 高考高考
- 对话录 (Talks)
- 对话
- 对话
- 对话
- 对话
- 对话!
- 对话
- 设计模式之责任链模式
- 查询哪些存储过程是每次重编译的
- [推荐算法]UserCF,基于用户的协同过滤算法
- 前后端分离趋势谈
- model 获取器
- 对话高考网(4)
- python3 判断大小端的一种方法
- 基于角色的权限控制
- greenDao3 项目搭建与增删改查操作
- 后端线上服务监控与报警方案
- 针对iOS10不跳转系统界面问题,其实iOS提供了一套未公开方法。
- Python 数据可视化 colormap
- opencv3.2.0+contirb+cmake
- C/S架构与B/S架构