|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。
抠取的中国站长站头部导航，很多伴侣都在找，必要的间接拿走用吧
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>中国站长站-站长资讯|我们努力于为中文网站供应动力！</title><metaname="Keywords"content="站长,网站,资讯,站长网,站长资讯,站长工具"/><metaname="Description"content="为站长供应实时周全的站长资讯"/><linkhref="http://www.chinaz.com//images/style.css"type="text/css"rel="stylesheet"/><scripttype="text/javascript">functionisMatch(str1,str2){varindex=str1.indexOf(str2);if(index==-1)returnfalse;returntrue;}functionResumeError(){returntrue;}window.onerror=ResumeError;function$(id){returndocument.getElementById(id);}//绝对尺寸functionGetOffsetTop(el,p){var_t=el.offsetTop;var_p=el.offsetParent;while(_p){if(_p==p)break;_t+=_p.offsetTop;_p=_p.offsetParent;}return_t;};functionGetOffsetLeft(el,p){var_l=el.offsetLeft;var_p=el.offsetParent;while(_p){if(_p==p)break;_l+=_p.offsetLeft;_p=_p.offsetParent;}return_l;};functionshowMenu(baseID,divID){baseID=$(baseID);divID=$(divID);//varl=GetOffsetLeft(baseID);//vart=GetOffsetTop(baseID);//divID.style.left=l+px;//divID.style.top=t+baseID.offsetHeight+px;if(showMenu.timer)clearTimeout(showMenu.timer);hideCur();divID.style.display=block;showMenu.cur=divID;if(!divID.isCreate){divID.isCreate=true;//divID.timer=0;divID.onmou搜索引擎优化ver=function(){if(showMenu.timer)clearTimeout(showMenu.timer);hideCur();divID.style.display=block;};functionhide(){showMenu.timer=setTimeout(function(){divID.style.display=none;},1000);}divID.onmou搜索引擎优化ut=hide;baseID.onmou搜索引擎优化ut=hide;}functionhideCur(){showMenu.cur&&(showMenu.cur.style.display=none);}}functiondoClick_down(o){o.className="current";varj;varid;vare;for(vari=1;i<=4;i++){id="down"+i;j=document.getElementById(id);e=document.getElementById("d_con"+i);if(id!=o.id){j.className="";e.style.display="none";}else{e.style.display="block";}}}functiondoClick_jy(o){o.className="current";varj;varid;vare;for(vari=1;i<=8;i++){id="jy"+i;j=document.getElementById(id);e=document.getElementById("jy_con"+i);if(id!=o.id){j.className="";e.style.display="none";}else{e.style.display="block";}}}functiondoZoom(size){document.getElementById(textbody).style.fontSize=size+px}///修正及新增functiondoClick_menu(o){o.className=menu_gg;varj,id,e;for(vari=1;i<=11;i++){id=menu+i;j=document.getElementById(id);e=document.getElementById(menu_con+i);if(id!=o.id){j.className=;e.style.display=none;}else{e.style.display=block;}}varurl=;switch(o.innerHTML){case资讯:url=/plus/search.php?searchtype=titlekeyword&keyword=;break;case源码:url=http://down.chinaz.com/query.asp?q=;break;case软件:url=http://www.chinaz.cn/query.asp?q=;break;case论坛:url=http://bbs.chinaz.com/Search.html?mode=1&searchText=;break;case博客:url=http://my.chinaz.com/list.asp?selecttype=topic&keyword=;break;case买卖:url=http://1m.chinaz.com/Search.asp?keyword=;break;caseGOOGLE:url=/uploadfile/200812/2/C4141448514.gif%3BLH%3A60%3BLW%3A165%3BBGC%3Awhite%3BT%3A%23000000%3BLC%3A%230000cc%3BVLC%3A%23551A8B%3BALC%3A%23ff3300%3BGALT%3A%23008000%3BGFNT%3A%237777CC%3BGIMP%3A%23FF0000%3BDIV%3A%23000099%3BLBGC%3Awhite%3BAH%3Aleft%3B&domains=chinaz.com&sitesearch=chinaz.com&q=;break;caseALEXA:url=http://alexa.chinaz.com/index.asp?domain=;break;caseIP回属:url=http://tool.chinaz.com/Ip/Index.asp?ip=;break;caseWhois:url=http://tool.chinaz.com/whois/;break;case素材:url=http://sc.chinaz.com/Search.aspx?page=1&SearchWord=;break;}doClick_submit.url=url;}doClick_submit.url=/plus/search.php?searchtype=titlekeyword&keyword=;functiondoClick_submit(){varkeyword=document.getElementsByName(keyword)[0].value;window.open(doClick_submit.url+keyword);}window.onload=function(){varkeyword=document.getElementsByName(keyword)[0];keyword.onkeydown=function(e){e=e||window.event;if(e.keyCode==13){doClick_submit();}};}</script></head><body><divclass="container"><divclass="nav"><divclass="navinner"><ulclass="navlist"><li><ahref="/">首页</a></li><li><ahref="/News/Index.html"id="nav_1"onmou搜索引擎优化ver="showMenu(nav_1,subnav1)">旧事资讯</a><divclass="subnavdisable"id="subnav1"><pclass="pointer">.</p><p><span><ahref="/News/It/Index.html">业界静态</a>|<ahref="/News/Invest/Index.html">收买融资</a>|<ahref="/News/Portals/Index.html">流派静态</a>|<ahref="/News/Search/Index.html">搜刮引擎</a>|<ahref="/News/Game/Index.html">收集游戏</a>|<ahref="/News/Biz/Index.html">电子商务</a>|<ahref="/News/Media/Index.html">告白传媒</a>|<ahref="/News/Soft/Index.html">厂商开辟</a></span></p></div></li><li><ahref="/Webmaster/Index.html"id="nav_2"onmou搜索引擎优化ver="showMenu(nav_2,subnav2)">站长在线</a><divclass="subnavdisable"id="subnav2"><pclass="pointer">.</p><p><span><ahref="/Webmaster/RecSite/Index.html">好站保举</a>|<ahref="/Webmaster/Gather/Index.html">站长聚首</a>|<ahref="/Webmaster/Visit/Index.html">站长访谈</a>|<ahref="/Webmaster/Club/Index.html">站长茶室</a>|<ahref="/Webmaster/Topsite/Index.html">网站排行</a></span></p></div></li><li><ahref="/Webbiz/Index.html"id="nav_3"onmou搜索引擎优化ver="showMenu(nav_3,subnav3)">网站运营</a><divclass="subnavdisable"id="subnav3"><pclass="pointer">.</p><p><span><ahref="/Webbiz/Exp/Index.html">建站履历</a>|<ahref="/Webbiz/BizPlan/Index.html">筹划红利</a>|<ahref="/Webbiz/Seo/Index.html">搜刮优化</a>|<ahref="/Webbiz/Promot/Index.html">网站推行</a>|<ahref="/Webbiz/Free/Index.html">收费资本</a></span></p></div></li><li><ahref="/Design/Index.html"id="nav_4"onmou搜索引擎优化ver="showMenu(nav_4,subnav4)">计划在线</a><divclass="subnavdisable"id="subnav4"><pclass="pointer">.</p><p><span><ahref="/Design/Coolsite/Index.html">酷站保举</a>|<ahref="/Design/Pages/Index.html">网页计划</a>|<ahref="/Design/Rules/Index.html">WEB尺度</a>|<ahref="/Design/Video/Index.html">视频处置</a>|<ahref="/Design/Activity/Index.html">计划举动</a></span></p></div></li><li><ahref="/Program/Index.html"id="nav_5"onmou搜索引擎优化ver="showMenu(nav_5,subnav5)">收集编程</a><divclass="subnavdisable"id="subnav5"><pclass="pointer">.</p><p><span><ahref="/Program/Asp/Index.html">Asp编程</a>|<ahref="/Program/Php/Index.html">Php编程</a>|<ahref="/Program/.Net/Index.html">.Net编程</a>|<ahref="/Program/Xml/Index.html">Xml编程</a>|<ahref="/Program/Access/Index.html">Access</a>|<ahref="/Program/Mssql/Index.html">Mssql</a>|<ahref="/Program/Mysql/Index.html">Mysql</a></span></p></div></li><li><ahref="/Union/Index.html"id="nav_6"onmou搜索引擎优化ver="showMenu(nav_6,subnav6)">同盟资讯</a><divclass="subnavdisable"id="subnav6"><pclass="pointer">.</p><p><span><ahref="/Union/News/Index.html">同盟旧事</a>|<ahref="/Union/Intro/Index.html">同盟先容</a>|<ahref="/Union/Comment/Index.html">同盟点评</a>|<ahref="/Union/Skill/Index.html">网赚技能</a></span></p></div></li><li><ahref="/Server/Index.html"id="nav_7"onmou搜索引擎优化ver="showMenu(nav_7,subnav7)">服务器</a><divclass="subnavdisable"id="subnav7"><pclass="pointer">.</p><p><span><ahref="/Server/Web/Index.html">Web服务器</a>|<ahref="/Server/Ftp/Index.html">Ftp服务器</a>|<ahref="/Server/Mail/Index.html">Mail服务器</a>|<ahref="/Server/Dns/Index.html">Dns服务器</a>|<ahref="/Server/Win/Index.html">Win服务器</a>|<ahref="/Server/Linux/Index.html">Linux服务器</a>|<ahref="/Server/Safe/Index.html">平安防护</a></span></p></div></li></ul></div></div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
蓝色幻想:http://bbs.blueidea.com/thread-2859451-1-1.html
以下的内容是一位网友的DIVCSS编码笔记，是值得大家学习的，在实际工作与开发中，将工作中的点滴记录下来，回首这些过往，你也会收获很多 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:37:03
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主