权威网站的设计都是有其可学之处的，如果有时间不防看看它们的源代码（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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
