对话高考网（4）

新闻页面的制作与分页

这周完善了一下主页面，为页面增添了页脚元素，主要成果是大约完成了新闻页面的制作。

我将主页面的新闻板块移植了过来，为了各条新闻的美观程度，在前面加上小图标。效果如图：

在相邻页面跳转的同时使用输入页数方式实现快捷跳转，运用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新闻页面暂时搭建到这里，接下来主要开始学习论坛的搭建技术，这也是本网站的精髓所在，包括呈现方式与效果，我将在网上找教学视频以及经典范例进行学习与领悟。