https://www.cnblogs.com/zhangyangguo-er/p/10539978.html
code:
1 <!DOCTYPE html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Smallcolor</title> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 6 <meta name="description" content="Smallcolor"> 7 <meta name="keywords" content="Smallcolor"> 8 <meta name="author" content="BOX STUDIO"> 9 <meta name="viewport" content="width=device-width,user-scalable=no"> 10 <link rel="shortcut icon" href="favicon.ico"> 11 <link rel="stylesheet" href="./styles/master.css"> 12 <audio src=" " ></audio> 13 </head> 14 <audio autoplay="autoplay" loop="loop"> 15 <source src= "mc/background.mp3" type="audio/mpeg"> 16 </audio> 17 18 <body id="teaser-page"> 19 <div class="l-stage"><main> 20 <div class="l-intro"> 21 <div class="intro-btn-skip"><a id="s_st" href="#">S_ST</a></div> 22 </div> 23 <div class="l-main"> 24 <div class="l-first"> 25 <div class="first-bg"></div> 26 <div class="first-flare-wrap"> 27 <div class="first-flare01"></div> 28 <div class="first-flare02"></div> 29 </div> 30 <div class="first-megumi-back"></div> 31 <div class="first-megumi-front"></div> 32 <div class="first-text-wrap"> 33 <div class="first-text-main"> 34 <img src="./images/teaser/main_text.png" width="416" height="442" class="pcv"> 35 <img src="./images/teaser/main_text_sp.png" class="spv"> 36 </div> 37 <div class="first-text"> 38 <span class="t1"></span> 39 <span class="t2"></span> 40 <span class="t3"></span> 41 <span class="t4"></span> 42 <span class="t5"></span> 43 <span class="t6"></span> 44 <span class="t7"></span> 45 <span class="t8"></span> 46 <span class="t9"></span> 47 <span class="t10"></span> 48 <span class="t11"></span> 49 <span class="t12"></span> 50 <span class="t13"></span> 51 <span class="t14"></span> 52 <span class="t15"></span> 53 <span class="t16"></span> 54 <span class="t17"></span> 55 <span class="t18"></span> 56 <span class="t19"></span> 57 <span class="t20"></span> 58 <span class="t21"></span> 59 <span class="t22"></span> 60 <span class="t23"></span> 61 <span class="t24"></span> 62 <span class="t25"></span> 63 <span class="t26"></span> 64 <span class="t27"></span> 65 <span class="t28"></span> 66 <span class="t29"></span> 67 <span class="t30"></span> 68 <span class="t31"></span> 69 </div> 70 </div> 71 <div class="sakura-front"> 72 <div class="sakura-front-l"></div> 73 <div class="sakura-front-m"></div> 74 <div class="sakura-front-s"></div> 75 </div> 76 </div> 77 <div class="l-fix"></div> 78 <div class="l-second"> 79 <div class="sakura-back"> 80 <div class="sakura-back-l"></div> 81 <div class="sakura-back-m"></div> 82 <div class="sakura-back-s"></div> 83 </div> 84 <div class="l-movie"> 85 <div class="movie-ss"></div> 86 <div id="movie-player"></div> 87 <div class="news-btn-more"> 88 <a target="_blank" href="#">is my house</a> 89 </div> 90 91 <div class="movie-btn"> 92 <div class="movie-btn-play"> 93 94 <img src="./images/teaser/main_movie_btn_play.png" width="600" height="300"> 95 </a> 96 </div> 97 </div> 98 </div> 99 <div class="l-news-wrap"> 100 <div class="l-news"> 101 <div class="news-btn-more"> 102 <a target="_blank" href= "Web Page 1.html">Personal experience</a> 103 </div> 104 </div> 105 <div class="l-twitter"> 106 <div class="twitter-btn-more"> 107 <a target="_blank" href= "Web Page 3.html">Self -introduction</a> 108 </div> 109 </div> 110 </div> 111 <footer class="l-footer"> 112 <p class="footer-copy">Copyright 2014 - 2019 ****** All Rights Reserved</p> 113 </footer> 114 </div> 115 </div> 116 </main></div><script src="./scripts/libs.min.js"></script><script src="./scripts/functions.min.js"></script></body></html> 117 118 <!DOCTYPE html> 119 <html> 120 <head> 121 <meta charset="UTF-8"> 122 <title>web page 1</title> 123 </head> 124 <body> 125 <table border="0" height="400px" width="300px"> 126 <tr> 127 128 <h1 align="center">My personal experience The first time I came to Qinghai University for the first time in August 2017. This is the longest trip to home and the longest time.</h1> 129 <h2 align="center"></h2> 130 <h2 align="center">At the beginning, because of confusion, I added a lot of society, and my freshman was a busy year. But I also met many interesting people.</h2> 131 <h2 align="center">Sign up for the semester to participate in English level 4, and the result failed. The second semester of the second semester failed again.</h2> 132 <h2 align="center">The conclusion of the conclusion that the naked test strategy will eventually fail.</h2> 133 <h2 align="center">According to the lesson of the freshman year, I feel that the sophomore is converging as a whole, and is working hard to transform into a person who loves to learn.</h2> 134 135 <img src="images/teaser/gIGWYHC.jpg"width="1350" height="500"> 136 137 </tr> 138 139 </table> 140 </body> 141 </html> 142 143 <!DOCTYPE html> 144 <html> 145 <head> 146 <meta charset="UTF-8"> 147 <title>Web 3</title> 148 </head> 149 <body> 150 <table border="0" height="400px" width="300px"> 151 <tr> 152 153 <h1 align="center">This is Pan Qian's self -introduction</h1></td> 154 <h2 align="center">  I like to play, but the prerequisite is that someone is crazy with me. I like to read books, like listening to music, and can adapt to group life and can stay alone.</h2></td> 155 <h2 align="center">  The favorite novel is Jiangnan's "Dragon" (strong Amway), which has been chased for about 9 years, and has not finished.</h2></td> 156 <h2 align="center">  I don't like to play games, (in fact, I am not enough to support myself to play large mobile games).</h2></td> 157 <h2 align="center">  The biggest advantage is that it is probably not good. It will dispel the air within ten minutes of quarrel and start self -examination.</h2></td> 158 <h2 align="center">  The last thing I regret my life is to eat too much when I was a kid.</h2></td> 159 <img src> 160 <img src="images/teaser/6a440d88fc5629eb86257dc548d6c394.jpg"width="1000" height="500"> 161 </a> 162 </td> 163 </tr> 164 165 </table> 166 </body> 167 </html>
css:
1 <!DOCTYPE html>
2 <html><head> 3 <meta charset="utf-8"> 4 <title>Smallcolor</title> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 6 <meta name="description" content="Smallcolor"> 7 <meta name="keywords" content="Smallcolor"> 8 <meta name="author" content="BOX STUDIO"> 9 <meta name="viewport" content="width=device-width,user-scalable=no"> 10 <link rel="shortcut icon" href="favicon.ico"> 11 <link rel="stylesheet" href="./styles/master.css"> 12 </head> 13 14 <body id="teaser-page"> 15 <div class="l-stage"><main> 16 <div class="l-intro"> 17 <div class="intro-btn-skip"><a id="s_st" href="#">S_ST</a></div> 18 </div> 19 <div class="l-main"> 20 <div class="l-first"> 21 <div class="first-bg"></div> 22 <div class="first-flare-wrap"> 23 <div class="first-flare01"></div> 24 <div class="first-flare02"></div> 25 </div> 26 <div class="first-megumi-back"></div> 27 <div class="first-megumi-front"></div> 28 <div class="first-text-wrap"> 29 <div class="first-text-main"> 30 <img src="./images/teaser/main_text.png" width="416" height="442" class="pcv"> 31 <img src="./images/teaser/main_text_sp.png" class="spv"> 32 </div> 33 <div class="first-text"> 34 <span class="t1"></span> 35 <span class