类似与QQ,163的邮件表格怎么做啊！

时间：2022-11-20 10:51:39
上网查了，说是
1、数据控件嵌套 ，一级就和QQ他们差不多不需要数据邦定，所以我想应该不需要吧！
2、手写html，这个我不懂，因为表格要进行数据邦定的！
最后我想还是用render写比较好，但是我不知道怎么写，思路是什么样的呢？谁可以帮帮我啊！！！

6 个解决方案

#1

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > 

<!-- 

Email:ibm_sun_microsoft@163.com 

QQ:312151701 

--> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

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

<title>简洁Tab</title> 

<style type="text/css"> 

<!-- 

body,div,ul,li{ 

padding:0; 

text-align:center; 

} 

body{ 

font:12px "宋体"; 

text-align:center; 

} 

a:link{ 

color:#00F; 

text-decoration:none; 

} 

a:visited { 

color: #00F; 

text-decoration:none; 

} 

a:hover { 

color: #c00; 

text-decoration:underline; 

} 

ul{ list-style:none;} 

/*选项卡1*/ 

#Tab1{ 

width:460px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*选项卡2*/ 

#Tab2{ 

width:576px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*菜单class*/ 

.Menubox { 

width:100%; 

background:url(http://www.makewing.com/images/uppic/200801081251340.gif); 

height:28px; 

line-height:28px; 

} 

.Menubox ul{ 

margin:0px; 

padding:0px; 

} 

.Menubox li{ 

float:left; 

display:block; 

cursor:pointer; 

width:114px; 

text-align:center; 

color:#949694; 

font-weight:bold; 

} 

.Menubox li.hover{ 

padding:0px; 

background:#fff; 

width:116px; 

border-left:1px solid #A8C29F; 

border-top:1px solid #A8C29F; 

border-right:1px solid #A8C29F; 

background:url(http://www.makewing.com/images/uppic/200801081249070.gif); 

color:#739242; 

font-weight:bold; 

height:27px; 

line-height:27px; 

} 

.Contentbox{ 

clear:both; 

margin-top:0px; 

border:1px solid #A8C29F; 

border-top:none; 

height:181px; 

text-align:center; 

padding-top:8px; 

} 

--> 

</style> 

<script> 

<!-- 

/*第一种形式 第二种形式 更换显示样式*/ 

function setTab(name,cursel,n){ 

for(i=1;i<=n;i++){ 

var menu=document.getElementById(name+i); 

var con=document.getElementById("con_"+name+"_"+i); 

menu.className=i==cursel?"hover":""; 

con.style.display=i==cursel?"block":"none"; 

} 

} 

//--> 

</script> 

</head> 

<body> 

<br><br> 

<div id="Tab1"> 

<div class="Menubox"> 

<ul> 

<li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li> 

<li id="one2" onclick="setTab('one',2,4)" >新闻2</li> 

<li id="one3" onclick="setTab('one',3,4)">新闻3</li> 

<li id="one4" onclick="setTab('one',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_one_1" class="hover">新闻列表1</div> 

<div id="con_one_2" style="display:none">新闻列表2</div> 

<div id="con_one_3" style="display:none">新闻列表3</div> 

<div id="con_one_4" style="display:none">新闻列表4</div> 

</div> 

</div> 

<br> 

<div id="Tab2"> 

<div class="Menubox"> 

<ul> 

<li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li> 

<li id="two2" onclick="setTab('two',2,4)" >新闻2</li> 

<li id="two3" onclick="setTab('two',3,4)">新闻3</li> 

<li id="two4" onclick="setTab('two',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_two_1" >新闻列表1</div> 

<div id="con_two_2" style="display:none">新闻列表2</div> 

<div id="con_two_3" style="display:none">新闻列表3</div> 

<div id="con_two_4" style="display:none">新闻列表4</div> 

</div> 

</div> 

</body> 

</html>

        

#2

LS的代码就行

#3

呵呵，我要后台邦定数据的，请问后台代码的思路是什么样的呢？

#4

C#搞多了,连数据都不会绑了?

不至于吧

#5

1楼的不错。
可以用gridview、DataList等控件来实现数据显示

#6

用gridview如何按照时间来分组显示数据呢？如
表内的1234568表示邦定的记录
如果用嵌套的如何让它在第n页时不显示呢？
//表格首页：

今天
1
2
3
4
5
第一页1234下一页

//表格第二页是

今天
6
7
8
一周
9
10
第一页1234下一页


//表格的第三页

一周
11
12
更早
13
14
15
第一页1234下一页

//表格第四页

更早
16
17
18
19
29
第一页1234下一页



#1

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > 

<!-- 

Email:ibm_sun_microsoft@163.com 

QQ:312151701 

--> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

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

<title>简洁Tab</title> 

<style type="text/css"> 

<!-- 

body,div,ul,li{ 

padding:0; 

text-align:center; 

} 

body{ 

font:12px "宋体"; 

text-align:center; 

} 

a:link{ 

color:#00F; 

text-decoration:none; 

} 

a:visited { 

color: #00F; 

text-decoration:none; 

} 

a:hover { 

color: #c00; 

text-decoration:underline; 

} 

ul{ list-style:none;} 

/*选项卡1*/ 

#Tab1{ 

width:460px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*选项卡2*/ 

#Tab2{ 

width:576px; 

margin:0px; 

padding:0px; 

margin:0 auto;} 

/*菜单class*/ 

.Menubox { 

width:100%; 

background:url(http://www.makewing.com/images/uppic/200801081251340.gif); 

height:28px; 

line-height:28px; 

} 

.Menubox ul{ 

margin:0px; 

padding:0px; 

} 

.Menubox li{ 

float:left; 

display:block; 

cursor:pointer; 

width:114px; 

text-align:center; 

color:#949694; 

font-weight:bold; 

} 

.Menubox li.hover{ 

padding:0px; 

background:#fff; 

width:116px; 

border-left:1px solid #A8C29F; 

border-top:1px solid #A8C29F; 

border-right:1px solid #A8C29F; 

background:url(http://www.makewing.com/images/uppic/200801081249070.gif); 

color:#739242; 

font-weight:bold; 

height:27px; 

line-height:27px; 

} 

.Contentbox{ 

clear:both; 

margin-top:0px; 

border:1px solid #A8C29F; 

border-top:none; 

height:181px; 

text-align:center; 

padding-top:8px; 

} 

--> 

</style> 

<script> 

<!-- 

/*第一种形式 第二种形式 更换显示样式*/ 

function setTab(name,cursel,n){ 

for(i=1;i<=n;i++){ 

var menu=document.getElementById(name+i); 

var con=document.getElementById("con_"+name+"_"+i); 

menu.className=i==cursel?"hover":""; 

con.style.display=i==cursel?"block":"none"; 

} 

} 

//--> 

</script> 

</head> 

<body> 

<br><br> 

<div id="Tab1"> 

<div class="Menubox"> 

<ul> 

<li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li> 

<li id="one2" onclick="setTab('one',2,4)" >新闻2</li> 

<li id="one3" onclick="setTab('one',3,4)">新闻3</li> 

<li id="one4" onclick="setTab('one',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_one_1" class="hover">新闻列表1</div> 

<div id="con_one_2" style="display:none">新闻列表2</div> 

<div id="con_one_3" style="display:none">新闻列表3</div> 

<div id="con_one_4" style="display:none">新闻列表4</div> 

</div> 

</div> 

<br> 

<div id="Tab2"> 

<div class="Menubox"> 

<ul> 

<li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li> 

<li id="two2" onclick="setTab('two',2,4)" >新闻2</li> 

<li id="two3" onclick="setTab('two',3,4)">新闻3</li> 

<li id="two4" onclick="setTab('two',4,4)">新闻4</li> 

</ul> 

</div> 

<div class="Contentbox"> 

<div id="con_two_1" >新闻列表1</div> 

<div id="con_two_2" style="display:none">新闻列表2</div> 

<div id="con_two_3" style="display:none">新闻列表3</div> 

<div id="con_two_4" style="display:none">新闻列表4</div> 

</div> 

</div> 

</body> 

</html>

        

#2

LS的代码就行

#3

呵呵，我要后台邦定数据的，请问后台代码的思路是什么样的呢？

#4

C#搞多了,连数据都不会绑了?

不至于吧

#5

1楼的不错。
可以用gridview、DataList等控件来实现数据显示

#6

用gridview如何按照时间来分组显示数据呢？如
表内的1234568表示邦定的记录
如果用嵌套的如何让它在第n页时不显示呢？
//表格首页：

今天
1
2
3
4
5
第一页1234下一页

//表格第二页是

今天
6
7
8
一周
9
10
第一页1234下一页


//表格的第三页

一周
11
12
更早
13
14
15
第一页1234下一页

//表格第四页

更早
16
17
18
19
29
第一页1234下一页



标签：

相关文章