权威网站的设计都是有其可学之处的，如果有时间不防看看它们的源代码（HTML代码）。
至少可以学到这些吧：
1。页面布局风格；
2。Javascript代码，CSS原码；
2。CSS,Javascript脚本联合操纵Dom；
以微软的官方网站和MSN中国为例：
在微软的官方网站上已看不到table的影子，页面布局全部采用CSS+DIV控制。
最多用到的HTML元素恐怕就是DIV和UL了。
利用CSS可以精确的将DIV布置在页面的任何地方。
通过脚本控制轻易实现动感DIV效果。涉及到数据读取时可以采用富客户端方式（数据一次性加载到客户端），
也可以采用当下流行的AJAX方式。
下面是MSN中国上的一个效果：
整理后的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML ><HEAD><TITLE></TITLE> <META http-equiv=Content-type content="text/html; charset=utf-8"> <style>
H2.ttl02 {}{PADDING-LEFT: 10px; FONT-SIZE: 14px; BACKGROUND: #ebf3fb; COLOR: #07519a; LINE-HEIGHT: 25px; BORDER-BOTTOM: #ace 1px solid; POSITION: relative; HEIGHT: 25px; TEXT-ALIGN: left} H2.ttl02 SPAN {}{FONT-WEIGHT: normal; FONT-SIZE: 12px; RIGHT: 10px; POSITION: absolute; TOP: 0px} .proguid {}{BORDER-RIGHT: #ace 1px solid; BORDER-TOP: #ace 1px solid; MARGIN: 0px auto 20px; BORDER-LEFT: #ace 1px solid; WIDTH: 898px; BORDER-BOTTOM: #ace 1px solid; HEIGHT: 146px} .lftbtn {}{MARGIN-TOP: 26px; BACKGROUND: url(lefta.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 29px; CURSOR: pointer; HEIGHT: 62px} .rgtbtn {}{MARGIN-TOP: 26px; BACKGROUND: url(lefta.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 6px; WIDTH: 29px; CURSOR: pointer; HEIGHT: 62px} .rgtbtn {}{BACKGROUND: url(rightb.gif) no-repeat center 50%; FLOAT: left; MARGIN-LEFT: 0px; WIDTH: 29px; HEIGHT: 62px} .procro {}{FLOAT: left; MARGIN-LEFT: 15px; OVERFLOW: hidden; WIDTH: 812px; HEIGHT: 121px} .procroin {}{WIDTH: 1750px; HEIGHT: 121px} .procont {}{DISPLAY: inline; FLOAT: left; WIDTH: 248px; MARGIN-RIGHT: 28px }
</style> <SCRIPT language=javascript type=text/javascript>
var step = 2; function prorgt() { while(document.getElementById("proccc").scrollLeft<828) { document.getElementById("proccc").scrollLeft = document.getElementById("proccc").scrollLeft+step;
} document.getElementById("proccc").scrollLeft = 828; document.getElementById("srbtn").style.backgroundImage = "url(righta.gif)"; document.getElementById("slbtn").style.backgroundImage = "url(leftb.gif)"; } function prolft() { while(document.getElementById("proccc").scrollLeft>0) { document.getElementById("proccc").scrollLeft = document.getElementById("proccc").scrollLeft-step; } document.getElementById("proccc").scrollLeft = 0; document.getElementById("srbtn").style.backgroundImage = "url(rightb.gif)"; document.getElementById("slbtn").style.backgroundImage = "url(lefta.gif)"; } </SCRIPT></HEAD><BODY> <DIV class=proguid> <H2 class=ttl02>Title<SPAN><A href="#">help</A></SPAN></H2> <DIV class=lftbtn id=slbtn onmouseover=prolft()></DIV> <DIV class=procro id=proccc> <DIV class=procroin> <DIV class=procont>1111</DIV> <DIV class=procont>2222</DIV> <DIV class=procont>3333</DIV> <DIV class=procont>4444</DIV> <DIV class=procont>5555</DIV> <DIV class=procont>6666</DIV> </DIV> </DIV> <DIV class=rgtbtn id=srbtn onmouseover=prorgt()></DIV> </DIV></BODY></HTML>
标准的CSS＋DIV布局，在body中只有以下一些东西：
1。HTML元素（DIV,UL等）;
2。HTML元素对应的CSS（可以是Class也可以是Id对应）;
3。HTML元素对应的JavaScript事件(单击触发，鼠标滑过触发等);
4。HTML元素中的数据;
涉及布局，显示等全部在CSS中控制，例如：
◆字体效果:<font>，<strong>等
◆布局效果:<br>,<center>,<p>等
◆样式效果:<style>等
是不会出现在body中的
下面是微软中国的一个效果：
整理后的HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML><HEAD><TITLE>index</TITLE><META http-equiv=Content-Type content="text/html; charset=utf-8"><STYLE type=text/css> html, body, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input {}{ font-size: 1em; }html, body, div, p, table, td, form, img, h1, h2, h3, h4, h5, h6, input {}{ font-family: Tahoma,Verdana,Segoe,sans-serif; padding: 0px; margin: 0px; border: 0px transparent none; background-position:left top; background-repeat:no-repeat; }body{}{ font-size: 70%; background-color:#c8e3f1; }#masterNav{}{ position:absolute; top:49px; right:15px; width:192px; z-index:70; }#masterNavBody {}{ position:relative; zoom:1; }#masterNavBody h1 {}{ margin-left:1px; margin-right:1px; cursor:pointer; position:relative; background-color:#eaebf0; }#masterNavBody .active {}{ background-image:url('activemenubg.png'); }#masterNavBody .inactive {}{ background-image:url('inactivemenubg.png'); }#masterNavBody h1 .topNavText {}{ padding-left:19px; padding-bottom:3px; padding-top:14px; }#masterNavBody h1 .arrow {}{ position:absolute; top:18px; left:5px; width:11px; height:11px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='arrow_dw.png', sizingMethod='crop'); }#masterNavBody h1 .arrow[class] {}{ background-image:url('arrow_dw.png'); }#masterNavBody h1.inactive .arrow {}{ top:15px; left:8px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='arrow_rt.png', sizingMethod='crop'); }#masterNavBody h1.inactive .arrow[class] {}{ background-image:url('/shared/core/1/images/arrow_rt.png'); }#masterNavFooter {}{ height:17px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottombg.png', sizingMethod='crop'); }#masterNavFooter[class] {}{ background-image:url('bottombg.png'); }#masterNavLinks a, #masterNavLinks a:visited {}{ display:block; padding-top:3px; padding-bottom:4px; padding-left:21px; padding-right:20px; color:#000000; text-decoration:none; }#masterNavLinks a:hover {}{ background-image:url('hover_noani1.gif'); background-repeat:repeat-y; }#masterNavLinks a.activeNav, #masterNavLinks a.activeNav:hover {}{ background-image:url('mainmenuselected.jpg'); }#masterNavLinks {}{ padding-left:1px; padding-right:1px; overflow:hidden; }#masterNavLinks .container {}{ background-image:url('mainmenubg.gif'); background-repeat:repeat-x; background-color:#FFFFFF; padding-top:10px; padding-bottom:10px; }#masterNavScreen {}{ display:none; position:absolute; top:0px; left:0px; width: 933px; background-color:#000000; filter: alpha(Opacity=25); -moz-opacity:0.25; z-index:1; }#masterNavSearch {}{ background-image:url('searchboxbg.gif'); margin:0 1px; background-color:#bac1cc; height:51px; position:relative; }#mnsRad {}{ margin:2px 0; position:absolute; top:30px; right:5px; font-family:Tahoma; font-size:82%; color:#737373; }#mnsRad img {}{margin: 0 3px 0 6px; vertical-align:middle;}#masterNavSearch #searchTextDiv {}{ background-image:url('search_box.gif'); position:absolute; left:5px; top:10px; width:168px; height:22px; }#masterNavSearch #q {}{ position:absolute; top:2px; left:5px; width:156px; border: solid 1px #FFFFFF; background-color:#FFFFFF; }#masterNavSearch .watermark#q {}{ font-style:italic; color:#544a4c; }#masterNavSearch #submit {}{ position:absolute; right:4px; top:10px; }#masterNavTitle {}{ width:192px; height:21px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='topbg.png', sizingMethod='crop'); }#masterNavTitle[class] {}{ background-image:url('topbg.png'); }.left_flt {}{ float:left; }.left_flt_txt {}{ padding-top:2px; }</STYLE><SCRIPT type=text/javascript> function getObject(elementId) { if (document.getElementById) { return document.getElementById(elementId); } else if (document.all) { return document.all[elementId]; } else if (document.layers) { return document.layers[elementId]; } } function getTargetFromEvent(e) { if (!e) var e = window.event; if (e.target) var tg = e.target; else if (e.srcElement) var tg = e.srcElement; while (tg.nodeType != 1) tg = tg.parentNode; return tg; } var KPF=null; function KP(o){ var k = GKBH(o); if(k==13||k==32) { eval(KPF); return false; } return k; } function GKBH(o) { var k; try{k=(window.event != null && window.event.keyCode != null) ? window.event.keyCode : e.which;}catch(e){k=null;}; return (k==null && o !=null && o.keyCode !=null)? o.keyCode : k; } var mnl; var mnl_h; var mnl_oh; var isE=true; var timer; var closeWhileCollapse=false; function navH1Click(e){ if(timer){ clearInterval(timer); timer = null; } var target=getTargetFromEvent(e); mnl = getObject('masterNavLinks'); if(target && mnl){ if(target.nodeName != 'H1') { target = target.parentNode; } mnl_h = mnl.offsetHeight; if(!mnl_oh){ mnl_oh = mnl_h; } isE = !isE; if(isE) { target.className = 'active'; } else { target.className = 'inactive'; } navH1Interval(); timer = setInterval(navH1Interval, 1); } } function navH1Interval(){ var isFinishedExpanding=false; if(mnl_h <= 0 && isE) { var o =getObject('masterNavLinks'); if(null!=o){o.style.display='block';} } if(!isE){ mnl_h -= 20; } else{ mnl_h += 20; } if(mnl_h < 0){ mnl_h = 0; } else if(mnl_h > mnl_oh){ mnl_h = mnl_oh; mnl.style.height="auto"; isFinishedExpanding=true; } if(!isFinishedExpanding) mnl.style.height = mnl_h+'px'; if(mnl_h <= 0 || mnl_h >= mnl_oh) { if(mnl_h <= 0 && !isE) { var o =getObject('masterNavLinks'); o.style.display='none'; } clearInterval(timer); timer = null; var masterNavLinks = getObject('masterNavLinks'); if(closeWhileCollapse && isE && masterNavLinks && masterNavLinks.childNodes){ closeWhileCollapse = false; resetNavToFirst(masterNavLinks); } } } function navClick(e){var target=getTargetFromEvent(e);for(var i=0;i<target.parentNode.childNodes.length;i++){ var node = target.parentNode.childNodes[i]; if(node && node.nodeName == 'A'){ node.className=''; } } target.className = 'activeNav';} function loadPage() { try{ if(eval('nP')) { var masterNavLinks = getObject('masterNavLinks'); if(masterNavLinks && masterNavLinks.childNodes){ for(var i=0;i<masterNavLinks.childNodes.length;i++){ var node = masterNavLinks.childNodes[i]; if(node && node.className == 'container' && node.childNodes) { for(var j=0;j<node.childNodes.length;j++){ var link = node.childNodes[j]; if(link && link.nodeName == 'A' && link.className.indexOf('link') == -1){ link.onclick=navClick; } } } } } var masterNavBody = getObject('masterNavBody'); if(masterNavBody && masterNavBody.childNodes){ for(var i=0;i<masterNavBody.childNodes.length;i++){ var node = masterNavBody.childNodes[i]; if(node && node.nodeName == 'H1'){ node.onclick=navH1Click; } } } } }catch(e){;} } window.onload = loadPage; </SCRIPT></HEAD><BODY><SCRIPT type=text/javascript>var nP='/global/SiteTemplates/553a6c5f-895b-4785-84e2-1f651d0fffe1.xml';</SCRIPT><DIV id=masterNav> <DIV class=png id=masterNavTitle> </DIV> <DIV class=png id=masterNavSearch> <DIV class=png id=searchTextDiv><INPUT id=q title=搜索 maxLength=256 name=q></DIV> <INPUT id=submit type=image alt=搜索 src="icon_search.gif"> <DIV id=mnsRad> <DIV class="left_flt left_flt_txt">powered by</DIV> <DIV class=left_flt><IMG title="Live Search" height=15 alt="Live Search" src="ls.gif" width=17></DIV> <DIV class="left_flt left_flt_txt">Live Search</DIV></DIV> </DIV> <DIV id=masterNavBody> <H1 class=active onkeydown="if (!KP(event)){navH1Click(event);return true;}else{return event;};" onfocus="KPF='null';" tabIndex=0> <DIV class=arrow> </DIV> <DIV class=topNavText>All</DIV> </H1> <DIV id=masterNavLinks> <DIV class=container> <A class="link activeNav" href="#">1</A> <A href="#">2</A> <A href="#">3</A> <A href="#">4</A> <A href="#">5</A> <A href="#">6</A> </DIV> </DIV> </DIV> <DIV class=png id=masterNavFooter> </DIV></DIV><DIV id=masterNavScreen> </DIV></BODY></HTML>
其中有很多JavaScript函数我们大可直接拿来。(如library)
以上两个例子的原码下载：微软&MSN
-----------------------20090320补充------------------------------
效果：
代码：
Code<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html ><head>
<title > </title>
<style>
body {margin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff;}
a:link{color: #003278;text-decoration: none;}a:visited{color: #003278;text-decoration: none;}
a:hover{color: #FF6600;text-decoration: underline;}
#slideBox,#slideBox .l, #slideBox .r, #slideBox .l_h, #slideBox .r_h, #slideBox .cont_l, #slideBox .cont_r
{background:url(http://img.china.alibaba.com/images/cn/home/071028/icon_sum.gif) no-repeat;}
#slideBox{background-position:-213px 0px;height:168px;width:178px;padding-left:5px;padding-right:5px;float:right;}
#slide{padding-top:5px}#slide li img{margin-right:3px}
#slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
#slideBox li{float:left;font-weight:bold;height:37px !important;height:27px;}
#slideBox li a:link,#slideBox li a:visited{color:#000;}
#slideBox li a:hover{color:#ff7300;text-decoration: none}
#slideBox .l{background-position:0px -50px;width:80px;}
#slideBox .r{background-position:-100px -50px;width:94px;float:right}
#slideBox .l_h{background-position:0px -450px;width:80px;}
#slideBox .r_h{background-position:-100px -450px;width:94px;float:right;}
#slideBox img{margin:0px; padding:0px;border:0px;}
#slideBox .hide{display:none}
#slideBox .l a{width:52px;}
#slideBox .r a{width:68px;}
.arrow{padding-left:0px;background-position:0px -198px;}
#slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:18px;display:block;height:100%;padding-top:10px;}
#slideBox .cont_l{float:left;background-position:-550px -150px;width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden;}
#slideBox .cont_r{float:left;background-position:-550px -100px;width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden;}
#slideBox .oneline{line-height:33px;}
</style>
</head>
<body>
<!--slidebox start-->
<div id="slideBox" twffan="done">
<div id="slide" twffan="done">
<ul>
<li class="l_h">
<a id="slideBtn_1" href="#">menu1</a>
</li>
<li class="r">
<a id="slideBtn_2" href="#">menu2</a>
</li>
</ul>
<div class="cont_l" id="sc_1" twffan="done">
content1
</div>
<div class="hide" id="sc_2" twffan="done">
content2
</div>
<ul>
<li class="l">
<a id="slideBtn_3" href="#">menu3</a>
</li>
<li class="r">
<a id="slideBtn_4" href="#">menu4</a>
</li>
</ul>
<div class="hide" id="sc_3" twffan="done">
content3
</div>
<div class="hide" id="sc_4" twffan="done">
content4
</div>
<ul>
<li class="l">
<a id="slideBtn_5" href="#">menu5</a>
</li>
<li class="r">
<a id="slideBtn_6" href="#">menu6</a>
</li>
</ul>
<div class="hide" id="sc_5" twffan="done">
content5
</div>
<div class="hide" id="sc_6" twffan="done">
content6
</div>
</div>
</div>
<script type="text/javascript">
var slideTabIndex=1;
var sTabList = document.getElementById("slideBox").getElementsByTagName("li");
for(var i=0;i<sTabList.length;i++){
var obj = sTabList[i].getElementsByTagName("a")[0];
sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
if (obj.addEventListener) {
obj.addEventListener( "mouseover", overSlide, false );
}
else if (obj.attachEvent) {
obj.attachEvent( "onmouseover", overSlide );
}
}
function overSlide(e){
e = window.event || e;
var srcElement = e.srcElement || e.target;
var newTabIndex=srcElement.id.replace("slideBtn_","");
var pos = srcElement.parentNode.className;
if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
document.getElementById("sc_"+slideTabIndex).className="hide";
document.getElementById("sc_"+newTabIndex).className="cont_"+pos;
srcElement.parentNode.className = pos+"_h";
slideTabIndex=newTabIndex;
}
</script>
<!--slidebox end-->
</body></html>