首页 > 代码库 > 人生中第一次做的网页,留个纪念

人生中第一次做的网页,留个纪念

技术分享
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 * {
  8     margin: 0px;
  9     padding: 0px;}
 10 #shang
 11 {
 12     min-width:1000px;
 13     width:1400px;
 14     height:135px;
 15     position:relative;
 16     }    
 17 #di
 18 {
 19     height:150px;
 20     min-width:1000px;
 21     background-color:#1a252b;
 22     /*border:1px solid #F00;*/
 23     position:relative;
 24     background-repeat:no-repeat;}    
 25 #bei
 26  {
 27     background-image:url(%E8%83%8C%E6%99%AF4.png);
 28     /*background-attachment: fixed;*/
 29     background-size: 100%;
 30     height:1800px;
 31     min-width:1000px;
 32     background-repeat:no-repeat;}
 33 .logo1
 34 {
 35     width:350px;
 36     height:60px;
 37     position:relative;
 38     /*border:1px solid #F00;*/
 39     margin-left:15%;
 40     margin-top:30px;}
 41 .xinde
 42 {
 43     width:800px;
 44     height:320px;
 45     position:relative;
 46     border-radius:20px;
 47     /*border:1px solid #F00;*/
 48     margin-left:20%;
 49     margin-top:30px;
 50     overflow:hidden;}    
 51 #datu
 52 {
 53     width:800px;
 54     height:449px;
 55     position:relative;
 56     /*border:1px solid #0C3;*/
 57     margin:30px auto;
 58     overflow:hidden;}/*超出部分隐藏*/
 59 #ta
 60 {
 61     margin-left:0px;
 62     transition:0.7s;}
 63 .lr
 64 {
 65     position:absolute;
 66     top:130px;
 67     width:32px;
 68     height:32px;
 69     z-index:99;}
 70 #left
 71 {
 72     left:10px;
 73     }
 74 #right
 75 {
 76     right:10px;
 77     }
 78 #logo
 79 {
 80     background-image:url(logo2.png);
 81     background-repeat: no-repeat;
 82     background-size: contain;
 83     /*border:1px solid #3F3;*/
 84     position:relative;
 85     top:30px;
 86     margin-left:100px;
 87     height: 60px;
 88     background-position: center center;
 89     width: 180px;
 90     z-index: 99;}
 91 #you
 92 {
 93     width:850px;
 94     height:60px;
 95     /*border:1px solid #3F3;*/
 96     position:absolute;
 97     float:right;
 98     right:40px;
 99     top:30px;
100     line-height: 60px;}    
101 #youzuo {
102     width: 650px;
103     height: 60px;
104     line-height: 60px;
105     position: absolute;    }
106 li {
107     float: left;
108     color: #FFF;
109     margin-left: 20px;
110     list-style: none;
111     cursor: pointer;/*变手指*/}    
112 a {
113     color: #FFF;
114     cursor: pointer;
115     text-decoration: none;}
116 .xiao {
117     background-position: left;
118     background-repeat: no-repeat;
119     background-size: 20px;
120 }
121 #youyou {
122     width: 220px;
123     height: 60px;
124     position: absolute;
125     top: 0px;
126     right: 0px;}
127 .anniu {
128     width: 60px;
129     height: 30px;
130     border-radius: 5px;
131     position: relative;
132     float: left;/*流式布局向左对齐*/
133     margin-left: 10px;
134     top: 15px;
135     line-height: 30px;/*行高*/
136     text-align: center;}    /*横向居中*/
137 #deng {
138     color: #FFF;
139     background-color: #F90;
140     cursor: pointer;}
141 #zhu {
142     color: #F90;
143     transition: 0.5s;/*延迟多少秒之后变化*/
144     cursor: pointer;}
145 #zhu:hover {
146     color: #FFF;
147     background-color: #F90;}
148 #divtop {
149     height: 40px;
150     width: 100%;
151     background-color: #000;
152     /*position: fixed;*//*悬浮*/
153     top: 0px;
154     left: 0px;
155     z-index: 99;
156 }
157 #beizhong1
158 {
159     width:286px;
160     height:69px;
161     /*border:1px solid #039;*/
162     position:relative;
163     margin-left:200px;
164     margin-top:150px;
165     overflow:hidden;}
166 #beizhong2
167 {
168     width:343px;
169     height:48px;
170     /*border:1px solid #039;*/
171     position:relative;
172     margin-left:200px;
173     margin-top:20px;
174     overflow:hidde1n;}
175 .tou
176 {
177     height:100px;
178     width:100%;
179     line-height:100px;
180     /*border:1px solid #609;*/
181     margin-top:200px;}    
182 /*.touming
183 {
184     opacity:0.5;
185     height:100px;
186     width:100%;
187     position:absolute;
188     background-color: #141c1e;
189     margin-left:0px;
190     margin-top:0px;}    */
191 .tubiao
192 {
193     width:70px;
194     height:70px;
195     line-height:70px;
196     position:absolute;
197     margin-left:260px;
198     cursor: pointer;}    
199 .tubiao1
200 {
201     width:70px;
202     height:70px;
203     line-height:70px;
204     position:absolute;
205     margin-left:500px;
206     cursor: pointer;}
207 .tubiao2
208 {
209     width:70px;
210     height:70px;
211     line-height:70px;
212     position:absolute;
213     margin-left:740px;
214     cursor: pointer;}                
215 .tubiao3
216 {
217     width:70px;
218     height:70px;
219     line-height:70px;
220     position:absolute;
221     margin-left:980px;
222     cursor: pointer;}
223 .wenzi
224 {
225     position:absolute;
226     bottom:-50px;}    
227 .a1:link
228 {
229     color:#FFF;
230     text-decoration:none;
231     }
232 .a1:visited
233 {
234     color:#FFF;
235     text-decoration:none;
236     }
237 .a1:hover
238 {
239     color:#F90;
240     text-decoration:none;
241     }
242 #sou
243 {
244     width:150px;
245     height:25px;
246     border:1px solid #FFF;
247     border-radius:20px;
248     position:absolute;
249     top:107px;
250     right:150px;}    
251 .touming
252 {
253     background-color:#dc2d2d;
254     position:relative;
255     top:35px;
256     height:35px;
257     width:753px;
258     line-height:35px;}
259 </style>
260 </head>
261 
262 <body>
263 <div id="bei">
264   <div id="shang">
265     <div id="logo"></div>
266     <div id="you">
267       <div id="youzuo">
268        <ul>
269         <li><a href=http://www.mamicode.com/"#" style="color:#37cff4;">
270           <div class="xiao"><b>&nbsp; 官网首页</b></div>
271           </a></li>
272         <li><a href=http://www.mamicode.com/"游戏大厅.html">
273           <div class="xiao"><b>&nbsp; 游戏介绍<b></div>
274           </a></li>
275         <li><a href=http://www.mamicode.com/"#">
276           <div class="xiao"><b>&nbsp; 下载中心</b></div>
277           </a></li>
278         <li><a href=http://www.mamicode.com/"#">
279           <div class="xiao"><b>&nbsp; 最新活动</b></div>
280           </a></li> 
281         <li><a href=http://www.mamicode.com/"论坛.html">
282           <div class="xiao"><b>&nbsp; 玩家论坛</b></div>
283           </a></li>  
284        </ul>
285       </div>
286      <div id="youyou">
287       <div class="anniu" id="deng"><a href=http://www.mamicode.com/"登陆.html">登陆</a></div>
288       <div class="anniu" id="zhu"><a href=http://www.mamicode.com/"注册.html">注册</a></div>
289      </div>
290    </div>
291   <div id="sou">
292             <input type="text" placeholder="搜索" style="background:none; color:#FFF; font-size:15px; height:22px; width:120px; border:none; position:relative; top:1px; left:5px;" />
293             <img src=http://www.mamicode.com/"../智博星主页_files/searchIcon.png" style="position:absolute; top:3px; right:7px;" />
294   </div>
295   <div class="touming"><marquee scrollamount="15"><a style="color:#FF0; font-size:20px;"><b>ヾ(o???)?ヾ狙击者Ⅰ三周年活动火爆进行中,海量虚拟货币道具正在发放,更有现金红包大奖在等着你们;详情请关注我们的活动中心。ヾ(???ゞ)</b></a></marquee></div>
296   </div>
297   <div id="beizhong1"><img src=http://www.mamicode.com/"../../1478232080_231357.png" /></div>
298   <div id="beizhong2"><img src=http://www.mamicode.com/"../../1478234796_687269.png" /></div> 
299     <div class="tou">
300        <ul>
301         <li>
302          <a class="a1" href=http://www.mamicode.com/"#"><div class="tubiao" style="background-image:url(../../logo5.png)"><div class="wenzi"><b>游戏充值
303  </b></div></div></a></li>
304         <li>
305          <a class="a1" href=http://www.mamicode.com/"#"><div class="tubiao1" style="background-image:url(../../logo4.png)"><div class="wenzi"><b>CDK兑换</b></div></div></a></li>
306         <li>
307          <a class="a1" href=http://www.mamicode.com/"#"><div class="tubiao2" style="background-image:url(../../logo3.png)"><div class="wenzi"><b>作战指南</b></div></div></a></li>
308         <li>
309          <a class="a1" href=http://www.mamicode.com/"#"><div class="tubiao3" style="background-image:url(../../logo2.png)"><div class="wenzi"><b>团队对抗</b></div></div><a></li>
310       </ul>
311 <!--  <div class="touming"></div>-->
312   </div>
313   <div class="logo1"><img src=http://www.mamicode.com/"精彩画面.png" /></div>
314   <div id="datu" onm ouseover="pause()" onm ouseout="conti()"><!--鼠标悬浮跟移除-->    
315       <table id="ta" cellpadding="0" cellspacing="0">
316           <tr>
317             <td><img src=http://www.mamicode.com/"图8.jpg" /></td>
318             <td><img src=http://www.mamicode.com/"图7.jpg" /></td>
319             <td><img src=http://www.mamicode.com/"图6.jpg" /></td>
320             <td><img src=http://www.mamicode.com/"图5.jpg" /></td>
321             <td><img src=http://www.mamicode.com/"图4.jpg" /></td>
322           </tr>
323       </table> 
324   </div>
325   <div class="logo1"><img src=http://www.mamicode.com/"游戏心得.png" /></div>
326   <div class="xinde">
327     <table cellpadding="0" cellspacing="0" >
328           <tr>
329               <td>今日推荐:</td>
330           </tr>
331            <tr>
332               <td>&nbsp;</td>
333           </tr>
334           <tr>
335               <td><a class="a1" href=http://www.mamicode.com/"#">1:新手推荐:3天速成通关困难级所以关卡及隐藏BOSS攻略。
336               </a></td>
337           </tr>
338           <tr>
339               <td><a style="float:right">2016-11-11</a></td>
340           </tr>
341           <tr>
342               <td><a class="a1" href=http://www.mamicode.com/"#">2:大神分享:3人组3分31秒极速通关SSS级任务:"杀戮之地"高级攻略。</a></td>
343           </tr>
344           <tr>
345               <td><a style="float:right">2016-11-11</a></td>
346           </tr>
347            <tr>
348               <td><a class="a1" href=http://www.mamicode.com/"#">3:玩家专访:国服第一女枪王Alice做客直播间,与玩家交流心得。
349               </a></td>
350           </tr>
351           <tr>
352               <td><a style="float:right">2016-11-11</a></td>
353           </tr>
354           <tr>
355               <td>&nbsp;</td>
356           </tr>
357           <tr>
358               <td><a class="a1" href=http://www.mamicode.com/"#" style="float:right">更多资讯┉┉</a></td>
359           </tr><br />
360           <tr>
361               <td height="130px"><a href=http://www.mamicode.com/"#"><marquee scrollamount="10" ><img src=http://www.mamicode.com/"战地1.jpg"/><img src=http://www.mamicode.com/"战地4.jpg" /><img src=http://www.mamicode.com/"战地2.jpg" /><img src=http://www.mamicode.com/"战地5.jpg" /></marquee></a></td>      
362           </tr>
363    </table>
364    </div>
365  <div id="di">
366        <table cellpadding="0" cellspacing="0" >
367              <tr>
368                  <td height="150px" width="200px"></td>
369                  <td width="200px"><img src=http://www.mamicode.com/"logo2.png" width="200" /></td>
370                  <td width="50px"></td>
371                  <td>
372                      <table>
373                            <tr><a style="float:right; font-size:9px; color:#CCC;">关于我们 | 免责声明 | 客服中心 | 未成年人家长监护 | 狙击者Ⅰ | 汉企网 | 黑科技 | 沙发网 | 纳米核心 </a></tr>
374                            <tr><a style="float:right; font-size:9px; color:#CCC;">B1.B2-20120154 | 沪网文[2014]0745-175号 | 沪ICP备11033765号 | 科技与数字[2011]208号 </tr>
375                            <tr><a style="float:right; font-size:9px; color:#CCC;">Copyright  ?2016 All Rights Reserved xd.com  文网游备字[2011]W-RPG089号 就牛逼网络股份有限公司</tr>
376                            <tr><a style="float:right; font-size:9px; color:#CCC;">联系方式:000-00000000 商务合作 Business Contact:cooperation@jiuniubi.com </tr>
377                      </table>
378                  </td>
379                  <td width="200px"></td>
380              </tr>
381  </div>   
382 </div>
383 </body>
384 </html>
385 <script>
386 document.getElementById("ta").style.marginLeft="0px";
387 function huan()
388 {
389     var tu =document.getElementById("ta");
390     var a=parseInt(tu.style.marginLeft);    
391     if(a<=-3200)
392     {
393         tu.style.marginLeft="0px";    
394     }
395     else
396     {
397         tu.style.marginLeft= (a-800)+"px";    
398     }
399     shi =window.setTimeout("huan()",3000);    
400 }
401 var shi =window.setTimeout("huan()",3000);
402 
403 function pause()
404 {
405     window.clearTimeout(shi);    
406 }
407 
408 function conti()
409 {
410     shi = window.setTimeout("huan()",3000);    
411 }
412 
413 </script>
首页

首页用了marquee标签滚动还有DIV的轮播,以及上方子页面的跳转(不成熟之作)

技术分享

技术分享

技术分享

技术分享
  1 * {
  2     margin: 0px;
  3     padding: 0px;
  4     z-index: 99;}
  5 #shang
  6 {
  7     min-width:1000px;
  8     width:1400px;
  9     height:135px;
 10     position:relative;
 11     }    
 12 #bei
 13  {
 14     background-image:url(%E8%83%8C%E6%99%AF4.png);
 15     background-repeat:no-repeat;
 16     background-color:#395257;
 17     /*background-attachment: fixed;*/
 18     background-size: 100%;
 19     width:1400px;
 20     height:auto;
 21     min-width:1000px;}
 22 #logo
 23 {
 24     background-image:url(logo2.png);
 25     background-repeat: no-repeat;
 26     background-size: contain;
 27     /*border:1px solid #3F3;*/
 28     position:relative;
 29     top:30px;
 30     margin-left:100px;
 31     height: 60px;
 32     background-position: center center;
 33     width: 180px;
 34     z-index: 99;}
 35 #you
 36 {
 37     width:850px;
 38     height:60px;
 39     /*border:1px solid #3F3;*/
 40     position:absolute;
 41     float:right;
 42     right:40px;
 43     top:30px;
 44     line-height: 60px;}    
 45 #youzuo {
 46     width: 650px;
 47     height: 60px;
 48     line-height: 60px;
 49     position: absolute;    }
 50 li {
 51     float: left;
 52     color: #FFF;
 53     margin-left: 20px;
 54     list-style: none;
 55     cursor: pointer;/*变手指*/}    
 56 a {
 57     color: #FFF;
 58     cursor: pointer;
 59     text-decoration: none;}    
 60 #youyou {
 61     width: 220px;
 62     height: 60px;
 63     position: absolute;
 64     right: 0px;}
 65 .anniu {
 66     width: 60px;
 67     height: 30px;
 68     border-radius: 5px;
 69     position: relative;
 70     float: left;/*流式布局向左对齐*/
 71     margin-left: 10px;
 72     top: 15px;
 73     line-height: 30px;/*行高*/
 74     text-align: center;}    /*横向居中*/
 75 #deng {
 76     color: #FFF;
 77     background-color: #F90;
 78     cursor: pointer;}
 79 #zhu {
 80     color: #F90;
 81     transition: 0.5s;/*延迟多少秒之后变化*/
 82     cursor: pointer;}
 83 #zhu:hover {
 84     color: #FFF;
 85     background-color: #F90;}    
 86 #sou
 87 {
 88     width:150px;
 89     height:25px;
 90     border:1px solid #FFF;
 91     border-radius:20px;
 92     position:absolute;
 93     top:111px;
 94     right:150px;}
 95 #dibian
 96 {
 97     height:150px;
 98     min-width:1000px;
 99     background-color:#1a252b;
100     border:1px solid #F00;
101     position:relative;
102     margin-top:30px;
103     background-repeat:no-repeat;}                    
104     
105 #jieshao
106 {
107     width:900px;
108     height:1900px;
109     position:relative;
110     margin-top:500px;
111     margin-left:220px;
112     overflow:hidden;}
113 #jietu
114 {
115     width:900px;
116     height:506px;
117     position:relative;
118     margin:30px auto;
119     overflow:hidden;}
120 #jietu1
121 {
122     margin-left:0px;
123     transition:0.7s;}
124 .suolue
125 {
126     height:75px;
127     width:900px;
128     position:relative;
129     margin:auto;
130     line-height:60px;}
131 .suolue1
132 {
133     height:66px;
134     width:118px;
135     float:left;
136     border: 4px solid #30d2f8;
137     background-size:contain;
138     background-position:center;}
139 #left
140 {
141     left:10px;
142     }
143 #right
144 {
145     right:10px;
146 }
147 .lr
148 {
149     position:absolute;
150     top:230px;
151     width:60px;
152     height:60px;
153     z-index:99;}    
154 .u1
155 {
156     list-style-type:none;}
157 .u1 li
158 {
159     float:left;
160     margin-left:2px;}                
简介CSS
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href=http://www.mamicode.com/"枪战上半区域.css" rel="stylesheet" type="text/css" />
<link href=http://www.mamicode.com/"枪战内容.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bei">
  <div id="shang">
    <div id="logo"></div>
    <div id="you">
       <div id="youzuo">
          <ul>
             <li><a href=http://www.mamicode.com/"枪战网页.html"><div class="xiao"><b>&nbsp; 官网首页</b></div></a></li>
             <li><a href=http://www.mamicode.com/"#" style="color:#37cff4;"><div class="xiao"><b>&nbsp; 游戏介绍</b></div></a></li>
             <li><a href=http://www.mamicode.com/"#"><div class="xiao"><b>&nbsp; 下载中心</b></div></a></li>
             <li><a href=http://www.mamicode.com/"#"><div class="xiao"><b>&nbsp; 最新活动</b></div></a></li> 
             <li><a href=http://www.mamicode.com/"论坛.html"><div class="xiao"><b>&nbsp; 玩家论坛</b></div></a></li>  
          </ul>
       </div>
       <div id="youyou">
          <div class="anniu" id="deng"><a href=http://www.mamicode.com/"登陆.html">登陆</a></div>
          <div class="anniu" id="zhu"><a href=http://www.mamicode.com/"注册.html">注册</a></div>
       </div>
     </div>
     <div id="sou">
            <input type="text" placeholder="搜索" style="background:none; color:#FFF; font-size:15px; height:22px; width:120px; border:none; position:relative; top:1px; left:5px;" />
            <img src=http://www.mamicode.com/"../智博星主页_files/searchIcon.png" style="position:absolute; top:3px; right:7px;" />
    </div>
  </div>
  <div id="jieshao">
        <table>
               <tr height="20px"><img src=http://www.mamicode.com/"游戏简介.png" /></tr>
               <tr>
                   <table>
                          <tr><a style="color:#F90; font-size:24px;"><b>&emsp;&emsp;先进的世界:</b></a></tr>
                          <tr><a style="color:#FFF; font-size:20px; line-height:35px;">游戏的故事发生在一个非常真实的未来世界中,任何科技进步和军事实践都将引起严重的后果;在这样的世界中,私人军事集团(PMC)成为许多国家寻找军事需求的重要力量,这些私人军事集团正在重新定义战争规则,正在改变世界版图;乔纳森·艾恩司是世界上最大PMC集团Atlas的创始人和董事长,他处于这一切的中心。</a></tr><br />
<br />
                          <tr><a style="color:#F90; font-size:24px;"><b>&emsp;&emsp;先进的战士:</b></a></tr>
                          <tr><a style="color:#FFF; font-size:20px; line-height:35px;">强大的骨骼装甲提升了战士的各个方面,让他们在战场上更敏捷、更具杀伤力;这种机制的引入,让战士能够超级弹跳和格斗,还具有隐身功能,生物力学技术则带来了无与伦比的力量、意识、耐力和速度;随着骨骼装甲和最先进武器防具的到来,每个战士能够在任何地形中自由作战,为《使命召唤》系列的玩法带来一场革命。</a></tr><br />
<br />
                          <tr><a style="color:#F90; font-size:24px;"><b>&emsp;&emsp;先进的武器库:</b></a></tr>
                          <tr><a style="color:#FFF; font-size:20px; line-height:35px;">得益于次世代平台的性能,《使命召唤11:高级战争》将玩家带到拥有超高科技的未来战场中,玩家可以使用先进的装备和技术,还有滑翔车和非常专业的无人机等载具供玩家使用;玩家还可以在普通军火和全新的导能武器之间选择;骨骼装甲为玩家带来了强大的力量提升和史无前例的自由作战。</a></tr>
                   </table>
               </tr>
               <tr height="20px"><img src=http://www.mamicode.com/"精美截图.png" /></tr>
               <tr>
                   <div id="jietu" onm ouseover="pause()" onm ouseout="conti()">
                      <table id="jietu1" cellpadding="0" cellspacing="0">
                           <tr height="506">
                                   <td width="900"><img src=http://www.mamicode.com/"战4.jpg"></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战2.jpg" /></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战1.jpg" /></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战3.jpg" /></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战5.jpg" /></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战6.jpg" /></td>
                                   <td width="900"><img src=http://www.mamicode.com/"战7.jpg" /></td>
                           </tr>
                      </table>
                       <div class="lr" id="left" onclick="dong(-1)">
        <img src=http://www.mamicode.com/"左箭头.png" width="60px"; />
    </div>
    <div class="lr" id="right" onclick="dong(1)">
        <img src=http://www.mamicode.com/"右箭头.png" width="60px"; />
    </div>  
                   </div>
                   <div class="suolue">
                         <ul class="u1">
                               <li><div class="suolue1" style="background-image:url(%E6%88%984.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%982.jpg)" id="tu2" onclick="xiaotu(2)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%981.jpg)" id="tu3" onclick="xiaotu(3)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%983.jpg)" id="tu4" onclick="xiaotu(4)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%985.jpg)" id="tu5" onclick="xiaotu(5)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%986.jpg)" id="tu6" onclick="xiaotu(6)"></div></li>
                               <li><div class="suolue1" style="background-image:url(%E6%88%987.jpg)" id="tu7" onclick="xiaotu(7)"></div></li>
                         </ul>
                    </div>
               </tr><br />
<br />
               <tr height="20px"><img src=http://www.mamicode.com/"配置要求.png"; /></tr>
               </tr>
               <tr><img src=http://www.mamicode.com/"配置.png" /></tr>
        </table>
  </div>
  <div id="di">
       <table cellpadding="0" cellspacing="0" >
             <tr>
                 <td height="150px" width="200px"></td>
                 <td width="200px"><img src=http://www.mamicode.com/"logo2.png" width="200" /></td>
                 <td width="50px"></td>
                 <td>
                     <table>
                           <tr><a style="float:right; font-size:9px; color:#CCC;">关于我们 | 免责声明 | 客服中心 | 未成年人家长监护 | 狙击者Ⅰ | 汉企网 | 黑科技 | 沙发网 | 纳米核心 </a></tr>
                           <tr><a style="float:right; font-size:9px; color:#CCC;">B1.B2-20120154 | 沪网文[2014]0745-175号 | 沪ICP备11033765号 | 科技与数字[2011]208号 </tr>
                           <tr><a style="float:right; font-size:9px; color:#CCC;">Copyright  ?2016 All Rights Reserved xd.com  文网游备字[2011]W-RPG089号 就牛逼网络股份有限公司</tr>
                           <tr><a style="float:right; font-size:9px; color:#CCC;">联系方式:000-00000000 商务合作 Business Contact:cooperation@jiuniubi.com </tr>
                     </table>
                 </td>
                 <td width="200px"></td>
             </tr>
 </div>   
</div>
</body>
</html>
<script>
document.getElementById("jietu1").style.marginLeft="0px";
var biao=1;
function huan()
{
    var tu =document.getElementById("jietu1");
    var a=parseInt(tu.style.marginLeft);    
    if(a<=-5400)
    {
        tu.style.marginLeft="0px";
    }
    else
    {
        tu.style.marginLeft= (a-900)+"px";    
    }
    document.getElementById("tu1").style.borderColor="#30d2f8";
    document.getElementById("tu2").style.borderColor="#30d2f8";
    document.getElementById("tu3").style.borderColor="#30d2f8";
    document.getElementById("tu4").style.borderColor="#30d2f8";
    document.getElementById("tu5").style.borderColor="#30d2f8";
    document.getElementById("tu6").style.borderColor="#30d2f8";
    document.getElementById("tu7").style.borderColor="#30d2f8";
    var b = parseInt(document.getElementById("jietu1").style.marginLeft);
    if(b==0)
    {
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(b==-900)
    {
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(b==-1800)
    {
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(b==-2700)
    {
        document.getElementById("tu4").style.borderColor="red";
    }
    else if(b==-3600)
    {
        document.getElementById("tu5").style.borderColor="red";
    }
    else if(b==-4500)
    {
        document.getElementById("tu6").style.borderColor="red";
    }
    else
    {
        document.getElementById("tu7").style.borderColor="red";
    }
    shi =window.setTimeout("huan()",3000);    
}
var shi =window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(shi);    
}

function conti()
{
    shi = window.setTimeout("huan()",3000);    
}
function dong(ad)
{
    var tu =document.getElementById("jietu1");
    var a=parseInt(tu.style.marginLeft);
    if(ad==-1)
    {
        if(a==0)
        {
            tu.style.marginLeft=-5400+"px";    
        }
        else
        {
            tu.style.marginLeft= (a+900)+"px";    
        }    
    }
    else
    {
        if(a==-5400)
        {
            tu.style.marginLeft=0+"px";    
        }
        else
        {
            tu.style.marginLeft= (a-900)+"px";    
        }        
    }
    document.getElementById("tu1").style.borderColor="#30d2f8";
    document.getElementById("tu2").style.borderColor="#30d2f8";
    document.getElementById("tu3").style.borderColor="#30d2f8";
    document.getElementById("tu4").style.borderColor="#30d2f8";
    document.getElementById("tu5").style.borderColor="#30d2f8";
    document.getElementById("tu6").style.borderColor="#30d2f8";
    document.getElementById("tu7").style.borderColor="#30d2f8";
    var b = parseInt(document.getElementById("jietu1").style.marginLeft);
    if(b==0)
    {
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(b==-900)
    {
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(b==-1800)
    {
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(b==-2700)
    {
        document.getElementById("tu4").style.borderColor="red";
    }
    else if(b==-3600)
    {
        document.getElementById("tu5").style.borderColor="red";
    }
    else if(b==-4500)
    {
        document.getElementById("tu6").style.borderColor="red";
    }
    else
    {
        document.getElementById("tu7").style.borderColor="red";
    }
}
function xiaotu(x)
{
    document.getElementById("tu1").style.borderColor="#30d2f8";
    document.getElementById("tu2").style.borderColor="#30d2f8";
    document.getElementById("tu3").style.borderColor="#30d2f8";
    document.getElementById("tu4").style.borderColor="#30d2f8";
    document.getElementById("tu5").style.borderColor="#30d2f8";
    document.getElementById("tu6").style.borderColor="#30d2f8";
    document.getElementById("tu7").style.borderColor="#30d2f8";
    if(x==1)
    {
        document.getElementById("jietu1").style.marginLeft="0px";
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(x==2)
    {
        document.getElementById("jietu1").style.marginLeft="-900px";
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(x==3)
    {
        document.getElementById("jietu1").style.marginLeft="-1800px";
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(x==4)
    {
        document.getElementById("jietu1").style.marginLeft="-2700px";
        document.getElementById("tu4").style.borderColor="red";
    }
    else if(x==5)
    {
        document.getElementById("jietu1").style.marginLeft="-3600px";
        document.getElementById("tu5").style.borderColor="red";
    }
    else if(x==6)
    {
        document.getElementById("jietu1").style.marginLeft="-4500px";
        document.getElementById("tu6").style.borderColor="red";
    }
    else
    {
        document.getElementById("jietu1").style.marginLeft="-5400px";
        document.getElementById("tu7").style.borderColor="red";
    }
}
</script>
简介内容

技术分享

增加了另一种展示轮播的方式方法

人生中第一次做的网页,留个纪念