我现在再用asp.net(vb.net)编制网络程序，现在需要做一个类似qq界面的界面，请问我该从和着手，小妹不甚感激^_^

Question

请问一下：我现在再用asp.net(vb.net)编制网络程序，现在需要做一个类似qq界面的界面，请问我该从和着手，小妹不甚感激^_^

Answer 1

也可以用 button 和 div 模拟

Answer 2

以前写的程序，直接封装成对象
/*---------------------------------------------------------------------
 * 创建者：zrz *
 * 创建日期：2004/08/30   *
 * 功能：实现QQ式菜单      *
-----------------------------------------------------------------------*/ 
var  MenuWidth = 140;                    
     var  MenuTop = 20;
var  MenuLeft = 20;
var  ItemHeight = 22;
var  ItemContentHeight = 200;
var  StepNo = 10;     
var  SelectedIndex = 0;    // //当前选中的菜单索引
/*--------------------------------------------------------------
 *            功能: 实现菜单选项的改变                             *
 *            入口参数: selectedIndex : 前次选中的菜单索引 *
 *            index: 当前选中的菜单索引 *
 *            contentHeight:菜单详情的高 *
 --------------------------------------------------------------*/
function ChangeItem( index , contentHeight )
{
  var i = 0 , runTimes = 0;
  //alert( 'Selected:' + SelectedIndex + ':index' + index + 'ContentHeight:' + contentHeight );
  if ( index != SelectedIndex )
  {
    if ( index > SelectedIndex )    
      for ( i = SelectedIndex + 1; i <= index; ++i )
       MoveUp( i , runTimes , contentHeight );
    else
      for ( i = SelectedIndex; i > index; --i )
        MoveDown(  i , runTimes , contentHeight );
    SelectedIndex = index;
  }    
} 
function MoveUp( i , runTimes , contentHeight )
{
  var fun;
  if ( runTimes < StepNo )
  {
    eval( 'document.all.menuitem' + i + '.style.top=parseInt( document.all.menuitem' + i +
          '.style.top ) - contentHeight/StepNo' );
    ++runTimes;
    fun = 'MoveUp(' +  i + ',' + runTimes + ',' + contentHeight + ')';
    setTimeout( fun ,10);
  }
}
function MoveDown( i , runTimes , contentHeight )
{
  var fun;
  if ( runTimes < StepNo )
  {
    eval( 'document.all.menuitem' + i + '.style.top=parseInt( document.all.menuitem' + i +
          '.style.top ) + contentHeight / StepNo ' );
     ++runTimes;
    fun = 'MoveDown(' +  i + ',' + runTimes + ',' + contentHeight + ')';
    setTimeout( fun ,10);
  }
}
/*菜单子项*/
MenuItem.prototype.Height = ItemHeight;
MenuItem.prototype.Width = MenuWidth;
MenuItem.prototype.Index = -1;     //子项索引
MenuItem.prototype.Title = null;          //标题
MenuItem.prototype.TitleStyle = "titleStyle";
MenuItem.prototype.SubItems = null;      //子菜单
MenuItem.prototype.SubItemHeight = ItemContentHeight;
MenuItem.prototype.SubItemStyle = "contentStyle";
function MenuItem( title  , subitems , index )
{
   this.Title = title;
   this.SubItems = subitems;    
   this.Index = index;
 }
/*主菜单*/
 MainMenu.prototype.height=0;
 MainMenu.prototype.width = MenuWidth;
 MainMenu.prototype.left = MenuLeft;
 MainMenu.prototype.Top = MenuTop;
 MainMenu.prototype.Count = 0;
 MainMenu.prototype.Items = new Array(); //菜单项
 MainMenu.prototype.Draw = function()
 {
   var i;
   for ( i = 0; i < this.Count; ++i )
      this.DrawItem( i );
   this.Height = this.Count * this.Items[ 0 ].Height + this.Items[ 0 ].SubItemHeight;
   document.write( '</div>' );
   document.all.MainMenu.style.height = this.Height;
 }
 MainMenu.prototype.DrawItem = function( itemIndex )
{
    //默认为第一项
   var  vheight = itemIndex == 0 ? 0 : itemIndex*this.Items[ itemIndex ].Height + this.Items[ itemIndex ].SubItemHeight; 
      var   drawStr =  '<div id=menuitem' + itemIndex + ' itemIndex=' + itemIndex + ' style="' + 'position:absolute; left:0;' +
         'top:' + vheight + 
     ';width:' + this.Items[ itemIndex ].Width + ';">';
   drawStr += '<table width=100% cellspacing="0" cellpadding="0">' +
   '<tr><td height=' + this.Items[ itemIndex ].Height + ' onclick=' + 'ChangeItem(' + itemIndex + ',' + this.Items[ itemIndex ].SubItemHeight + ') class="' + this.Items[ itemIndex ].TitleStyle + 
   '" align=center>' + this.Items[ itemIndex ].Title + '</td></tr>' +
   '<tr><td align=center height=' + this.Items[ itemIndex ].SubItemHeight + ' class="' + this.Items[ itemIndex ].SubItemStyle + '">' +
   this.Items[ itemIndex ].SubItems + '</td></tr></table></div>';
   document.write( drawStr );    
}
MainMenu.prototype.AddItem = function( item ) //增加菜单项
{
  item.Width = this.width;
  this.Items[ this.Count ] = item;
  ++this.Count;
}
function MainMenu( left , top , width )
{
  if ( left != null )
   this.left = left;
  if ( top != null )
   this.top = top;
  if ( width != null )
   this.width = width;   
  document.write( '<div id=MainMenu style="position:absolute;overflow:hidden; ' +
         'left:' + this.left + ';top:' + this.top + ';width:' + this.width + ';">' );
  /*
  this.AddItem( new MenuItem( 'aa' , 'aa' ) );
  this.AddItem( new MenuItem( 'b' , '<a href="#">b</a><br><br><a href="" target="FrOfPrg">查询</a>' ) );
  this.AddItem( new MenuItem( 'c' , '<a href="#">c</a>' ) );
  this.Draw();
  */
}