官网分析（英雄传奇）（如何设计网站前端）

一、总结

一句话总结：最开始以仿为主，仿的多了，自己就会了。分块，留白，简洁，图片找好，字体找好，背景图找好。

1、写前端代码的时候如何给各个板块命名？

大块之间：还是不能part1 part2的方式命名，因为这样命名的话页面板块发生变化的话就很尴尬

不同大块的小块之间：命名的话可以重复

每个大块可以指定一个id：这样找块中的所有元素都很好找，而且这样也不会和别的块发生冲突

2、网页如何进行页面设计？

a、内容一块一块的
b、用好背景图

3、如何获取别人网站里面好的动态效果？

直接去别人的网站里面弄就好了，拿到js代码即可，不必要一定要自己写

4、前端如何变成高手？

多做，有这么多的案例或者说模板，而且不是模板的源码我们也可以拿下来，那自然是想要什么效果都可以实现的，完全没有压力的。光会这些语法可不行，要经过大量的训练才行。

二、官网分析（英雄传奇）

一、截图

二、代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="gbk" />
  5 <meta name="robots" content="all" />
  6 <meta name="Copyright" content="TENCNET" />
  7 <meta name="author" content="Tencent-TGideas" />
  8 <meta name="Description" content="英雄传奇官方网站，以英雄杀玩法为基础强化制作的RPG元素策略卡牌游戏，以自由技能组合、英雄养成收集系统等各种特色玩法，引领策略卡牌游戏的新潮流。" />
  9 <meta name="Keywords" content="英雄传奇,QQ英雄传奇,QQ游戏英雄传奇,腾讯英雄传奇,英雄传奇官网,英雄杀英雄传奇,英雄传奇配方,英雄传奇熔炼配方,英雄传奇网页版,英雄杀,QQ游戏,腾讯游戏" />
 10 <title>英雄传奇官网 - QQ游戏 - 腾讯游戏</title>
 11 <link rel="stylesheet" type="text/css" href="http://game.gtimg.cn/images/yxcq/web201508/css/common.css" />
 12 <!-- 页面设计：cp | 页面制作：cp | 创建：2015-07-23 -->
 13 <style type="text/css">
 14 body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
 15 body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
 16 h1,h2,h3,h4,h5,h6{font-size:100%}
 17 em,b{font-style:normal}
 18 .yh{font-family:"\5fae\8f6f\96c5\9ed1",arial,"\5b8b\4f53"}
 19 a{text-decoration:none}
 20 a:hover{text-decoration:underline}
 21 img{border:0; vertical-align:top;}
 22 td,th,ul,ol{padding:0}
 23 ul,li{list-style:none; }
 24 .clearfix:after { display:block; visibility:hidden; height:0; content:'.'; clear:both; }
 25 .clearfix { zoom:1; }
 26 .hide{display:none; }
 27 
 28 .w_part1 { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/part1.jpg) no-repeat center; width:100%; height:855px;}
 29 .w_part2 { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/part2.jpg) no-repeat center; width:100%; height:270px;}
 30 .w_part3 { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/part3.jpg) no-repeat center; width:100%; height:606px;}
 31 .w_part4 { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/part4.jpg) no-repeat center; width:100%; height:128px;}
 32 .w_logo { width:1000px; height:180px; padding-top:15px; margin:0 auto;}
 33 .w_logo a { display:block; width:175px; height:175px; margin-left:112px;}
 34 .w_juzhong { margin:0 auto; width:1000px; height:auto; overflow:hidden;}
 35 
 36 .w_jz1 { padding-top:280px;}
 37 .w_video {width:198px; height:121px; background-image:url(http://game.gtimg.cn/images/yxcq/web201508/images/video.png); margin-top:55px; float:left; _display:inline; margin-left:500px; text-align:center; outline:none;}
 38 .w_video a { width:100%; height:100%; display:block;}
 39 .w_video img { margin-top:20px;}
 40 .w_base { background-image:url(http://game.gtimg.cn/images/yxcq/web201508/images/kaishi.png); width:286px; height:354px; float:right; text-indent:-9999px; _display:inline;}
 41 .w_a1 { width:100%; height:151px; display:block; margin-top:3px;}
 42 .w_a2 { width:100%; height:97px; display:block; margin-top:2px;}
 43 .w_guanggao { width:420px; height:190px; border:1px #979797 solid; float:left; margin-right:35px; margin-top:44px; _display:inline;}
 44 .w_ggleft { margin-left:62px;}
 45 .w_guanggao a{ display:block; width:100%; height:100%;}
 46 
 47 /*轮播*/
 48 .tpzsbox{position:relative; width:1000px; height:485px; margin:0 auto;}
 49 .tpzsbox a.gy-btn{width:60px;height:400px;text-decoration:none; position:absolute;z-index:20;}
 50 .tpzsbox a.gy-btn.prev{left:0; background:url(http://game.gtimg.cn/images/yxcq/web201508/images/prve.png) center center no-repeat;}
 51 .tpzsbox a.gy-btn.next{right:0;background:url(http://game.gtimg.cn/images/yxcq/web201508/images/next.png) center center no-repeat;}
 52 .btn-broadcast{display:block; width:160px; height:160px; background:url(http://game.gtimg.cn/images/yxcq/web201508/images/kpgy_06.png) no-repeat; position:absolute; left:420px; top:270px; outline:0; border:0;}
 53 .tpzsbox .xpzs li{position:absolute; overflow:hidden;}
 54 .tpzsbox .xpzs li img{display:block; width:100%; height:100%; _width:200px; _height:284px;}
 55 .tpzsbox .xpzs li img.hove{_width:100%; _height:100%;}
 56 .tpzsbox .xpzs li p,.tpzsbox .xpzs li a{width:98%; height:96%;position:absolute;  top:1%; left:1%;}
 57 .tpzsbox .xpzs li p{background:#000; filter:alpha(opacity=70); opacity:0.7; z-index:1; _display:none;}
 58 .tpzsbox .xpzs li a{display:block; z-index:3;}
 59 .tab_redian{height:9px; width:100%; text-align:center; line-height:9px;display: none;}
 60 .tab_redian a{display:inline-block; width:9px; height:9px; background:url(http://game.gtimg.cn/images/yxcq/web201508/images/kpgy_09.png) no-repeat; line-height:9px; margin-right:5px;}
 61 .tab_redian a.hove{background:url(http://game.gtimg.cn/images/yxcq/web201508/images/kpgy_10.png) no-repeat; width:33px;}
 62 .w_moreh { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/moreh.png) no-repeat center; width:289px; height:100px; margin:0 auto; padding-top:10px;}
 63 .w_morea { display:block; width:100%; height:100%;}
 64 .wrap { position: relative; color: #58554b; width: 680px; margin: 0 auto;background: transparent; padding-left:40px;min-width: 720px; float:left;_display:inline; padding-top:30px; color:#646464;}
 65 .wrap a { color:#646464;}
 66 .wrap span { padding:0 7px;}
 67 a, #footer a:hover { color: #58554b; text-decoration: none }
 68 .w_tx { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/tx.png) no-repeat center bottom; width:176px; height:50px;text-indent:-9999px; float:left;_display:inline; padding-top:40px;}
 69 .w_tiki { background:url(http://game.gtimg.cn/images/yxcq/web201508/images/tiki.png) no-repeat center bottom; width:50px; height:50px;text-indent:-9999px; display:block; display:block; padding-left:10px; float:left; _display:inline; padding-top:40px;}
 70 
 71 .popupbox{width: 800px;height: 450px;z-index: 10; border:5px solid #f3c95b; border:none; background-color: #000; display:none; outline:none;}
 72 .pop-close{position: absolute;top: -17px;right: -70px;display: block;width: 60px; height: 60px; background:url(http://game.gtimg.cn/images/yxcq/web201508/images/yxxl34.png) no-repeat; outline:none; border:0;}
 73 .pop-close:hover{text-decoration: none;}
 74 .scale{-webkit-animation: sa 1s;-moz-animation: sa 1s;-ms-animation: sa 1s;animation: sa 1s;}
 75 @-webkit-keyframes sa {
 76     0% {-webkit-transform:rotate(-720deg);}
 77     100% {-webkit-transform:rotate(0deg);}
 78 }
 79 @-moz-keyframes sa {
 80     0% {-moz-transform:rotate(-720deg);}
 81     100% {-moz-transform:rotate(0deg);}
 82 }
 83 @-ms-keyframes sa {
 84     0% {-ms-transform:rotate(-720deg);}
 85     100% {-ms-transform:rotate(0deg);}
 86 }
 87 @keyframes sa {
 88     0% {transform:rotate(-720deg);}
 89     100% {transform:rotate(0deg);}
 90 }
 91 </style>
 92 </head>
 93 <body>
 94 <div class="w_body">
 95     <div class="w_part1">
 96         <div class="w_logo"><a href="http://yxcq.qq.com/game/index.html" target="_blank"></a></div>
 97         <div class="w_juzhong w_jz1">
 98             <div class="w_video" style="background-image:url(http://ossweb-img.qq.com/upload/webplat/info/yxcq/20150826/32290134922470.png)">
 99 <a href="javascript:loadVideo('y0128ts47pc')" title="点击查看视频" ><img src="http://game.gtimg.cn/images/yxcq/web201508/images/videob.png" width="78" height="74" /></a></div>
100 <!--[if !IE]>|xGv00|6ae2cc4eba76053619a9bed2b29cd081<![endif]-->
101             <div class="w_base">
102                 <a class="w_a1" href="http://yxcq.qq.com/game/index.html" target="_blank" title="进入游戏">进入游戏</a>
103                 <a class="w_a2" href="javascript:alert('敬请期待');" title="微端下载">微端下载</a>
104                 <a class="w_a2" href="/index.shtml" title="进入官网">进入官网</a>
105             </div>
106         
107         </div>
108     </div>
109     <div class="w_part2">
110         <div class="w_juzhong">
111         <!--广告位-->
112             <div class="w_guanggao w_ggleft"><a href="" title="广告一" data-TGAD="14594,12488"></a></div>
113             <div class="w_guanggao"><a href="" title="广告二" data-TGAD="14594,12489"></a></div>
114         </div>
115         
116     </div>
117     <div class="w_part3">
118         <div class="main">
119             <div class="tpzsbox"  id="tpzsbox">
120                 <ul class="xpzs">
121                     <li>
122                         <img src="http://game.gtimg.cn/images/yxcq/web201508/images/lb1.png">
123                         <p></p>
124                     </li>
125                     <li>
126                         <img src="http://game.gtimg.cn/images/yxcq/web201508/images/lb2.png">
127                         <p></p>
128                     </li>
129                     <li class="hove">
130                         <img src="http://game.gtimg.cn/images/yxcq/web201508/images/lb3.png">
131                         <p></p>
132                     </li>
133                     <li>
134                         <img src="http://game.gtimg.cn/images/yxcq/web201508/images/lb4.png">
135                         <p></p>
136                     </li>
137                     <li>
138                         <img src="http://game.gtimg.cn/images/yxcq/web201508/images/lb5.png">
139                         <p></p>
140                     </li>
141                     
142                 </ul>
143                 <a href="javascript:void(0);" class="gy-btn next" title="下一张"></a>
144                 <a href="javascript:void(0);" class="gy-btn prev" title="上一张"></a>
145             </div>
146             <div id="tab_redian" class="tab_redian"><p class="small"><a href="javascript:void(0);"><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a><a href="javascript:void(0);" class="hove"></a><a href="javascript:void(0);"></a></p>
147             </div>
148         </div>
149         <div class="w_moreh"><a href="http://yxcq.qq.com/webplat/info/news_version3/6960/17087/17089/m12508/201509/381227.shtml" target="_blank" title="更多英雄" class="w_morea"></a></div>
150     </div>
151     <script src="http://game.gtimg.cn/images/yxcq/web201508/js/footer.js" charset="UTF-8"></script>
152 </div>
153             
154     <!-- 视频弹窗-->
155 <div id="Video" class="popupbox" style="display:none">
156     <div id="VideoContent">加载中...</div>
157     <a href="javascript:hidDialogs()" class="pop-close" title="关闭">&times;</a>
158 </div>
159 <script type="text/javascript" src="http://ossweb-img.qq.com/images/js/title.js"></script>
160 <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
161 <script type="text/javascript" src="http://ossweb-img.qq.com/images/js/milo/milo.js"></script>
162 <script src="http://ossweb-img.qq.com/images/js/comm/tgadshow.min.js"></script>
163 <script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="UTF-8"></script>
164 <script type="text/javascript">
165 
166 /*首页图片轮播开始*/    
167 $(function(){
168     var oBut = document.getElementById('tpzsbox');
169     var oTop = document.getElementById('tab_redian');
170     var oTli = oTop.getElementsByTagName('a');
171     var aLi = oBut.getElementsByTagName('li');
172     var aA = oBut.getElementsByTagName('a');
173     var oSmall = getClass(oTop, 'small')[0];
174     var i = iNow = 0;
175     var timer = null;
176     var aSort = [];
177     var aPosition = [
178                     {width:325,height:472,top:10,left:340,zIndex:10},
179                     {width:200,height:284,top:102,left:76,zIndex:8},
180                     {width:1,height:1,top:350,left:470,zIndex:6},
181                     {width:1,height:1,top:350,left:470,zIndex:6},
182                     {width:200,height:284,top:102,left:733,zIndex:8}
183         ]
184     for(i=0;i<oTli.length;i++){
185         oTli[i].index = i;
186         myAddEvent(oTli[i], 'click', function(){
187             iNow = this.index;
188             tab();
189         })
190     }
191     for(i=0;i<aLi.length;i++){
192         aLi[i].index = i;
193         aLi[i].style.width = aPosition[i].width +'px';
194         aLi[i].style.height = aPosition[i].height +'px';
195         aLi[i].style.top = aPosition[i].top +'px';
196         aLi[i].style.left = aPosition[i].left +'px';
197         aLi[i].style.zIndex = aPosition[i].zIndex;
198         aSort[i] = aPosition[i];
199         myAddEvent(aLi[i], 'mouseover', function(){
200             var oDiv = this.getElementsByTagName('p')[0];
201             startMove(oDiv, {opacity:0});
202         });
203         myAddEvent(aLi[i], 'mouseout', function(){
204             if(this.style.width != '325px'){
205                 var oDiv = this.getElementsByTagName('p')[0];
206                 startMove(oDiv, {opacity:75});
207             }
208         });
209         myAddEvent(aLi[i], 'click', function(){
210             var iSort = this.index;
211             iNow = this.index;
212             Sort();
213             for(i=0;i<iSort;i++){
214             aSort.unshift(aSort.pop());
215             }
216             sMove();
217             tab();
218         });
219     }
220     myAddEvent(aA[0], 'click', function(){
221         aSort.unshift(aSort.pop());
222         sMove();
223         setInter();
224     });
225     myAddEvent(aA[1], 'click', function(){
226         aSort.push(aSort.shift());
227         sMove();
228         iNow--;
229         if(iNow<0)iNow = aLi.length - 1;
230         tab();
231     });
232     oSmall.onmouseover = oBut.onmouseover = function(){
233         clearInterval(timer);
234     };
235     oSmall.onmouseout = oBut.onmouseout = function(){
236         clearInterval(timer);
237         timer = setInterval(setInter,5000);
238     };
239     timer = setInterval(setInter,5000);
240     function setInter(){
241         iNow++;
242         if(iNow>aLi.length-1)iNow = 0;
243         tab();
244     }
245     function tab(){
246         for(i=0;i<oTli.length;i++)oTli[i].className = '',startMove(oTli[i]);
247         oTli[iNow].className = 'hove';
248         startMove(oTli[iNow])
249         var iSort = iNow;
250         Sort();
251         for(i=0;i<iSort;i++){
252             aSort.unshift(aSort.pop());
253         }
254         sMove();
255     }
256     function Sort(){
257         for(i=0;i<aLi.length;i++){
258             aSort[i] = aPosition[i];
259         }
260     }
261     function sMove(){
262         for(i=0;i<aLi.length;i++){
263             var oDiv = aLi[i].getElementsByTagName('p')[0];
264             startMove(oDiv, {opacity:75});
265             startMove(aLi[i], aSort[i], function(){one();});
266             aLi[i].className = '';
267         }
268         aLi[iNow].className = 'hove';
269     }
270     function one(){
271         for(i=0;i<aLi.length;i++){
272             if(aLi[i].style.width == '325px'){
273                 var oDiv = aLi[i].getElementsByTagName('p')[0];
274                 startMove(oDiv, {opacity:0});
275             }
276         }
277     }
278     one();
279 });
280 function getClass(oParent, sClass){
281     var aElem = document.getElementsByTagName('*');
282     var aClass = [];
283     var i = 0;
284     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
285     return aClass;
286 }
287 function myAddEvent(obj, sEvent, fn){
288     if(obj.attachEvent){
289         obj.attachEvent('on' + sEvent, function(){
290             fn.call(obj);
291         });
292     }else{
293         obj.addEventListener(sEvent, fn, false);
294     }
295 }
296 function startMove(obj, json, fnEnd){
297     if(obj.timer)clearInterval(obj.timer);
298     obj.timer = setInterval(function (){
299         doMove(obj, json, fnEnd);
300     }, 30);
301 }
302 function getStyle(obj, attr){
303     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
304 }
305 function doMove(obj, json, fnEnd){
306     var iCur = 0;
307     var attr = '';
308     var bStop = true;
309     for(attr in json){
310         attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
311         if(isNaN(iCur))iCur = 0;
312         if(navigator.userAgent.indexOf("MSIE 8.0") > 0){
313             var iSpeed = (json[attr]-iCur) / 3;
314         }else{
315             var iSpeed = (json[attr]-iCur) / 5;
316         }
317         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
318         if(parseInt(json[attr])!=iCur)bStop = false;
319         if(attr=='opacity'){
320             obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
321             obj.style.opacity = (iCur + iSpeed) / 100;
322         }else{
323             attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
324         }
325     }
326     if(bStop){
327         clearInterval(obj.timer);
328         obj.timer = null;       
329         if(fnEnd)fnEnd();
330     }
331 }
332 /*图片轮播结束*/
333 
334 var showDialogs=function(o){
335         need("biz.dialog",function(Dialog){
336             Dialog.show({
337             id:o,
338             bgcolor:"#000",
339             opacity:60
340             });
341         });
342         return;
343     }
344     var hidDialogs=function(){
345         var str = g("VideoContent").innerHTML;
346         if(str.indexOf("加载中...")==-1){g("VideoContent").innerHTML = "加载中..."};
347         need("biz.dialog",function(Dialog){Dialog.hide();});return;
348     }
349     var videoPlayer=function(vid){
350         var video = new tvp.VideoInfo();
351         video.setVid(vid);
352         var player = new tvp.Player(800,450);
353         player.setCurVideo(video);
354         player.addParam("adplay","0");
355         player.addParam("wmode","opaque");
356         player.addParam("flashskin","http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");
357         player.write("VideoContent");
358     }
359     var loadVideo = function(vid){
360         showDialogs("Video");
361         videoPlayer(vid);
362     }
363     $(function(){
364         $('.pop-close').hover(function(){
365             $(this).toggleClass('scale');
366         },function(){
367             $(this).toggleClass('scale');
368         }).click(function(){
369             hidDialogs();       
370         });
371     });
372 </script>
373 <script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
374 <script>if(typeof(pgvMain) == 'function') pgvMain();</script>
375 </body>
376 </html>
377 <!--[if !IE]>|xGv00|22f5957a8686ba9de69fdd6af2e0895c<![endif]-->