網頁設計怎麼排序_網頁設計的不同數字序號怎麼排列

1、製作網頁時表格排列的問題

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{font-size:14px}button{margin:3px}</style>
<script type="text/javascript">

var mytable=null,mytable2=null;

window.onload=function(){
mytable=new CTable("tbl",10);
mytable2=new CTable("tbl2",6);
}

Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}

function $A(arrayLike){
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
}

Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}

function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
}

CTable.prototype={
addrows:function(n){ //隨機添加n個tr
new Array(n).each(this.add.bind(this))
},
add:function(){ //添加1個tr
var self=this;
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML=Math.ceil(Math.random()*9)
td3.innerHTML=Math.ceil(Math.random()*9)
},
del:function(){ //刪除所選tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){ //上移所選tr
var self=this
var upOne=function(tr){ //上移1個tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){
if (tr.rowIndex<self.tbl.rows.length-1) {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows)

if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
sort:function(){ //排序
var self=this,order=arguments[0];
var sortBy=function(a,b){
if (typeof(order)=="number"){ //數字,則按數字指示的列排序
return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //轉化為數字類型比較大小
}else if (typeof(order)=="function"){ //為程序,按程序的返回結果排序
return order(a,b);
}else{
return 1;
}
}
$A(self.tbl.rows).sort(sortBy).each(function(x){
var checkStatus=self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if (checkStatus) self.getChkBox(x).checked=checkStatus;
});
},
rnd:function(){ //隨即選擇幾行tr
var self=this,selmax=0,tbl=self.tbl;
if (tbl.rows.length){
selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //選擇的行數不超過tr數的1/4
$A(tbl.rows).each(function(x){
self.getChkBox(x).checked=false;
self.restoreBgColor(x)
})
}else{
return alert("無數據可以選")
}
new Array(selmax).each(function(){
var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]
self.getChkBox(tr).checked=true;
self.highlight({target:self.getChkBox(tr)})
})
},
highlight:function(){ //設置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){ //交換tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){ //從tr得到 checkbox對象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){
tr.style.backgroundColor="#ffffff"
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
}

function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
}

</script>

</head>
<body>

<button onClick="javascript:mytable.rnd()">隨機選擇行</button>
<button onClick="javascript:mytable.add()">添加一行</button>
<button onClick="javascript:mytable.del()">刪除選定行</button>
<button onClick="javascript:mytable.up()">上移選定行</button>
<button onClick="javascript:mytable.down()">下移選定行</button>
<button onClick="javascript:mytable.sort(1)">按第一列數字排序</button>
<button onClick="javascript:mytable.sort(f)">按每行數據的和排序</button>
<br/><br/>
<table width=100%>
<tr>
<td valign="top"><table border id="tbl" width="80%"></table></td>
<td valign="top"><table border id="tbl2" width="80%"></table></td>
</tr>
</table>
<br/><br/>
<button onClick="javascript:mytable2.rnd()">隨機選擇行</button>
<button onClick="javascript:mytable2.add()">添加一行</button>
<button onClick="javascript:mytable2.del()">刪除選定行</button>
<button onClick="javascript:mytable2.up()">上移選定行</button>
<button onClick="javascript:mytable2.down()">下移選定行</button>
<button onClick="javascript:mytable2.sort(2)">按第二列數字排序</button>
<button onClick="javascript:mytable2.sort(f)">按每行數據的和排序</button>

</body>
</html>

2、html網頁設計如何倒序排列

按id號從小到大排列
sql = "select * from tablename order by id asc"
按id號從大到小排列
sql = "select * from tablename order by id desc"

舉例如下：
下面是一段正常的源碼，它可以正常查詢出倒序結果：


<head>

<title> 回眸一笑</title>

<style></style>
<style></style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>

<body text="#000000" >

<div id="newest">
<div id="ntitle" align="right">最新10篇帖子：</div>
<div id="space"></div>
<div id="nmarquee">
<table width="100%" height="12" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id=demo1>
<table width="100%" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<%
Dim nSql
nSql="Select top 10 * From [Dv_Topic] Order By TopicID DESC"

Dim nRs
Set nRs=Server.CreateObject("ADODB.RecordSet")
nRs.Open nSql,Conn1,1,1
while not nRs.eof
%>
<td height="17"><table width="500"><tr><td width="492" height="10">

<a href='../../xiabbs/Dvbbs8.2.0_Ac/dispbbs.asp?TopicIDid=<%=nRs("TopicID")%>'>
<strong><font color="#333366"><%=left(nRs("PostUserName"),5)%></font></strong>
<font color="#FF3366"> 發貼於 </font>
<strong><font color="#333366"><%=left(nRs("DateAndTime"),12)%></font></strong>：<%=left(nRs("Title"),20)%>
</a></td></tr></table></td>
<%
nRs.movenext
wend
nRs.close:set nRs = nothing
%>
但是把它的鏈接更改，使它指向其它ID，但查詢結果卻順序顯示了。代碼如下：


<head>

<title>回眸一笑</title>

<style></style>
<style></style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>

<body text="#000000" >

<div id="newest">
<div id="ntitle" align="right">最新10篇帖子：</div>
<div id="space"></div>
<div id="nmarquee">
<table width="100%" height="12" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id=demo1>
<table width="100%" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<%
Dim nSql
nSql="Select top 10 * From [Dv_Topic] Order By TopicID DESC"
nSql="Select top 10 * From [Dv_Topic] Order By boardid DESC"

Dim nRs
Set nRs=Server.CreateObject("ADODB.RecordSet")
nRs.Open nSql,Conn1,1,1
while not nRs.eof
%>
<td height="17"><table width="500"><tr><td width="492" height="10">

<a href='../../xiabbs/Dvbbs8.2.0_Ac/dispbbs.asp?boardid=<%=nRs("boardid")%>&id=<%=nRs("TopicID")%>'>
<strong><font color="#333366"><%=left(nRs("PostUserName"),5)%></font></strong>
<font color="#FF3366"> 發貼於 </font>
<strong><font color="#333366"><%=left(nRs("DateAndTime"),12)%></font></strong>：<%=left(nRs("Title"),20)%>
</a></td></tr></table></td>
<%
nRs.movenext
wend
nRs.close:set nRs = nothing
%>
分享

3、網頁製作如何對表格內容進行排序

這種實現通常有兩種方法：一種就是點一下標題，重新查一次資料庫，根據所選項進行排序，另外一種就是通過JS函數進行排序，這種排序不需要重新檢索資料庫，好像struts已經有這樣的標簽了。

4、網頁設計的不同數字序號怎麼排列

用LI標簽。http://www.w3school.com.cn/tags/tag_li.asp

一定要用OL下的不能用UL下的。

5、描述網頁設計的一般步驟

一、網站結構設計
網站結構設計包含網站欄目設計和網站模塊設計以來確定網站提供服務的一種邏輯表現形式，也是網頁之間的層次關系。
1.網站欄目能起到提綱挈領額作用
2.網站欄目具有清晰導航的功能
3.網站模塊要做到順序清晰且緊密結合

二、網站主題設計
網站主題設計實際就是網站視覺呈現風格的設計。網站的主題風格要能充分吸引用戶的注意力，為用戶提供愉快的訪問體驗。
1.設計能反映網站內容的logo,並且將logo放在網站的醒目位置。
2.網站的顏色要統一，要突出網站的主調色彩。
3.相同類型的圖像要有相同的效果。
4.網站要有一句明晰的宣傳標語。

三、網站布局類型
1. 國字型布局
這種布局類型分為上邊欄、左邊欄、中間內容區、右邊欄和底部的頁腳區域，其形狀酷似一個「國」字。國字型結構是目前比較常用的一個網頁布局結構，它適用於信息分類繁多、需要良好組織的網站。
2. T字型布局
這種布局類型由上邊欄、左邊欄、內容區、下邊欄組成，其形狀有點像一個英文字母寫的「T」字。T字型結構網站目前在一些權威機構、企事業單位的公司網站出現得比較多。
3. 左右框架型布局
這類網站主要由左邊欄和內容區組成，組成比較簡潔，主要用於精彩內容的呈現，主要是很多個人站點、博客的首選。
4. 上下框架型布局
這類網站由上下邊欄組成，上邊欄用來放置logo和鏈接等信息，下邊欄用來放置網頁的內容。上下型網站經常用來進行個性化展示，在企業門戶網站的公司展示中也比較常用。
5. 標題正文型布局
這類網站的布局結構由上邊欄和內容區組成，上邊欄用於顯示文章的標題。主要用於顯示文章的標題，內容區放置文章的內容，這類布局在一些論文、學術網站的設計中比較常用。
網站設計都不會單獨使用以上列出的某一種布局結構，而是通過混合使用多種布局結構來實現自己想要的效果，這類布局通常稱為「綜合性布局」。

四、網站頁面設計
網站頁面是網站的最終表現形式。網站頁面由頁面內容的質量度和頁面的美觀度來決定。頁面設計應該遵循的原則如下：
1.符合企業的行業屬性和企業特點。客戶打開網站能直觀感受企業所傳遞的理念和特徵。
2.符合用戶的瀏覽習慣。根據網站內容的重要性進行排序，讓用戶花最短的時間能夠找到自己需要的信息。
3.符合用戶的使用習慣。將用戶經常使用的功能放在網站的醒目位置。
4.圖文搭配。
5.利於搜索引擎優化。減少圖片和動畫，多使用文字描述，以便於搜索引擎收錄，讓客戶更容易找到你。格子網路解答。

6、網頁製作中圖片從左邊依次排列

直接用無需列表如：<div><ul><li>圖片</li></ul></div>，然後li｛float：left；｝這樣圖片就依次按你所需排列出來了。希望我的回答能夠幫助到你！

7、網頁設計，文章排序

<ol>

{dede:arclist typeid=欄目ID row=15 titlelen=20 orderby='pubdate' }
<li><a href='[field:arcurl/]'>[field:title/]</a> </li>
{/dede:arclist}
</ol>
給你現成的，你把欄目ID改下即可

8、有誰知道網頁中的子根目錄如何排序？？？謝謝了

文件名稱時間大小類型三種

9、網頁頁面排列混亂

瀏覽器的問題，在你寫代碼的時候一定要注意瀏覽器的支持與否，一般做好的頁面會用比較常規的瀏覽器查看，所以你還要加進去一些代碼，字體不一樣，是因為你做網頁選著的字體瀏覽器不支持，就換變成默認的，一般在bady標簽那會設置多種字體，以防止字體變花~
排版混亂也是瀏覽器的問題，瀏覽器不同顯示的不一樣，所以你要找出那些代碼是通用的，那些是不通用的，以後注意就行了，這是個時間積累經驗的過程

導航:首頁 > 萬維百科 > 網頁設計怎麼排序

網頁設計怎麼排序

與網頁設計怎麼排序相關的知識