DIV CSS 佈局教程網

  
一個模板，從數據庫取n條記錄，生成靜態。
做單頁面的靜態化,索引頁面是用JS對數組進行組合的。
因為記錄只是一個標題，一個鏈接，字節數不會太大，
那麼用js去用這個大數組進行分頁，貌似不錯,很節約帶寬!
還是很棒的，簡單，實用，值得推薦！
JS代碼：
復制代碼 代碼如下:
function title_array(title, link_add, store_time) {
this.title = title;
this.link_add = link_add;
this.store_time = store_time;
}
var ii = 0;
var item = new Array();
ii++; item[ii] = new title_array('學無止境 25', '#', '(03月17日 23:47)');
ii++; item[ii] = new title_array('學無止境 24', '#', '(03月17日 23:42)');
ii++; item[ii] = new title_array('學無止境 23', '#', '(03月17日 23:32)');
ii++; item[ii] = new title_array('學無止境 22', '#', '(03月17日 23:29)');
ii++; item[ii] = new title_array('學無止境 21', '#', '(03月17日 23:19)');
ii++; item[ii] = new title_array('學無止境 20', '#', '(03月17日 23:15)');
ii++; item[ii] = new title_array('學無止境 19', '#', '(03月17日 23:13)');
ii++; item[ii] = new title_array('學無止境 18', '#', '(03月17日 23:12)');
ii++; item[ii] = new title_array('學無止境 17', '#', '(03月17日 23:10)');
ii++; item[ii] = new title_array('學無止境 16', '#', '(03月17日 22:35)');
ii++; item[ii] = new title_array('學無止境 15', '#', '(03月17日 22:29)');
ii++; item[ii] = new title_array('學無止境 14', '#', '(03月17日 22:28)');
ii++; item[ii] = new title_array('學無止境 13', '#', '(03月17日 22:27)');
ii++; item[ii] = new title_array('學無止境 12', '#', '(03月17日 22:26)');
ii++; item[ii] = new title_array('學無止境 11', '#', '(03月17日 22:24)');
ii++; item[ii] = new title_array('學無止境 10', '#', '(03月17日 22:23)');
ii++; item[ii] = new title_array('學無止境 9', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('學無止境 8', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('學無止境 7', '#', '(03月17日 22:01)');
ii++; item[ii] = new title_array('學無止境 6', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('學無止境 5', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('學無止境 4', '#', '(03月17日 21:50)');
ii++; item[ii] = new title_array('學無止境 3', '#', '(03月17日 21:31)');
ii++; item[ii] = new title_array('學無止境 2', '#', '(03月17日 21:30)');
ii++; item[ii] = new title_array('學無止境 1', '#', '(03月17日 21:30)');
//要顯示的頁面
var currpage = 1;
//一頁顯示信息條數為40
var pagesize = 5;
//頁數維護所顯示的第一頁
var beginpage = 1;
//頁數維護所顯示的最後一頁
var endpage = 100;
//顯示某一頁的內容
function displaypage(onepage) {
if (onepage < 1) {
alert("已到達首頁");
return;
}
var NumRecords;
if (item.length == 1) {
NumRecords = item.length;
} else {
NumRecords = item.length - 1; //信息總條數，減一因為是從下標[1]開始存的信息。
}
//沒有信息就返回
if (NumRecords <= 0) {
return false;
}
NumPages = Math.floor((NumRecords + (pagesize - 1)) / pagesize); //總頁數
if (onepage > NumPages) {
alert("已經到達尾頁");
return;
}
currpage = onepage;
//該頁的第一行
var start = pagesize * (currpage - 1) + 1;
if (NumRecords == 1) {
start = start - 1;
}
if (start >= item.length) return;
//裝入該頁內容
var strText = "";
for (var i = 1; i <= pagesize / 5; i++) {
strText += "<div class=\"title_list\"><ul class=\"title_list bluepoint\">"
for (var j = 1; j <= 5; j++) {
if (start < item.length) {
strText += "<li><a href=\"" + item[start].link_add + "\" target=\"_blank\">" + item[start].title + "</a><span>" + item[start].store_time + "</span></li>";
start++;
}
}
strText += "</ul></div>"
}
document.getElementById("title1").innerHTML = strText;
//如果總頁數不足5條
if (NumPages < 10) {
beginpage = 1;
endpage = NumPages;
} else {
//如果顯示最前面的5頁
if (currpage <= 5 && currpage > 0) {
beginpage = 1;
endpage = 10;
}
//如果顯示最後面的5頁
if (currpage <= NumPages && currpage > (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//其他情況
if (currpage > 5 && currpage < (NumPages - 9)) {
if (currpage >= (endpage + 1)) {
beginpage += 10;
endpage += 10;
}
if (currpage <= (beginpage - 1)) {
beginpage -= 10;
endpage -= 10;
}
}
}
var showtext = "";
if (NumPages > 0) {
showtext += "<span class=\"tpb_right\"><a href=\"javascript:displaypage(1)\" class=\"tpb_btn_previous\"><<</a> ";
showtext += "<a href=\"javascript:displaypage(currpage-1)\">上一頁</a> ";
var currpages = currpage < NumPages - 2 ? currpage + 2 : NumPages;
var currpage1 = currpage <= 2 ? 1 : currpage - 2;
if (NumPages <= 10) {
currpage1 = 1;
currpages = NumPages;
} else if (currpage1 >= 2) {
showtext += "<a href=\"javascript:displaypage(1)\">1</a> ";
if (currpage1 > 2) {
showtext += "...";
}
}
for (i = currpage1; i <= currpages; i++) {
if (currpage == (i)) {
showtext += "<a class=\"cur\" href=\"javascript:displaypage(" + i + ")\">" + i + "</a> ";
} else {
showtext += "<a href=\"javascript:displaypage(" + i + ")\">" + i + "</a> ";
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages < NumPages - 1) {
showtext += "...";
}
showtext += "<a href=\"javascript:displaypage(" + NumPages + ")\">" + NumPages + "</a> ";
}
showtext = showtext + "<a href=\"javascript:displaypage(currpage+1)\">下一頁 </a>";
showtext = showtext + "<a href=\"javascript:displaypage(NumPages)\">>></a></span>";
}
document.getElementById("page1").innerHTML = showtext;
}

調用：
復制代碼 代碼如下:
<DIV id=title1> </DIV>
<DIV id=page1 class=turn_page_box> </DIV>
<SCRIPT language=javascript>
//默認顯示首頁的內容
displaypage(1);
</SCRIPT>

具體的演示代碼:
<style type="text/css"> .title_list ul.bluepoint li { background-image: url(https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122410292912.gif); line-height: 20px; padding-left: 13px; background-repeat: no-repeat; list-style-type: none; background-position: left center; } .title_list ul.bluepoint li a{ text-decoration:none} .title_list ul.title_list li span { padding-left: 10px; font-family: arial; font-size: 12px; color: #666; } .turn_page_box { padding-bottom: 30px; border-right-width: 0px; zoom: 1; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px; font-weight: bold; } .turn_page_box .tpb_right a { border-right-width: 0px; background: none transparent scroll repeat 0% 0%; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; text-decoration:none } .turn_page_box .tpb_right a:hover { color:#2557bd; text-decoration: underline } .turn_page_box .tpb_right a.cur { background: none transparent scroll repeat 0% 0%; color: #2557bd } .turn_page_box .tpb_right a.cur:hover { background: none transparent scroll repeat 0% 0% } </style><fieldset style="-moz-border-radius: 8px" align="center"><legend>演示</legend> <ul class="title_list bluepoint"> <li>學無止境 25(03月17日 23:47)</li> <li>學無止境 24(03月17日 23:42)</li> <li>學無止境 23(03月17日 23:32)</li> <li>學無止境 22(03月17日 23:29)</li> <li>學無止境 21(03月17日 23:19)</li> </ul> << 上一頁 1 2 3 4 5 下一頁 >>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]