学习下一个仿DZ Ucenter的复杂用户背景办理界面

只看该作者 · 发表于 2015-1-16 10:37:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

课余，我们也思考过为什么要学习并使用div+CSS，而不是如何实现某个细节。当然我们也不应当为了Div+css而Div+css。这样做毫无意义。而以下两点是我们总结了的它不得不说的好：

<!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=utf-8"/><title>一个仿DZUcenter的复杂用户背景办理界面</title><styletype="text/css">body{font-size:12px;}ul,li,h2{margin:0;padding:0;}ul{list-style:none;}#top{width:900px;height:40px;margin:0auto;background-color:#CCCC00}#toph2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}#topTags{width:750px;height:40px;margin:0auto;background-color:#CCCC00;float:left}#topTagsulli{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}#main{width:900px;height:500px;margin:0auto;background-color:#F5F7E6;}#leftMenu{width:150px;height:500px;background-color:#009900;float:left}#leftMenuul{margin:10px;}#leftMenuulli{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}#leftMenuullia{color:#000000;text-decoration:none;}#content{width:750px;height:500px;float:left}.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}#footer{width:900px;height:30px;margin:0auto;background-color:#ccc;line-height:30px;text-align:center;}.content1{width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}</style><scripttype="text/javascript">window.onload=function(){function$(id){returndocument.getElementById(id)}varmenu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器vartags=menu.getElementsByTagName("li");//顶部菜单varck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左边菜单varj;//点击左边菜单增添新标签for(i=0;i<ck.length;i++){ck.onclick=function(){$("welcome").style.display="none"//接待内包庇躲//轮回获得以后索引for(j=0;j<8;j++){if(this==ck[j]){if($("p"+j)==null){openNew(j,this.innerHTML);//设置标签显现笔墨}clearStyle();$("p"+j).style.backgroundColor="yellow";clearContent();$("c"+j).style.display="block";}}returnfalse;}}//增添或删除标签functionopenNew(id,name){vartagMenu=document.createElement("li");tagMenu.id="p"+id;tagMenu.innerHTML=name+""+"<imgsrc=/uploadfile/200812/16/9C95718970.gifstyle=vertical-align:middle/>";//标签点击事务tagMenu.onclick=function(evt){clearStyle();tagMenu.style.backgroundColor="yellow";clearContent();$("c"+id).style.display="block";}//标签内封闭图片点击事务tagMenu.getElementsByTagName("img")[0].onclick=function(evt){evt=(evt)?evt:((window.event)?window.event:null);if(evt.stopPropagation){evt.stopPropagation()}//作废opera和Safari冒泡举动;this.parentNode.parentNode.removeChild(tagMenu);//删除以后标签varcolor=tagMenu.style.backgroundColor;//设置假如封闭一个标签时，让最初一个标签失掉核心if(color=="#ffff00"||color=="yellow"){//区分扫瞄器对色彩注释if(tags.length-1>=0){clearStyle();tags[tags.length-1].style.backgroundColor="yellow";clearContent();varcc=tags[tags.length-1].id.split("p");$("c"+cc[1]).style.display="block";}else{clearContent();$("welcome").style.display="block"}}}menu.appendChild(tagMenu);}//扫除标签款式functionclearStyle(){for(i=0;i<tags.length;i++){menu.getElementsByTagName("li").style.backgroundColor="#FFCC00";}}//扫除内容functionclearContent(){for(i=0;i<7;i++){$("c"+i).style.display="none";}}}</script></head><body><divid="top"><h2>办理菜单</h2><divid="topTags"><ul></ul></div></div><divid="main"><divid="leftMenu"><ul><li>团体材料</li><li>相册办理</li><li>日记办理</li><li>留言办理</li><li>作风办理</li><li>体系办理</li><li>匡助信息</li></ul></div><divid="content"><divid="welcome"class="content"style="display:block;"><divalign="center"><p></p><p><strong>接待利用用户办理体系！</strong></p><p></p></div></div><divid="c0"class="content">团体材料</div><divid="c1"class="content">相册办理</div><divid="c2"class="content">日记办理</div><divid="c3"class="content">留言办理</div><divid="c4"class="content">作风办理</div><divid="c5"class="content">体系办理</div><divid="c6"class="content">匡助信息</div></div></div><divid="footer">copyrightforlalasxc</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
说实话，我并不是反对div+css，但物生一利，必生一弊，div+css的利处大家说了很多，我就说说狂热的追求div+css的几个弊端：

只看该作者 · 发表于 2015-1-18 07:03:59

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-1-25 17:21:27

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-2-3 12:15:03

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-2-8 23:43:41

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-26 14:44:51

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-8 15:51:49

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-22 20:51:46

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 学习下一个仿DZ Ucenter的复杂用户背景办理界面

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子