首页 > 代码库 > 人生中第一次做的网页，留个纪念
人生中第一次做的网页，留个纪念
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> 官网首页</b></div> 271 </a></li> 272 <li><a href=http://www.mamicode.com/"游戏大厅.html"> 273 <div class="xiao"><b> 游戏介绍<b></div> 274 </a></li> 275 <li><a href=http://www.mamicode.com/"#"> 276 <div class="xiao"><b> 下载中心</b></div> 277 </a></li> 278 <li><a href=http://www.mamicode.com/"#"> 279 <div class="xiao"><b> 最新活动</b></div> 280 </a></li> 281 <li><a href=http://www.mamicode.com/"论坛.html"> 282 <div class="xiao"><b> 玩家论坛</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> </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> </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;}
<!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> 官网首页</b></div></a></li> <li><a href=http://www.mamicode.com/"#" style="color:#37cff4;"><div class="xiao"><b> 游戏介绍</b></div></a></li> <li><a href=http://www.mamicode.com/"#"><div class="xiao"><b> 下载中心</b></div></a></li> <li><a href=http://www.mamicode.com/"#"><div class="xiao"><b> 最新活动</b></div></a></li> <li><a href=http://www.mamicode.com/"论坛.html"><div class="xiao"><b> 玩家论坛</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>  先进的世界：</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>  先进的战士：</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>  先进的武器库：</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>
增加了另一种展示轮播的方式方法
人生中第一次做的网页，留个纪念
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。