CSS教程之仿腾讯QQ首页无革新换肤切换款式实例

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

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

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

x

任何语言都有它的优越性，Div作为网页布局的标签，它可以很轻快的达到想要的效果，并且可以节约代码，我希望以后学这个标签的同学，要掌握它的每一个知识点，充分利用这个标签。

<!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><styletype="text/CSS">body{font-size:12px}*{margin:0;padding:0;}ul,li{list-style:none}.login_skin{height:25px;background:#E8E8E8;border:1pxsolid#e9e8e5;width:215px;color:#333;line-height:25px;margin:25px0px25px10px;padding-left:15px;}.login_skinli{float:left}.login_skin.bor{border-right:1pxsolid#e9e8e5;padding-right:7px;margin-right:10px}.login_skinlispan{margin:7px4px0px0px;cursor:pointer;display:block}.login_skinlispanem{display:block;height:9px;width:10px;overflow:hidden;text-indent:-9999px}.login_skina{color:#333;text-decoration:none;margin-right:5px}.login_skinli.on{border:1pxsolid#333;cursor:default}h2{font-size:12px;padding:8px0px10px15px}#sk_blue{background:#2086b3;}#sk_or{background:#e64c13}#sk_byu{background:#b7a37a;}#warpper{overflow:hidden;height:1%}.contentl{margin-right:-244px;float:left;width:100%}.contentr{width:230px;float:right;}.main{margin-right:254px;margin-left:10px;height:300px}.footer{height:30px;margin:30px10px0px10px}.blue.content{background:#2086b3;color:#fff;}.blue.bb{border:2pxsolid#2086b3;}.blue.bbh2{color:#2086b3}.blue.footer{background:#2086b3;}.or.content{background:#e64c13}.or.bb{border:2pxsolid#e64c13;}.or.bbh2{color:#e64c13}.or.footer{background:#e64c13;}.byu.content{background:#b7a37a;color:#f00}.byu.bb{border:2pxsolid#b7a37a;}.byu.bbh2{color:#b7a37a}.byu.footer{background:#b7a37a;}</style><scripttype="text/javascript">functionsetOnloadEvent(func){varoldonload=window.onload;if(typeofwindow.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}}}//---设置cookiefunctionsetCookie(name,value,days){if(days){vardate=newDate();date.setTime(date.getTime()+(days*24*60*60*1000));varexpires=";expires="+date.toGMTString();}elseexpires="";document.cookie=name+"="+value+expires+";path=/";}//---猎取cookiefunctiongetCookie(name){varnameEQ=name+"=";varca=document.cookie.split(;);for(vari=0;i<ca.length;i++){varc=ca;while(c.charAt(0)==)c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)returnc.substring(nameEQ.length,c.length);}returnnull;}functionskin(){if(!document.getElementsByTagName)returnfalse;if(!document.getElementById("skin"))returnfalse;varskin_id="blue";if(getCookie("id")!=null){skin_id=getCookie("id");}varspan_id=skin_id+"_sp";varspan_on=document.getElementById(span_id);document.body.className=skin_id;span_on.className="on";varskinType=document.getElementById("skin");varskin_nub=skinType.getElementsByTagName("em");for(vari=0;i<skin_nub.length;i++){skin_nub.onclick=function(){varem_id=this.getAttribute("id");varskin_id=em_id.split("_")[1];varspanList=document.getElementsByTagName("span");for(varj=0;j<spanList.length;j++){spanList[j].className="";if(spanList[j].getAttribute("id").indexOf(skin_id)!=-1){spanList[j].className="on";}}document.body.className=skin_id;setCookie("id",skin_id,1);}}}setOnloadEvent(skin);</script></head><body><divid="header"><divclass="login_skin"id="skin"><ul><li>选择页面作风：</li><li><spanid="blue_sp"><emid="sk_blue">ee</em></span></li><li><spanid="or_sp"><emid="sk_or">ere</em></span></li><li><spanid="byu_sp"><emid="sk_byu">ere</em></span></li></ul></div></div><divid="warpper"><divclass="contentl"><divclass="mainbb"><h2>换肤测试</h2></div></div><divclass="contentrbb"><h2>换肤测试</h2></div></div><divclass="footer"></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
我在这里借用了新浪博客的盒子来说明下，大家可能发现了，其实边框border往往就只有1px的宽度，谁叫它是边框呢。

只看该作者 · 发表于 2015-1-18 07:04:51

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

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

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

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

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

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

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

只看该作者 · 发表于 2015-2-26 14:47:52

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

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

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-16 05:38:08

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-22 20:54:40

可以使用 CSS 检查工具进行设计。

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

[DIV+CSS] CSS教程之仿腾讯QQ首页无革新换肤切换款式实例

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

相关帖子

浏览过的版块