从权威网站上“偷”窃
权威网站的设计都是有其可学之处的，如果有时间不防看看它们的源代码（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="#">helpA>SPAN>H2> <DIV class=lftbtn id=slbtn onmouseover=prolft()>DIV> <DIV class=procro id=proccc> <DIV class=procroin> <DIV class=procont>1111DIV> <DIV class=procont>2222DIV> <DIV class=procont>3333DIV> <DIV class=procont>4444DIV> <DIV class=procont>5555DIV> <DIV class=procont>6666DIV> 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中控制，例如：
◆字体效果:，等
◆布局效果:
,
◆样式效果: