網易郵箱頁面特效

阿新 • • 發佈：2019-01-14

百度網盤： https://pan.baidu.com/s/1cZosAQgaGC_0RJH_BE0qyg

網易 fullpafe 檔案

http://www.17sucai.com/pins/demo-show?id=5876

一個jq檔案

一個fullpage css 和js

一個jq-ui 外掛

然後就是一大堆圖片組成

<!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>jQuery實現網易郵箱頁面 </title>
   <link rel="stylesheet" href="css/jquery.fullPage.css">
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      body {
         font: 16px/1.8 "Microsoft Yahei", verdana;
      }

      /* 右側導航 */
      #fullPage-nav {
         _display: none;
         font-size: 12px;
      }

      #fullPage-nav li {
         width: 90px;
         height: 21px;
         margin: 10px 0 0;
         vertical-align: middle;
      }

      #fullPage-nav li a {
         float: right;
         width: 21px;
         height: 21px;
         color: #8F9DA4;
         text-decoration: none;
         text-align: right;
         background: url(images/dot.png) 5px 5px no-repeat;
      }

      #fullPage-nav li .active {
         background-position: 0 bottom;
      }

      #fullPage-nav span {
         display: none;
      }

      .fullPage-tooltip {
         float: left;
         top: 0;
         margin-right: 5px;
         font: 12px "Microsoft Yahei";
         color: #8F9DA4;
         line-height: 21px;
      }

      .section {
         position: relative;
         overflow: hidden;
      }

      .section .bg {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
      }

      .section .bg img {
         display: block;
         width: 100%;
         height: 100%;
      }

      .bg11 {
         position: absolute;
         bottom: 0;
         width: 100%;
         height: 850px;
         background: url(images/bg11.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .bg12 {
         position: absolute;
         bottom: -392px;
         width: 100%;
         height: 392px;
         background: url(images/bg12.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1.7s;
         bottom: 90px \0;
      }

      .bg13 {
         position: absolute;
         bottom: -377px;
         width: 100%;
         height: 377px;
         background: url(images/bg13.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .hgroup {
         position: absolute;
         width: 554px;
         height: 176px;
         left: 50%;
         top: 25%;
         margin: 0 0 0 -277px;
         text-indent: -9999px;
         background-image: url(images/slogan.png);
         opacity: 0;
         -webkit-transform: scale(0.5, 0.5);
         transform: scale(0.5, 0.5);
         transition: all 1s;
      }

      .p11 {
         position: absolute;
         left: 50%;
         top: 50%;
         width: 600px;
         margin: 0 0 0 -280px;
         font-size: 14px;
         color: #94a7c6;
         opacity: 0;
         transition: all 0.5s;
      }

      .mail {
         position: absolute;
         left: 50%;
         top: -26px;
         width: 375px;
         height: 26px;
         margin-left: -187px;
         background-image: url(images/logo.png);
         transition: all 1s;
      }

      .mail {
         float: left;
         height: 26px;
         text-indent: -9999px;
      }

      .mail-163 {
         float: left;
         width: 107px;
      }

      .mail-126 {
         float: left;
         width: 108px;
         margin-left: 23px;
      }

      .mail-yeah {
         float: right;
         width: 115px;
      }

      .bg21 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 819px;
         height: 250px;
         margin-left: -608px;
         margin-bottom: 40px;
         background: url(images/bg21.png) 0 0 no-repeat;
         transition: all 1s;
         opacity: 0;
         margin-left: -1108px;
      }

      .bg22 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 819px;
         height: 299px;
         margin-left: -280px;
         margin-bottom: 70px;
         background: url(images/bg22.png) right 0 no-repeat;
         transition: all 1s;
         opacity: 0;
         margin-left: 320px;
      }

      .bg23 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 819px;
         height: 325px;
         margin-left: -409px;
         background: url(images/bg23.png) 50% 0 no-repeat;
         transition: all 1s;
         bottom: -40%;
      }

      .section strong {
         position: absolute;
         left: 50%;
         top: 15%;
         z-index: 10;
         width: 512px;
         height: 45px;
         margin-left: -256px;
         font-size: 24px;
         font-weight: 500;
         color: #748A9E;
         opacity: 0;
         -webkit-transform: scale(0.5, 0.5);
         transform: scale(0.5, 0.5);
         transition: all 1s;
      }

      .section h3 {
         position: absolute;
         left: 50%;
         top: 15%;
         z-index: 10;
         width: 512px;
         height: 45px;
         margin-left: -256px;
         margin-top: 60px;
         text-indent: -9999px;
         background-repeat: no-repeat;
         opacity: 0;
         -webkit-transform: scale(0.5, 0.5);
         transform: scale(0.5, 0.5);
         transition: all 1s;
      }

      .p1 {
         position: absolute;
         left: 50%;
         top: 15%;
         width: 510px;
         margin-left: -255px;
         margin-top: 130px;
         font-size: 16px;
         color: #727F8C;
         opacity: 0;
         transition: all 1s;
      }

      .section2 h3 {
         background-image: url(images/t2.png);
      }

      .section3 h3 {
         background-image: url(images/t3.png);
      }

      .section4 h3 {
         background-image: url(images/t4.png);
      }

      .section5 h3 {
         background-image: url(images/t5.png);
      }

      .section6 strong {
         width: 561px;
         margin-left: -280px;
      }

      .section6 h3 {
         width: 561px;
         margin-left: -280px;
         background-image: url(images/t6.png);
      }

      .section7 strong {
         width: 561px;
         margin-left: -280px;
      }

      .section7 h3 {
         width: 561px;
         margin-left: -280px;
         background-image: url(images/t7.png);
      }

      .section8 strong {
         width: 561px;
         margin-left: -280px;
      }

      .section8 h3 {
         width: 561px;
         margin-left: -280px;
         background-image: url(images/t8.png);
      }

      .section9 strong {
         width: 609px;
         margin-left: -304px;
      }

      .section9 h3 {
         width: 609px;
         margin-left: -304px;
         background-image: url(images/t9.png);
      }

      .section9 h3 span {
         position: absolute;
         left: -100px;
         top: -48px;
         width: 89px;
         height: 90px;
         background-image: url(images/yixin.png);
      }

      .bg31 {
         position: absolute;
         left: 50%;
         bottom: 0;
         width: 892px;
         height: 472px;
         margin-left: -396px;
         margin-bottom: 80px;
         background-image: url(images/bg31.png);
         opacity: 0;
         transition: all 1s;
      }

      .bg32 {
         position: absolute;
         left: 50%;
         bottom: 0;
         width: 892px;
         height: 472px;
         margin-left: -396px;
         background: url(images/bg32.png) 470px bottom no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg33 {
         position: absolute;
         left: 50%;
         bottom: 0;
         width: 441px;
         height: 380px;
         margin-left: 50%;
         background: url(images/bg33.png) 0 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .p3 {
         position: absolute;
         width: 430px;
         left: 50%;
         top: 15%;
         margin-top: 250px;
         margin-left: -100%;
         font-size: 16px;
         color: #FFFDE1;
         opacity: 0;
         transition: all 1s;
      }

      .bg41 {
         position: absolute;
         bottom: -372px;
         width: 100%;
         height: 372px;
         background: url(images/bg41.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .bg42 {
         position: absolute;
         bottom: -449px;
         width: 100%;
         height: 449px;
         background: url(images/bg42.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .bg43 {
         position: absolute;
         bottom: -449px;
         width: 100%;
         height: 449px;
         margin-bottom: -130px;
         background: url(images/bg43.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .bg51, .bg52, .bg53, .bg54 {
         position: absolute;
         z-index: 1;
         width: 208px;
         left: 50%;
         bottom: 20%;
         padding-top: 210px;
         color: #fff;
      }

      .section5 h4 {
         margin-bottom: 12px;
         font-size: 23px;
         font-weight: 500;
      }

      .section5 p {
         font-size: 14px;
      }

      .bg51 {
         margin-left: -851px;
         background: url(images/bg51.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg52 {
         margin-left: -403px;
         background: url(images/bg52.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg53 {
         margin-left: 195px;
         background: url(images/bg53.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg54 {
         margin-left: 645px;
         background: url(images/bg54.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg61 {
         position: absolute;
         top: -454px;
         width: 100%;
         height: 545px;
         background: url(images/bg61.png) 50% 0 no-repeat;
         transition: all 1s;
      }

      .bg62 {
         position: absolute;
         left: 10%;
         bottom: 20%;
         width: 597px;
         height: 284px;
         margin-left: -507px;
         background-image: url(images/bg62.png);
         transition: all 1s;
      }

      .txt6 {
         position: absolute;
         left: 90%;
         bottom: 20%;
         width: 447px;
         margin-left: 90px;
         opacity: 0;
         transition: all 1s;
      }

      .txt6 p {
         margin-bottom: 17px;
         color: #5C7970;
      }

      .bg71 {
         position: absolute;
         left: 50%;
         bottom: -201px;
         width: 699px;
         height: 201px;
         margin-left: -630px;
         background: url(images/bg71.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg72 {
         position: absolute;
         left: 50%;
         bottom: -206px;
         width: 182px;
         height: 206px;
         margin-left: -170px;
         background: url(images/bg72.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg73 {
         position: absolute;
         left: 50%;
         bottom: 170px;
         width: 651px;
         height: 231px;
         margin-left: -530px;
         background: url(images/bg73.png) 50% 0 no-repeat;
      }

      .bg74 {
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
      }

      .bg74 img {
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         height: 251px;
      }

      .txt7 {
         position: absolute;
         left: 50%;
         bottom: -150px;
         width: 420px;
         margin-left: 100px;
         opacity: 0;
         transition: all 1s;
      }

      .txt7 p {
         margin-bottom: 17px;
         color: #EAEFF2;
      }

      .bg81 {
         position: absolute;
         width: 100%;
         bottom: 100px;
         height: 215px;
         background: url(images/bg81.png) 50% 0 no-repeat;
      }

      .bg82 {
         position: absolute;
         left: 50%;
         bottom: 160px;
         width: 164px;
         height: 117px;
         margin-left: -180px;
         background-image: url(images/bg82.png);
         opacity: 0;
         transition: all 1s;
      }

      .bg83 {
         position: absolute;
         left: 50%;
         bottom: 280px;
         width: 70px;
         height: 29px;
         margin-left: -330px;
         background-image: url(images/bg83.png);
         opacity: 0;
         transition: all 1s;
      }

      .bg84 {
         position: absolute;
         left: 50%;
         bottom: 320px;
         width: 43px;
         height: 26px;
         margin-left: -410px;
         background-image: url(images/bg84.png);
         opacity: 0;
         transition: all 1s;
      }

      .p8 {
         position: absolute;
         left: 50%;
         top: 15%;
         width: 565px;
         margin-left: -282px;
         margin-top: 130px;
         font-size: 16px;
         color: #727F8C;
         opacity: 0;
         transition: all 1s;
      }

      .bg91, .bg92, .bg93 {
         padding-top: 350px;
         font-size: 16px;
         color: #fff;
      }

      .bg91 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 340px;
         margin-left: -970px;
         background: url(images/bg91.png) 0 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg91 p {
         position: relative;
         left: 20px;
         margin-left: 40px;
         border-right: 1px solid #13AB86;
      }

      .bg92 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 340px;
         margin-left: -180px;
         background: url(images/bg92.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg92 p {
         position: relative;
         left: 40px;
         margin-left: 30px;
      }

      .bg93 {
         position: absolute;
         left: 50%;
         bottom: 15%;
         width: 340px;
         margin-left: 630px;
         background: url(images/bg93.png) 50% 0 no-repeat;
         opacity: 0;
         transition: all 1s;
      }

      .bg93 p {
         position: relative;
         left: -20px;
         padding-left: 100px;
         border-left: 1px solid #13AB86;
      }

      .bg101 {
         position: absolute;
         width: 100%;
         height: 100%;
         background: url(images/bg101.png) 50% 20% no-repeat;
      }

      .bg102 {
         position: absolute;
         width: 100%;
         top: 25%;
         height: 79px;
         background: url(images/bg102.png) 50% 0 no-repeat;
         opacity: 0;
         -webkit-transform: scale(0.5, 0.5);
         transform: scale(0.5, 0.5);
         transition: all 1s;
      }

      .bg103 {
         position: absolute;
         width: 100%;
         top: 25%;
         height: 37px;
         margin-top: 110px;
         background: url(images/bg103.png) 50% 0 no-repeat;
         opacity: 0;
         -webkit-transform: scale(0.5, 0.5);
         transform: scale(0.5, 0.5);
         transition: all 1s;
      }

      .go {
         position: absolute;
         left: 50%;
         top: 55%;
         width: 254px;
         height: 70px;
         margin-top: 220px;
         margin-left: -127px;
         text-indent: -9999px;
         background-image: url(images/btn.png);
         opacity: 0;
         transition: all 1s;
      }

      .copyright {
         position: absolute;
         left: 0;
         bottom: 20px;
         width: 100%;
         text-align: center;
         font-size: 0;
      }

      .copyright a, .copyright span {
         margin: 0 7px;
         font-size: 12px;
         color: #a0a0a0;
      }

      /* CSS3過度及動畫 */
      .active strong, .active h3 {
         opacity: 1;
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .active .p1 {
         opacity: 1;
         transition-delay: 1.7s;
      }

      .active .bg12 {
         bottom: 90px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg13 {
         bottom: 0;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .hgroup {
         opacity: 1;
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .active .mail {
         top: 25px;
         transition-delay: 0.7s;
      }

      .active .p11 {
         opacity: 1;
         transition-duration: 1s;
         transition-delay: 2s;
      }

      .active .bg21 {
         opacity: 1;
         margin-left: -608px;
         transition-delay: 0.7s;
      }

      .active .bg23 {
         bottom: 15%;
         transition-delay: 0.7s;
      }

      .active .bg22 {
         margin-left: -280px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .p3 {
         margin-left: -480px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg31, .active .bg32 {
         opacity: 1;
         transition-delay: 1s;
      }

      .active .bg33 {
         margin-left: -120px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg41 {
         bottom: 15%;
         transition-delay: 0.7s;
      }

      .active .bg42 {
         bottom: 15%;
         transition-delay: 1.1s;
      }

      .active .bg43 {
         bottom: 15%;
         transition-delay: 0.9s;
      }

      .active .bg51 {
         margin-left: -551px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg52 {
         margin-left: -253px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg53 {
         margin-left: 45px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg54 {
         margin-left: 345px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg61 {
         top: 0;
         transition-delay: 0.7s;
      }

      .active .bg62 {
         left: 50%;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .txt6 {
         left: 50%;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg71 {
         bottom: 250px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg72 {
         bottom: 350px;
         opacity: 1;
         transition-delay: 0.9s;
      }

      .active .txt7 {
         bottom: 420px;
         opacity: 1;
         transition-delay: 1.1s;
      }

      .active .bg82 {
         bottom: 260px;
         margin-left: -280px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg83 {
         bottom: 380px;
         margin-left: -430px;
         opacity: 1;
         transition-delay: 1s;
      }

      .active .bg84 {
         bottom: 420px;
         margin-left: -510px;
         opacity: 1;
         transition-delay: 1.2s;
      }

      .active .p8 {
         opacity: 1;
         transition-delay: 1.7s;
      }

      .active .bg91 {
         margin-left: -570px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg92 {
         opacity: 1;
         transition-delay: 0.8s;
      }

      .active .bg93 {
         margin-left: 230px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .active .bg102, .active .bg103 {
         opacity: 1;
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .active .go {
         top: 25%;
         opacity: 1;
         transition-delay: 1.2s;
      }

      /* for lt ie 10 */
      .ltie10 strong, .ltie10 h3 {
         opacity: 1;
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .ltie10 .p1 {
         opacity: 1;
         transition-delay: 1.7s;
      }

      .ltie10 .bg12 {
         bottom: 90px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg13 {
         bottom: 0;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .hgroup {
         opacity: 1;
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .ltie10 .mail {
         top: 25px;
         transition-delay: 0.7s;
      }

      .ltie10 .p11 {
         opacity: 1;
         transition-duration: 1s;
         transition-delay: 2s;
      }

      .ltie10 .bg21 {
         opacity: 1;
         margin-left: -608px;
         transition-delay: 0.7s;
      }

      .ltie10 .bg23 {
         bottom: 15%;
         transition-delay: 0.7s;
      }

      .ltie10 .bg22 {
         margin-left: -280px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .p3 {
         margin-left: -480px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg31, .ltie10 .bg32 {
         opacity: 1;
         transition-delay: 1s;
      }

      .ltie10 .bg33 {
         margin-left: -120px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg41 {
         bottom: 15%;
         transition-delay: 0.7s;
      }

      .ltie10 .bg42 {
         bottom: 15%;
         transition-delay: 1.1s;
      }

      .ltie10 .bg43 {
         bottom: 15%;
         transition-delay: 0.9s;
      }

      .ltie10 .bg51 {
         margin-left: -551px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg52 {
         margin-left: -253px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg53 {
         margin-left: 45px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg54 {
         margin-left: 345px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg61 {
         top: 0;
         transition-delay: 0.7s;
      }

      .ltie10 .bg62 {
         left: 50%;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .txt6 {
         left: 50%;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg71 {
         bottom: 250px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg72 {
         bottom: 350px;
         opacity: 1;
         transition-delay: 0.9s;
      }

      .ltie10 .txt7 {
         bottom: 420px;
         opacity: 1;
         transition-delay: 1.1s;
      }

      .ltie10 .bg82 {
         bottom: 260px;
         margin-left: -280px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg83 {
         bottom: 380px;
         margin-left: -430px;
         opacity: 1;
         transition-delay: 1s;
      }

      .ltie10 .bg84 {
         bottom: 420px;
         margin-left: -510px;
         opacity: 1;
         transition-delay: 1.2s;
      }

      .ltie10 .p8 {
         opacity: 1;
         transition-delay: 1.7s;
      }

      .ltie10 .bg91 {
         margin-left: -570px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg92 {
         opacity: 1;
         transition-delay: 0.8s;
      }

      .ltie10 .bg93 {
         margin-left: 230px;
         opacity: 1;
         transition-delay: 0.7s;
      }

      .ltie10 .bg102, .ltie10 .bg103 {
         opacity: 1;
         transform: scale(1, 1);
         transition-delay: 0.7s;
      }

      .ltie10 .go {
         top: 25%;
         opacity: 1;
         transform: scale(1, 1);
         transition-delay: 1.2s;
      }
   </style>
   <script src="js/jquery.min.js"></script>
   <script src="js/jquery-ui.min.js"></script>
   <script src="js/jquery.fullPage.min.js"></script>
   <script>
      $(function () {
         if ($.browser.msie && $.browser.version < 10) {
            $('body').addClass('ltie10');
         }
         $.fn.fullpage({
            verticalCentered: false,
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
            navigation: true,
            navigationTooltips: ['首頁', '視覺', '互動', '面板', '功能', '待辦郵件', '聯絡人郵件', '科技', '連線易信', '馬上體驗']
         });
      });
   </script>
</head>
<body>
<div class="section section1">
   <div class="bg"><img src="images/section1.jpg" alt=""></div>
   <div class="bg11"></div>
   <div class="bg12"></div>
   <div class="bg13"></div>
   <div class="mail">
      <a class="mail-163" href="http://www.17sucai.com/">163郵箱</a>
      <a class="mail-126" href="http://www.17sucai.com/">126郵箱</a>
      <a class="mail-yeah" href="http://www.17sucai.com/">yeah郵箱</a>
   </div>
   <div class="hgroup">
      <h1><a href="http://www.17sucai.com/">網易郵箱6.0</a></h1>
      <h2>改變，不止所見。</h2>
   </div>
   <p class="p11">網易郵箱6.0版&mdash;&mdash;2014年最具創意氣質的重量級新郵箱，重生光華，為之矚目。唯美<br>的視覺設計和視覺化互動，無可替代的獨創動態情景面板，多項國內創意產品專利技術，<br>成就無與倫比的出眾品味，無可比擬的美妙體驗。</p>
</div>

<div class="section section2">
   <div class="bg"><img src="images/section2.jpg" alt=""></div>
   <div class="bg21"></div>
   <div class="bg22"></div>
   <div class="bg23"></div>
   <strong>[ 視覺·簡 ]</strong>
   <h3>華麗蛻變，盡享愉悅之美</h3>
   <p class="p1">秉承網易郵箱經典的清新簡潔的設計風格，郵箱 6.0 版帶來全新一代的設計理念，更追求極致唯美的視覺設計、傳承更多人文和藝術底蘊，華麗蛻變，帶來更舒服更爽心悅目的視覺享受。</p>
</div>

<div class="section section3">
   <div class="bg"><img src="images/section3.jpg" alt=""></div>
   <div class="bg31"></div>
   <div class="bg32"></div>
   <div class="bg33"></div>
   <strong>[ 視覺化互動設計 ]</strong>
   <h3>心隨眼動，感官直接體驗</h3>
   <p class="p3">郵箱 6.0 版採用了全新的視覺化互動設計，通過對介面的整體風格設計、重要資訊的視覺化處理以及元素本身的視覺傳達優化，來實現產品流程設計和互動行為塑造。從視覺的角度出發，讓使用者無需多想，直接通過感官與產品進行互動。</p>
</div>

<div class="section section4">
   <div class="bg"><img src="images/section4.jpg" alt=""></div>
   <div class="bg41"></div>
   <div class="bg42"></div>
   <div class="bg43"></div>
   <strong>[ 動態情景面板 ]</strong>
   <h3>美輪美奐，百變盡隨你心</h3>
   <p class="p1">國內首創動態情景面板，可以隨著早晚時光，季節主題的變幻而自動切換，實現了在郵箱裡也能感受天氣和心情的變化，帶來完全不同的頁面體驗並且呈現最佳視覺感受，還特別針對原有郵箱面板的對比度和色彩進行了微調，減少視覺疲勞感。</p>
</div>

<div class="section section5">
   <div class="bg"><img src="images/section5.jpg" alt=""></div>
   <strong>[ 功能·創 ]</strong>
   <h3>靈活機變，全面為你而生</h3>
   <div class="bg51">
      <h4>新語音視訊郵件</h4>
      <p>寫信不再枯燥！線上錄製和播放聲音和視訊郵件，比單純的文字郵件更感性、更方便，更好玩。</p>
   </div>
   <div class="bg52">
      <h4>虛擬場景寫信模式</h4>
      <p>寫信可以選擇自己喜歡的場景，配合美妙的背景音樂，讓寫信<br>變得更為有趣和生動。</p>
   </div>
   <div class="bg53">
      <h4>獨創智慧體檢</h4>
      <p>網易郵箱6.0版幫你關注郵箱安全，提醒你及時清理郵件，打<br>造輕量級郵箱。</p>
   </div>
   <div class="bg54">
      <h4>全新多帳號關聯</h4>
      <p>一鍵關聯和切換多個網易郵箱，同時對於重要的郵箱帳號進行<br>密碼驗證保護。</p>
   </div>
</div>

<div class="section section6">
   <div class="bg"><img src="images/section6.jpg" alt=""></div>
   <div class="bg61"></div>
   <div class="bg62"></div>
   <strong>[ 待辦郵件 ]</strong>
   <h3>辦公利器，工作更高效順手</h3>
   <div class="txt6">
      <p>獨家首創郵件管理方式：待辦郵件<br>採用日程的方式第一時間分配和提醒郵件！</p>
      <p>對於需要後續處理的重要郵件，如果正忙來不及處理和回覆，只需設定為待辦郵件，在待辦時間到期時，郵件會在資料夾置頂提示或採用簡訊方式提醒。</p>
      <p>如此高效迅速處理郵件，讓郵件處理過程變成更輕鬆和快捷。</p>
   </div>
</div>

<div class="section section7">
   <div class="bg"><img src="images/section7.jpg" alt=""></div>
   <div class="bg71"></div>
   <div class="bg72"></div>
   <div class="bg73"></div>
   <strong>[ 聯絡人郵件 ]</strong>
   <h3>一目瞭然，來往郵件更清晰</h3>
   <div class="txt7">
      <p>郵箱6.0版帶來一種極其簡便的方式，管理你和聯絡人的<br>郵件往來，幫助你精準定位到以聯絡人為維度的郵件列表。</p>
      <p>同時支援以聯絡組方式來管理郵件，方便以群或相同關係<br>的群體間的郵件管理，比如：同學組，客戶組，公司組等。</p>
   </div>
   <div class="bg74"><img src="images/bg74.png" alt=""></div>
</div>

<div class="section section8">
   <div class="bg"><img src="images/section8.jpg" alt=""></div>
   <div class="bg81"></div>
   <div class="bg82"></div>
   <div class="bg83"></div>
   <div class="bg84"></div>
   <strong>[ 科技.聚 ]</strong>
   <h3>厚積薄發，大幅度提速創新標</h3>
   <p class="p8">郵箱6.0版帶來“飛”一般的訪問體驗，速度提升達30%。採用全新base基礎庫bjs，更加輕量級，效能更加優化，完全相容國內使用者使用的所有瀏覽器，以及基於"多核"多執行緒的核心js引擎，效能和訪問速度大幅提升。</p>
</div>

<div class="section section9">
   <div class="bg"><img src="images/section9.jpg" alt=""></div>
   <strong>[ 讓溝通更有趣 ]</strong>
   <h3><span></span>溝通無界，連線易信無縫整合</h3>
   <div class="bg91">
      <p>易信掃描二維碼即可登入網易<br>郵箱6.0版，“掃一掃”讓郵<br>箱登入更方便。</p>
   </div>
   <div class="bg92">
      <p>登入郵箱後，可直接使用Web<br>易信和好友聊天，還可以發圖<br>片，讓聊天更有趣。</p>
   </div>
   <div class="bg93">
      <p>易信和郵箱新郵件同步提醒，<br>在易信可以直接檢視和回覆<br>郵件，手機收發郵件更快捷。</p>
   </div>
</div>

<div class="section section10">
   <div class="bg"><img src="images/section10.jpg" alt=""></div>
   <div class="bg101"></div>
   <div class="bg102"></div>
   <div class="bg103"></div>
   <a class="go" href="http://www.17sucai.com/">馬上體驗</a>
   <p class="copyright">

   </p>
</div>
</body>
</html>

網易郵箱頁面特效

百度網盤： https://pan.baidu.com/s/1cZosAQgaGC_0RJH_BE0qyg 網易 fullpafe 檔案 http://www.17sucai.com/pins/demo-show?id=5876 一個jq檔案一個f

HTML+CSS專案課2：利用table和表單製作“網易郵箱註冊頁面”

知識點：html文件基本結構、table標籤佈局、表單標籤的使用、img標籤、a標籤、p標籤等常見標籤的使用。製作網頁效果：網頁製作思路： 1、將整個網頁分成4部分：3個表格+底部段落文字（3個表格設定同樣的寬度，水平居中，邊框為0等屬性） 2、表格1

HTML 網頁製作網易郵箱登入頁面關鍵程式碼

<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網易郵箱登入</title> </head></

網易註冊頁面知識點

mce a標簽下劃線 header isp 一行又能知識 box header 頁眉 content 內容 footer 頁腳盒子居中 margin: 0 auto; links 鏈接 no-repeat 不平鋪父子關系用padding 盒子變大用box-s

織夢網站使用網易郵箱發送郵件

body .com 郵件 png 技術分享 clas 參數使用基本 1. 進入網易郵箱，根據提示開通SMTP，期間要設置一次密碼 2. 進入織夢網站後臺。系統 - 系統基本參數 - 核心設置網站發信EMAIL：填寫網易郵箱是否啟用smtp方式發送郵件：

為什麽用網易郵箱

手機網站郵箱收信自己網易無法訪問直接為什麽網易郵箱在收發郵件方面非常專業，能收到來自Google、FB、Twitter等正常情況下國內無法訪問的網站的郵件，相比如QQ、139等郵箱要麽收信非常慢，要麽就幹脆直接屏蔽掉來自這麽網站的郵箱，導致用戶根本就不

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb

python學習（5）--網易郵箱發郵件異常解決辦法

python發郵件解決辦法如下 nbsp -- bsp err error 發郵件 png 在用python發郵件時，發現用網易郵箱作為發件人。會出現以下異常： smtplib.SMTPDataError: (554, b‘DT:SPM 163 smtp12,EMCo

java+selenium 實現網易郵箱登入功能

今天學習selenium ，折騰了一整天，寫個筆記記錄一下今天的錯誤。我用的是java+webdriver，在eclipse中執行，今天的學習是進行網易郵箱的登入功能。一開始程式碼執行一直報找不到元素，而我試用了id，xpath等方法都失敗了。差不多的程式碼，在百度上卻能正常登入，我搜索了一下，發現是

[IT資訊]網易郵箱從3.5版本更新到極速4.0版本

今天，在登入網易郵箱時發現網易已經從原來的極速3.5版本更新到極速4.0版本，而且微調了郵箱內部使用風格，預設多頁面，顯示資料夾中未讀郵件等，顯得很直觀，很方便。而且預設登入的模式已經是4.0版本了。極速4.0 (2011-06-22)網易郵箱極速4.0啟用全新第四代Ajax引擎，全面支援 HTML5標準，對

JSP: 使用網易郵箱傳送帶附件的電子郵件

JSP程式碼：使用javax.mail和activation傳送郵件首先我們需要兩個jar包，javax.mail.jar和activation.jar，官方下載地址：不管使用什麼郵箱傳送右鍵，我們都需要開啟SMTP服務，比如網易郵箱：開啟服務之後，你

HTML自定義滾動條（仿網易郵箱滾動條）

自定義滾動條在web前端非常火爆的今天，好的介面可以給人們很好的體驗。瀏覽器的滾動條總是千篇一律，那麼滾動條是否可以自定義呢？網上好多自定義滾動條通過CSS樣式來設定的，但是這種做法只有IE支援，那麼谷歌瀏覽器是否也可以自定義滾動條呢？前一段時間瀏覽網易郵箱的時候發現它上面的滾

使用JavaMail進行簡單SMTP郵件傳送測試，從網易郵箱傳送到QQ郵箱

===========TLS版本=========== 本文使用的JavaMail版本為1.5.2 import java.util.Properties; import javax.mail.Authenticator; import javax.mail.Messa

Python使用SMTP傳送郵件（163，yeah等網易郵箱已測試可以）

#! /usr/bin/env python # -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText

網易郵箱如何群發郵件

網頁郵箱是目前國內使用人數比較多的郵箱之一，今天一米軟體就來告訴大家網易郵箱如何群發郵件。領先郵、領航郵支援一次性發送100個收件人;尊享郵支援一次傳送200個收件人;尊藏郵、尊耀郵支援一次性發送400個收件人。您郵件群發地址可以分佈在收件人、抄送和密

爬蟲技術 -- 進階學習（十）網易新聞頁面資訊抓取（htmlagilitypack搭配scrapysharp）

最近在弄網頁爬蟲這方面的，上網看到關於htmlagilitypack搭配scrapysharp的文章，於是決定試一試~ 於是到https://www.nuget.org/packages/ScrapySharp去看看，看到這句下載提示：To install ScrapySharp, run the fo

網易郵箱申請多少錢、新浪郵箱多少錢、TOM VIP呢？

隨心網易網易郵箱新浪官網阿裏 log 功能性 tom 網易郵箱申請多少錢？新浪郵箱多少錢？TOMVIP多少錢？VIP郵箱應該如何選擇？今天小編就幫大家介紹下國內三大郵箱的價格。一、TOM VIP郵箱網易郵箱申請多少錢、阿裏郵箱多少錢、TOM VIP呢？商務白

C#使用 MailKit獲取郵件中的附件(QQ郵箱/163網易郵箱)

背景介紹：VS2017 | .net core | C# | .netframwork 4.0-----------------------------------------------------------------------這東西本來沒打算記的，主要是連線郵件伺

MUI+H5開發移動APP/網易郵箱大師專案實戰/Android、IOS跨平臺應用開發-王翠英-專題視訊課程...

MUI+H5開發移動APP/網易郵箱大師專案實戰/Android、IOS跨平臺應用開發—488人已學習課程介紹 MUI從基礎到精通的全方位講解，系統介紹了移動APP開發基礎、MUI各類元件、側滑選單、MUI事件管理、MUI視窗管理、底部選項卡切換的多種方式、M

QQ郵箱、網易郵箱、TOM企業郵箱市場上的郵箱該如何選用

推出增加郵件系統感覺郵件系青年郵件電腦用戶大多數想購買郵箱的用戶都會面對這樣的困惑：市場上這麽多的郵箱品牌，而且每家都宣傳的不錯，怎麽分辨呢？總不能拿郵箱當小白鼠一個一個測試，來最終決定哪個郵箱好就用哪個吧?！隨著互聯網的飛速發展，郵箱也在不斷提升著自身的

網易郵箱頁面特效

相關推薦