网页模仿——面向对象与软件工程实验二
一、源码以及素材链接
码云源码链接：https://gitee.com/fzzf-sama/wangyemofang/tree/master/
二、效果截图
1、原网页截图
2、模仿网页截图
三、功能实现
1、不同终端下的响应式布局效果
最大化时的效果：
缩小到要遮住右方的技能介绍模块时，自动将此模块移动至下方：
代码如下：
2、实现简单的动画效果
（1）鼠标移动到目录栏时，相应的目录背景颜色变暗
代码如下：
（2）鼠标移动到各个技能图标时，图标会按照比例放大
代码如下：
四、原始代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <title>网页</title> 6 <style type="text/css"> 7 ul, 8 menu, 9 dir { 10 display: block; 11 list-style-type: disc; 12 -webkit-margin-before: 1em; 13 -webkit-margin-after: 1em; 14 -webkit-margin-start: 0px; 15 -webkit-margin-end: 0px; 16 -webkit-padding-start: 40px; 17 } 18 19 div { 20 display: block; 21 } 22 23 * { 24 margin: 0; 25 padding: 0; 26 } 27 28 .comm-head { 29 width: 100%; 30 height: 78px; 31 overflow: visible; 32 position: absolute; 33 top: 0; 34 left: 0; 35 z-index: 11; 36 } 37 38 .head-normal { 39 width: 100%; 40 max-width: 1358px; 41 min-width: 1230px; 42 height: 78px; 43 margin: 0 auto; 44 position: relative; 45 z-index: 10; 46 } 47 .comm-head .logo { 48 float: left; 49 width: 132px; 50 height: 49px; 51 margin-top: 14px; 52 } 53 54 .head-nav { 55 float: left; 56 width: 55%; 57 height: 78px; 58 box-sizing: border-box; 59 margin-left: 30px; 60 padding-top: 16px; 61 } 62 63 .head-nav-title { 64 display: block; 65 color: #fff; 66 font-size: 18px; 67 letter-spacing: 1px; 68 } 69 70 .head-nav-subtitle { 71 display: block; 72 color: #aeaeae; 73 font-size: 11px; 74 margin-top: -1px; 75 letter-spacing: 1px; 76 } 77 78 .comm-topact { 79 width: 100%; 80 min-width: 1230px; 81 height: 360px; 82 overflow: hidden; 83 position: relative; 84 background: center top no-repeat; 85 -webkit-transition: height .6s, background, .6s; 86 transition: height .6s, background, .6s; 87 } 88 89 .topact-small-img { 90 -webkit-transition: opacity .6s; 91 transition: opacity .6s; 92 opacity: 1; 93 width: 100%; 94 height: auto; 95 } 96 97 .topact-big-img, 98 .topact-small-img { 99 position: absolute; 100 left: 50%; 101 top: 0; 102 width: 1920px; 103 height: 100%; 104 margin-left: -960px; 105 } 106 107 img { 108 border: 0; 109 } 110 111 .comm-topact .dark-mask { 112 width: 100%; 113 height: 131px; 114 position: absolute; 115 left: 0; 116 top: 0; 117 background: url(//ossweb-img.qq.com/images/lol/v3/dark-jianbian-repeatx-0.png) repeat center top; 118 z-index: 1; 119 } 120 121 .comm-topact-inner { 122 width: auto; 123 max-width: 1358px; 124 min-width: 1230px; 125 height: 100%; 126 position: relative; 127 margin: 0 auto; 128 } 129 130 .biaoti1 { 131 color: white; 132 font-size: 20px; 133 } 134 135 .biaoti2 { 136 color: white; 137 font-size: 10px; 138 } 139 140 .wraper { 141 font: normal 12px/1.6em Microsoft YaHei, Tahoma, simsun; 142 color: #666; 143 min-width: 1240px; 144 margin: 0 auto; 145 background: #f7f8f8; 146 overflow: hidden; 147 } 148 149 .mainer { 150 position: relative; 151 z-index: 1; 152 overflow: hidden; 153 zoom: 1; 154 width: 1240px; 155 margin: 0 auto 50px; 156 } 157 .layout { 158 width: 1240px; 159 margin: 0 auto; 160 } 161 162 .website-path .icon-arrow-2 { 163 display: inline-block; 164 vertical-align: middle; 165 margin: -2px 21px 0 21px; 166 } 167 168 .icon-arrow-2 { 169 background-position: -381px -46px; 170 width: 5px; 171 height: 8px; 172 } 173 174 .wraper .website-path { 175 width: 1240px; 176 } 177 178 .website-path { 179 width: 1358px; 180 height: 96px; 181 margin: 0 auto; 182 text-align: left; 183 line-height: 96px; 184 font-size: 14px; 185 } 186 187 .website-path .icon-home { 188 display: inline-block; 189 vertical-align: middle; 190 margin: -3px 9px 0 0; 191 } 192 193 .icon-home { 194 background-position: -347px -71px; 195 width: 16px; 196 height: 16px; 197 } 198 199 .website-path .here { 200 color: #424242; 201 } 202 203 .website-path a { 204 color: #a9a9a9; 205 } 206 207 .colbox { 208 border: 0px solid #e1e1e1; 209 box-shadow: 0 0 0px rgba(0, 0, 0, .1); 210 background: #fff; 211 } 212 213 .pagetab { 214 border-top: 4px solid #d7d7d7; 215 border-bottom: 1px solid #e2e2e2; 216 height: 48px; 217 background: #f0f0f0; 218 } 219 220 .pagetab-list { 221 margin-top: -4px; 222 margin-bottom: -2px; 223 position: relative; 224 height: 53px; 225 } 226 227 .pagetab-list, 228 .pagetab-list li { 229 float: left; 230 } 231 232 li { 233 list-style-type: none; 234 } 235 236 a:hover, 237 a:visited { 238 text-decoration: none; 239 } 240 241 .pagetab-list-lnk { 242 display: block; 243 border-top: 4px solid #d7d7d7; 244 height: 49px; 245 line-height: 48px; 246 width: 160px; 247 text-align: center; 248 color: #525252; 249 font-size: 16px; 250 cursor: pointer; 251 } 252 .pagetab-list-lnk-now { 253 display: block; 254 border-top: 4px solid; 255 height: 49px; 256 line-height: 48px; 257 width: 160px; 258 text-align: center; 259 color: #525252; 260 font-size: 16px; 261 cursor: pointer; 262 } 263 a { 264 text-decoration: none; 265 } 266 267 .info-showbox { 268 padding: 30px 37px 30px 30px; 269 margin-top: -1px; 270 position: relative; 271 min-height: 500px; 272 _height: 500px; 273 } 274 275 .spell-list { 276 float: left; 277 width: 43%; 278 padding-left: 16px; 279 margin-right: 0; 280 border-right: 1px solid #f0f0f0; 281 } 282 283 .imgtextlist { 284 float: left; 285 padding: 30px 0 0; 286 position: relative; 287 } 288 289 .imgtextlist .current { 290 color: #00a383; 291 } 292 293 .imgtextlist li { 294 float: left; 295 width: 90px; 296 height: 100px; 297 margin-bottom: 22px; 298 text-align: center; 299 line-height: 15px; 300 cursor: pointer; 301 position: relative; 302 overflow: hidden; 303 } 304 305 .imgtextlist .current .sbg { 306 display: block; 307 } 308 309 .spell-list .sbg { 310 width: 0.1px; 311 height: 0.1px; 312 border: 0.1px solid #00a383; 313 background: 0 0; 314 } 315 316 .imgtextlist .sbg { 317 display: none; 318 position: absolute; 319 top: 0; 320 left: 12px; 321 background: #00a383; 322 opacity: .8; 323 cursor: pointer; 324 } 325 326 .imgtextlist .sbg, 327 .imgtextlist img { 328 width: 66px; 329 height: 65px; 330 } 331 332 .spell-defail { 333 float: left; 334 width: 100%; 335 padding-top: 30px; 336 padding-left: 40px; 337 } 338 339 .spell-title { 340 overflow: hidden; 341 zoom: 1; 342 } 343 344 .spell-title .cons { 345 float: left; 346 width: 60%; 347 color: #9a9a9a; 348 line-height: 30px; 349 font-size: 14px; 350 } 351 352 .spell-desc { 353 padding: 20px 0; 354 line-height: 18px; 355 color: #333; 356 font-size: 14px; 357 } 358 .imgchange 359 { 360 width: 64px; 361 height: 64px; 362 } 363 .imgchange:hover 364 { 365 transform: scale(1.2,1.2); 366 transition-duration: 200ms; 367 } 368 .wordchange 369 { 370 transition-duration: 500ms; 371 } 372 .wordchange:hover 373 { 374 background:darkgrey; 375 } 376 @media screen and (min-width:1045px) 377 { 378 .spell-defail 379 { 380 float:none; 381 } 382 .spell-title 383 { 384 float:none; 385 } 386 .spell-title .cons 387 { 388 float:none; 389 } 390 .spell-desc 391 { 392 float: none; 393 } 394 } 395 </style> 396 </head> 397 398 <body> 399 <div class="comm-head"> 400 <div class="head-normal"> 401 <a class="logo" href="https://lol.qq.com/"> 402 <img src="picture/标题.png" width="132" height="49"> 403 </a> 404 <table border="0" class="head-nav"> 405 <tr align="center" class="biaoti1"> 406 <td>游戏资料</td> 407 <td>商城/合作</td> 408 <td>社区互动</td> 409 <td>赛事官网</td> 410 <td>自助系统</td> 411 </tr> 412 <tr align="center" class="biaoti2"> 413 <td>GAME INFO</td> 414 <td>STORE</td> 415 <td>COMMUNITY</td> 416 <td>ESPORTS</td> 417 <td>SYSTEM</td> 418 </tr> 419 </table> 420 </div> 421 </div> 422 <div class="comm-topact"> 423 <img class="topact-small-img" src="picture/猫狗.PNG"> 424 </div> 425 426 <div class="wraper"> 427 <div class="layout mainer"> 428 <div class="website-path"> 429 <i class="icon-home"></i> 430 <a href="https://lol.qq.com/main.shtml">英雄联盟主页</a> 431 <i class="icon-arrow-2"></i> 432 <a href="https://lol.qq.com/data/info-heros.shtml#Navi">游戏资料</a> 433 <i class="icon-arrow-2"></i> 434 <a class="here">召唤师技能</a> 435 </div> 436 <div class="colbox"> 437 <div id="pageTAB" class="pagetab"> 438 <ul class="pagetab-list"> 439 <li> 440 <a class="pagetab-list-lnk wordchange" href="https://lol.qq.com/data/info-heros.shtml#Navi" >英雄</a> 441 </li> 442 <li> 443 <a class="pagetab-list-lnk wordchange" href="https://lol.qq.com/data/info-item.shtml#Navi">物品</a> 444 </li> 445 <li> 446 <a class="pagetab-list-lnk-now wordchange" href="https://lol.qq.com/data/info-spell.shtml#Navi">召唤师技能</a> 447 </li> 448 <li> 449 <a class="pagetab-list-lnk wordchange" href="https://lol.qq.com/data/info-rune.shtml#Navi">符文</a> 450 </li> 451 </ul> 452 </div> 453 <div class="info-showbox"> 454 <ul id="spellList" class="imgtextlist spell-list"> 455 <li class="current imgchange"> 456 <img src="picture/屏障.png"> 457 <p>屏障</p> 458 <span class="sbg"></span> 459 </li> 460 <li class="imgchange"> 461 <img src="picture/净化.png"> 462 <p>净化</p> 463 <span class="sbg"></span> 464 </li> 465 <li class="imgchange"> 466 <img src="picture/点燃.png"> 467 <p>点燃</p> 468 <span class="sbg"></span> 469 </li> 470 <li class="imgchange"> 471 <img src="picture/虚弱.png"> 472 <p>虚弱</p> 473 <span class="sbg"></span> 474 </li> 475 <li class="imgchange"> 476 <img src="picture/闪现.png"> 477 <p>闪现</p> 478 <span class="sbg"></span> 479 </li> 480 <li class="imgchange"> 481 <img src="picture/疾步.png"> 482 <p>疾步</p> 483 <span class="sbg"></span> 484 </li> 485 <li class="imgchange"> 486 <img src="picture/治疗.png"> 487 <p>治疗</p> 488 <span class="sbg"></span> 489 </li> 490 <li class="imgchange"> 491 <img src="picture/清晰.png"> 492 <p>清晰</p> 493 <span class="sbg"></span> 494 </li> 495 <li class="imgchange"> 496 <img src="picture/护驾.png"> 497 <p>护驾</p> 498 <span class="sbg"></span> 499 </li> 500 <li class="imgchange"> 501 <img src="picture/投掷.png"> 502 <p>投掷</p> 503 <span class="sbg"></span> 504 </li> 505 <li class="imgchange"> 506 <img src="picture/惩戒.png"> 507 <p>惩戒</p> 508 <span class="sbg"></span> 509 </li> 510 <li class="imgchange"> 511 <img src="picture/标记.png"> 512 <p>标记</p> 513 <span class="sbg"></span> 514 </li> 515 <li class="imgchange"> 516 <img src="picture/传送.png"> 517 <p>传送</p> 518 <span class="sbg"></span> 519 </li> 520 </ul> 521 <div class="spell-defail"> 522 <div class="spell-title"> 523 <img src="picture/屏障.png"> 524 <h4>屏障</h4> 525 <p class="cons">召唤师等级：<span>1</span>级</p> 526 </div> 527 <div class="spell-desc">为你的英雄套上护盾，吸收115-455（取决于英雄等级）伤害，持续2秒。</div> 528 <div><img src="picture/屏障1.jpg"></div> 529 </div> 530 </div> 531 </div> 532 </div> 533 </div> 534 </body> 535 536 </html>
