————————
恩，看到了。
你查看它页面的源文件能看到它在前面写的脚本，比如下面几个。
function setSkin(n)
{var css = $("cssChange")var cssurl = "/cssn/"cssurl +=cssList[n]css.href=cssurlMiniSite.Cookie.set("TencentSkin",n)}
function formatSkin()
{var p = $("SkinList").getElementsByTagName("li")var s = $("sar")for(i=0i<p.lengthi++){p[i].num = ip[i].onclick = function(){setSkin(this.num)}}s.onclick = function() { openSkin("sar","SkinList",140,56,2,0)}}
function _openSkin(o1,o2,max,min,speed,n)
{ return openSkin(o1,o2,max,min,speed,n)}
function _closeSkin(o1,o2,max,min,speed,n)
{ return closeSkin(o1,o2,max,min,speed,n)}
就是通过你点击更换皮肤的按钮，触发脚本，它们动态的更换引用的CSS路径。
这里发不下，好多啊。这样吧，剩下的我把它发到我空间去，可以吧？这个是现成的，如果有其他的要求要改，可以hi我！！楼上那位朋友的没有弄完，还差一点后缀！<META http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<STYLE>
body{margin:0padding:0 0 12px 0background:#ffffont-size:13pxline-height:22px}
div,p,li{font-family:Verdana,宋体font-size:13px}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0padding:0}
input,select{font-size:12pxline-height:16px}
img{border:0}
ul,li{list-style-type:none}
li{font-size:13px}
.tc{text-align:center}.tl{text-align:left}.tr{text-align:right}
.dis{display:block}.undis{display:none}
.fl{float:left}.fr{float:right}.cl{clear:both}
.fh{height:22px}.fb{font-weight:bold}.fnb{font-weight:200margin-left:-1px}
.fc30{color:#303030font-family:"宋体"}.fchot{color:#ff0700}
.f11{font-size:12pxfont-family:tahoma}
/*今日话题标题*/
h1{font-size:16pxfont-weight:200font-family:黑体}
h1 a{color:#303030}
/*普通标题*/
h3{font-size:14px}
/*页卡*/
h4{font-weight:200font-size:13pxcursor:pointer}
h4 a{width:100%heihgt:100%display:block}
a{color:#00007Ftext-decoration:none}
a:hover{color:#bd0a01text-decoration:underline}
a.lcblue{color:#0F479C}
a.lchot{color:#bd0a01}
.lchot{color:#bd0a01}
/*迷你导航*/
#miniNav{height:22pxborder-bottom:1px solid #e6e6e6background:#f8f8f8color:#a1a0a0text-
align:centerline-height:14px}
#miniNav img{margin-bottom:4pxborder:0}
#miniNav div{width:950pxmargin:0 autofont-size:12pxpadding-top:4pxfont-family:宋体}
#miniNav span{display:bolckfloat:right}
#miniNav a{color:#a1a0a0margin:0 3pxfont-size:12pxtext-decoration:nonepadding:1px 3px
1px 3pxdisplay:bolckfloat:right}
#miniNav a:hover{color:#fffbackground:#929292}
#miniNav .qq{font-family:Verdanamargin-top:-2px}
/*顶部910导航*/
#NavCenter{text-align:center}
#TopNav{width:910pxmargin:0 autopadding:6px 0 4px 0height:39pxline-height:17px}
#Logo{width:128pxfloat:lefttext-align:center}
#TextNav{float:leftwidth:780pxfont-size:13px}
#TextNav span{display:blockfloat:left}
#TextNav a{padding:2px 6px 0 7pxfont-size:13pxdisplay:blockfloat:left}
#TextNav a.lcnew{background:url(http://img1.qq.com/news/pics/9468/9468357.gif) no-repeat
31px -37px}
#TextNav a:hover{color:#ffftext-decoration:none}
#TextNav a.lcnew:hover{color:#fffbackground-image:url
(http://img1.qq.com/news/pics/9468/9468357.gif)background-position:31px -37pxbackground-
repeat:no-repeat}
/*soso*/
#Soso{width:912pxheight:78pxmargin:0 auto}
#Soso_Left{padding:5px 0 0 25pxwidth:225pxmargin:0 10px 0 0float:left}
#Wealth{line-height:18pxheight:54pxpadding-bottom:7pxmargin-top:-9pxmargin-left:-
5pxcursor:pointerwidth:170px}
#Wealth *{line-height:18px}
#Wealth h6{font-size:13pxpadding-top:20px}
#Wealth span.img{float:leftdisplay:blockpadding-top:8px}
#Wealth p{float:leftmargin:0padding:0}
#Wealth div{font-size:12pxfont-family:tahoma,宋体width:100px}
/*皮肤列表*/
#Skin div {float:left}
#SkinList {width:56pxheight:11pxoverflow:hiddendisplay:block}
#Skin li{float:leftwidth:14pxheight:11pxcursor:pointer}
#def div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left top}
#s1 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -11px}
#s2 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -22px}
#s3 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -33px}
#s4 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -44px}
#s5 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -55px}
#s6 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -66px}
#s7 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -77px}
#s8 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -88px}
#s9 div{background:url(http://img1.qq.com/news/pics/9468/9468392.gif) no-repeat left -99px}
#sar{cursor:pointer}
#sar div{background:url(http://img1.qq.com/news/pics/9468/9468357.gif) no-repeat -20px -
1px}
#sar div.s{background:url(http://img1.qq.com/news/pics/9468/9468357.gif) no-repeat -10px -
1px}
/*soso输入框区域*/
#SosoArea{width:470pxpadding:9px 0 0 0float:left}
#sosoFod{padding-left:14pxheight:25px}
#sosoFod h3{float:leftwidth:40pxheight:26pxfont-size:12pxfont-weight:200padding-
left:13pxcursor:pointer}
#sosoFod #sosoqzone {width:50pxpadding-left:3px}
#sosoFod #sosoqzone div{margin-top:-1pxfont-size:12px}
#SosoArea input.w{width:392pxheight:22pxborder:0padding:4px 3px 0 3pxmargin-
right:6pxline-height:18pxfont-size:14px}
#SosoArea input.bot{border:0width:51pxheight:27pxpadding-top:2px}
#SosoArea table{line-height:17px}
#SosoArea table a{color:#fff}
#SosoAd{float:left}
#sosoLogo {position:absolutemargin:26px 0 0 -55px}
.more{position:absolutebackground:#fffmargin:-2px 0 0 -5px!importantmargin:16px 0 0 -
46pxz-index:10000border:1px solid #B2D0EA}
.more a{width:55pxdisplay:blockpadding-left:5px}
.more ul{list-style-type:nonemargin:0padding:0}
.more li{line-height:24pxlist-style-type:nonemargin:0padding:0text-align:left}
.more li a,.more li a:visited{color:#3B5995text-decoration:nonefont-size:12px}
.more li a:hover{background:#D6E9F8color:#3B5995text-decoration:nonefont-size:12px}
/*内容部分通用class*/
.cArea{width:910pxmargin:0 autopadding:10px 0 0 0clear:bothz-index:1}
.cArea1{width:910pxmargin:0 autopadding:7px 0 0 0clear:both}
.txArea{width:714pxfloat:left}
.resArea{width:296pxfloat:left}
.proArea{width:409pxfloat:right}
.adArea{width:186pxfloat:right}
.adMArea{clear:bothpadding-top:10px}
.imgArea{background:url(http://img1.qq.com/news/pics/9468/9468391.gif) repeat-x
bottomheight:83px}
.imgLArea{width:105pxheight:70pxpadding:0 12px 0 0float:left}
.imgRArea,.imgRArea1{float:left}
.imgRArea *{font-size:14pxline-height:24px}
.imgLAreapic {width:105pxheight:80pxpadding:0 12px 0 0float:lefttext-align:center}
.imgLAreapic img{width:105pxheight:55pxmargin-bottom:1px}
.imgLAreapic a{font-size:13px}
.height{height:122px}
.res_b,.pro_b{height:2px}
.textArea{clear:bothpadding:5px 0 0 0}
/*产品导航区域*/
#proArea *{font-size:12pxline-height:16px}
#proArea{width:286pxheight:132pxoverflow:hiddenpadding:4px 0 0 10pxmargin-bottom:10px}
#proArea div{clear:bothheight:22px}
#proArea span{display:blockfloat:leftpadding:3px 6px 0 0font-weight:bold}
#proArea a{text-decoration:nonepadding:2px 3px 0 3pxdisplay:block
float:leftheight:17px}
#proArea a.m{text-decoration:underlinemargin-left:2px}
#proArea a.m:hover{color:#ffftext-decoration:underline}
#proArea a.qq{text-decoration:nonemargin-top:-1px}
#proArea a.lchot{color:#bd0a01}
#proAd{padding-bottom:2pxheight:114pxwidth:409pxoverflow:hidden}
#proAdFlash {position:absolutewidth:409pxz-index:500}
#proArea_banner{height:20pxmargin-bottom:10pxpadding-left:16pxline-height:20pxfont-
size:12pxcolor:#3d464b}
#proArea_banner .tahoma{font-family:Tahoma}
#proArea_search{width:409pxheight:52pxbackground:url(http://mat1.qq.com/www/images/xunren
-2.gif)margin:10px autopadding-top:8px}
#proArea_search ul,#proArea_search li{margin:0padding:0list-style:noneclear:both}
#proArea_search ul{margin-left:20px}
#proArea_search .links{color:#0330BBfont-size:12pxfont-weight:boldfont-family:宋体}
#proArea_search .links a{color:#0330BBfont-size:14pxtext-decoration:underline}
#proArea_search .links a:hover{color:#f00font-size:14px}
#proArea_searchnub a{font-family:Tahomafont-size:16pxcolor:#BD0A01font-weight:bold
margin:0 3px}
#pro1{width:584px}
#pro1 td{padding-right:12px}
/*今日导航*/
#toDay{width:389pxheight:133pxoverflow:hiddenpadding:10pxmargin-bottom:10px}
#toDay div.t{float:leftwidth:73pxheight:25pxtext-align:centerpadding:2px 12px 0
63pxline-height:25pxfont-weight:700font-size:12px}
#toDay div.t a:hover{text-decoration:none}
#toDay h1{float:leftline-height:26pxpadding-top:2pxfont-family:宋体font-size:16pxfont
-weight:boldheight:36px}
#toDay h1 a:hover{color:#bd0a01}
#toDay h1 a.lchot{color:#bd0a01}
#toDay p{color:#bab9b9clear:bothfont-family:宋体font-size:14pxline-height:24px}
#toDay p a.lchot:visited{color:#bd0a01}
/*左边频道栏目*/
#NewsInfo .imgRArea li,#NewsInfo .imgRArea1 li,#SportsInfo .imgRArea li,#financeInfo
.imgRArea li,#techInfo .imgRArea li,#carInfo .imgRArea li,#eduInfo li{padding:2px 0 0
12pxbackground:url(http://img1.qq.com/news/pics/9468/9468357.gif) no-repeat -26px
10pxfont-family:宋体}
/*内容链接颜色控制*/
#News h4 a:hover,#Sports h4 a:hover,#finance h4 a:hover,#tech h4 a:hover,#car h4
a:hover,#edu h4 a:hover,#blog h4 a:hover,#ent h4 a:hover,#game h4 a:hover,#book h4
a:hover,#lady h4 a:hover,#comic h4 a:hover{color:#bd0a01}
#NewsInfo h3 a:hover{color:#bd0a01}
#NewsInfo a.lchot,#SportsInfo a.lchot,#financeInfo a.lchot,#techInfo a.lchot,#carInfo
a.lchot,#eduInfo a.lchot{color:#bd0a01}
#NewsInfo a.lchot:visited,#SportsInfo a.lchot:visited,#financeInfo a.lchot:visited,#techInfo
a.lchot:visited,#carInfo a.lchot:visited,#eduInfo a.lchot:visited{color:#bd0a01}
#blogInfo a.lchot,#entInfo a.lchot,#gameInfo a.lchot,#comicInfo a.lchot,#bookInfo
a.lchot,#ladyInfo a.lchot,#comicInfo a.lchot{color:#bd0a01}
#blogInfo a.lchot:visited,#entInfo a.lchot:visited,#gameInfo a.lchot:visited,#comicInfo
a.lchot:visited,#bookInfo a.lchot:visited,#ladyInfo a.lchot:visited,#comicInfo
a.lchot:visited{color:#bd0a01}
/*新闻*/
#News h4{float:leftheight:20pxline-height:20pxtext-
align:centerwidth:73pxoverflow:hiddenmargin-right:1pxpadding-top:3px}
#News h4.s,#News h4.s1{font-weight:700border-right:0width:73pxpadding-bottom:4px}
#News span h4 {width:82pxpadding-left:4px}
#News span h4.s {width:86px}
#News span h4.s1 {width:102px}
#News span h4.s0 {width:102px}
#News span h4 a{display:inline}
#NewsInfo a.black{color:#000}
#NewsInfo a.black:hover{color:#000}
#NewsInfo a.blue{color:#0330bb}
#NewsInfo a.blue:hover{color:#0330bb}
.dotline{padding:0margin:4px 0 8px 4pxfont:0line-
height:0width:278pxheight:1pxbackground:url
(http://img1.qq.com/news/pics/9468/9468391.gif) top repeat-xclear:both}
/*左侧列表内容12链接文字14*/
#NewsInfo *,#SportsInfo .textArea *,#financeInfo .textArea *,#techInfo .textArea *,#carInfo
.textArea *,#eduInfo .textArea *{font-size:12pxline-height:23px}
#NewsInfo a,#tailorInfo a,#SportsInfo .textArea a,#financeInfo .textArea a,#techInfo
.textArea a,#carInfo .textArea a,#eduInfo .textArea a {font-size:14px}
/*地方新闻定制页卡*/
#tailor div{float:leftmargin-left:5pxwidth:autocursor:pointer}
#tailor div.i{padding-top:3pxwidth:17pxheight:12px}
#tailor div.io{padding-top:3pxwidth:17pxheight:12px}
#tailorInfo .imgArea{background:url(http://img1.qq.com/news/pics/9468/9468391.gif) repeat-x
bottomheight:84px}
#tailorInfo .textArea{font-family:"宋体"font-size:12pxline-height:24pxmargin-top:3px}
#tailorInfo .textArea a{font-size:14px}
#tailorInfo .imgLAreapic {width:105pxheight:80pxpadding:0 6px 0 6pxfloat:lefttext-
align:center}
#tailorInfo .imgLAreapic img{width:105pxheight:55pxmargin-bottom:5px}
#tailorInfo .imgLAreapic a{font-size:13pxline-height:15px}
#tailorInfo {padding-top:3px}
#tailorInfo .point{background:url(http://img1.qq.com/news/pics/9468/9468391.gif) repeat-x
topclear:bothmargin-top:5pxpadding-top:8px}
#tailorInfo .imgLArea {padding-top:4px}
#tailorInfo .imgLArea {display:none}
#tailorInfo .imgRArea a.c{color:#BA0F07}
#tailorInfo .imgRArea1 {width:276pxtext-align:right}
#tailorInfo .imgRArea1 li{display:inlinebackground:url
(http://img1.qq.com/news/pics/9468/9468357.gif) no-repeat -26px 7px}
/*体育,财经,科技,汽车*/
#Sports h4,#finance h4,#tech h4,#car h4{float:leftheight:20pxline-
height:20pxwidth:73pxtext-align:centeroverflow:hiddenmargin-right:1pxpadding-top:3px}
#Sports h4.s,#finance h4.s,#tech h4.s,#car h4.s{height:20pxline-height:20pxfont-
weight:700width:73pxpadding:3px 0 4px 0}
#Sports span,#finance span,#tech span,#car span
{position:absoluteoverflow:visibledisplay:block}
#News h4 a:hover,#Sports h4 a:hover,#finance h4 a:hover,#tech h4 a:hover,#car h4 a:hover
{color:#bd0a01}
#News,#Sports,#finance,#tech,#car{height:27px}
#NewsInfo,#SportsInfo,#financeInfo,#techInfo,#carInfo,#eduInfo
{clear:bothoverflow:hiddenpadding:10px 6px 10px 2pxcolor:#BAB9B9}
#NewsInfo .imgLAreapic,#SportsInfo .imgLAreapic,#financeInfo .imgLAreapic,#techInfo
.imgLAreapic,#carInfo .imgLAreapic,#eduInfo .imgLAreapic{width:105pxheight:80pxpadding:0
6px 0 6pxfloat:lefttext-align:center}
#SportsInfo .textArea,#financeInfo .textArea,#techInfo .textArea{padding:10px 0}
#carInfo .textArea{padding:10px 0}
#eduInfo .textArea{padding:10px 0}
#NewsInfo{height:444pxpadding-top:10px}
#SportsInfo{height:209px}
#financeInfo{height:247pxpadding-bottom:0}
#techInfo {height:208px}
#carInfo{height:208px}
#financeInfo form{height:22pxmargin:219px -10px 0 -2pxpadding:4px 6px 3px
6pxcolor:#000width:282pxposition:absolute}
#financeInfo form input.w{width:53pxpadding:1pxline-height:14px}
#financeInfo form input.i{width:39pxheight:18pxpadding-top:1pxcursor:pointer}
#map{position:absolutemargin:0 0 0 -2pxborder-bottom:1px solid #8DC0E8height:280pxz-
index:999}
/*中间一栏*/
#blog h4,#ent h4,#game h4,#comic h4,#book h4,#edu h4,#lady h4{float:leftwidth:73pxtext-
align:centerheight:20pxline-height:20pxmargin-right:1pxpadding-top:3px}
#blog h4.s,#ent h4.s,#game h4.s,#book h4.s,#lady h4.s{font-weight:700width:73pxpadding:3px
0 4px 0height:20pxline-height:20px}
#blog,#ent,#game,#book,#lady{height:27px}
#comic,#edu{height:25px}
#blog {width:409px}
#blog div{float:rightpadding:1px 13px 6px 0height:17pxwidth:172pxtext-align:right}
#entInfo,#gameInfo,#comicInfo,#bookInfo,#ladyInfo{width:387pxpadding:10pxcolor:#BAB9B9}
静态的网页其实就是2部分组成，一个我们的底层结构html，另外一个就是负责修饰结构的css，其实书写静态网页就像是我们小时候在过家家一个样子的，你首先得把你需要的过家家的家庭成员找齐了，而我们这个找家庭成员就像是我们书写页面网页的时候，那个最底层的结构html，你在玩过家家的时候脑海里肯定已经有了一个简单的家庭成员和故事情节了。而我们在写页面的时候是有剧本的，这个剧本就是你看到的设计图，或者是你看到的某个网页，个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能，把整个页面完整的截取下来，QQ浏览器，360浏览器都可以做到的，这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。
首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看，其次利用浏览器的F12查看功能，这样子做你就会不小心的看到了原代码，你的思维跟原来的编程人员思路有些时候是不一样的，这样就限制了你的思路，最后你翻找的过程真的是很需要时间的，同时还会影响你的思路。
按照设计好的剧本然后我就可以对应这找人员了，比如说爸爸、妈妈、孩子、锅、饭碗、筷子，菜等等，我们写页面也是的。比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同的类型的页面，布局上比这边要复杂一些，具体的可以看下面的图。
这个是我们看到一个图的时候，大致在脑海当中对页面进行一个简单的扫描，进行初步认识看看页面当中都有哪些，如果把页面当成一张纸，那么在一点点撕碎的过程中要怎么样从大到小一点点的分割，当我们有了初步的认识之后，就可以把这些东西转化成我们的html结构，所有画的这些不同颜色的框框我们在写的时候用的都是div。
从上往下，从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input，文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积，不是把整个页面都堆积出来，而是一个模块一个模块的来，比如头部的、中间左边的、尾部的。
接下来我们需要做的就是把写好的结构进行美化，不然你就会看到如下图一样的场面。
难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮，妈妈要穿上高跟鞋呀，需要涂抹口红呀，爷爷是需要有胡子的而且还是要白色的才会更像一些，最好是要弯腰驼背的。
而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心，涉及到的东西很多，同时也会伴随着很多的问题，毕竟想要某个人形态外貌上和剧本人物一致，不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄，比如：
百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float：right；红色盒子里面的文字的字号大小，字体，字体颜色，水平间距，垂直间距这些都需要一点点的写，如果在写的过程中遇见了问题，我们可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，css看右边，看看css属性有没有显示，有没有划掉，有没有黄色报错等等。
这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么，就好像你穿衣服的时候肯定是拿上衣，而不是拿裤子穿在上面，如果有人这么做你会告诉他这样是错的，这个裤子要穿在下面一样。
最后就是总结和举一反三了，一个页面写完之后，不是就是完了，更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样子解决，更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现，做到举一反三。
这些总结可以记录到网上一些博客上，比如博客园、CSDN、51CTO。这样既可以作为自己的一个整理也可以方便了其他人同样查看。
