课后作业静态网页制作-仿rollingstone官网

来源：互联网发布：ieee 802.11 mac协议编辑：程序博客网时间：2024/05/17 04:54

html源代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <link rel="stylesheet" href="./global.css"></head><body>  <div class="container">    <div class="header">      <a class="email"href="mailto:552626962@qq.com?subject=Iloveyou&cc=552626962@qq.com&body=hello world">        Follow @RollingStone      </a>      <img src="./images/global-logo-rs.svg" alt="">        <span>          <a href="">SUBSCRIBE</a> <br>          <i>            <input type="search">            <input class="button" type="submit">          </i>        </span>        <ul>          <li><a href="#"><img class="music preview" src="./images/music.png" alt=""> MUSIC</a></li>          <li><a href="#"><img class="politics preview" src="./images/politics.png" alt=""> POLITICS</a></li>          <li><a href="#"><img class="tv preview" src="./images/tv.png" alt=""> TV</a></li>          <li><a href="#"><img class="movies preview" src="./images/movies.png" alt=""> MOVIES</a></li>          <li><a href="#"><img class="culture preview" src="./images/culture.png" alt=""> CULTURE</a></li>          <li><a href="#"><img class="sports preview" src="./images/sports.png" alt=""> SPORTS</a></li>          <li><a href="#"><img class="reviews preview" src="./images/reviews.png" alt=""> REVIEWS</a></li>          <li><a href="#"><img class="lists preview" src="./images/lists.png" alt=""> LISTS</a></li>          <li><a href="#"><img class="country preview" src="./images/country.png" alt=""> RS COUNTRY</a></li>          <li><a href="#"><img class="coverwall preview" src="./images/coverwall.png" alt=""> COVERWALL</a></li>        </ul>    </div>    <div class="main">      <div class="lside">        <div class="news">          <div class="breaking"><span><a href="#">BREAKING</a></span></div>          <span><img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a>          </span>        </div>        <a href="#" class="first">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>6 HOURS AGO</span>        </a>        <a href="#" class="second">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>8 HOURS AGO</span>        </a>        <a href="#" class="third">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>13 HOURS AGO</span>        </a>        <div class="fourth">          <img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a> <br>            <span>14 HOURS AGO</span>        </div>        <a href="#" class="first">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>6 HOURS AGO</span>        </a>        <a href="#" class="second">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>8 HOURS AGO</span>        </a>        <a href="#" class="third">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>13 HOURS AGO</span>        </a>        <div class="fourth">          <img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a> <br>            <span>14 HOURS AGO</span>        </div>        <a href="#" class="first">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>6 HOURS AGO</span>        </a>        <a href="#" class="second">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>8 HOURS AGO</span>        </a>        <a href="#" class="third">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>13 HOURS AGO</span>        </a>        <div class="fourth">          <img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a> <br>            <span>14 HOURS AGO</span>        </div>        <a href="#" class="first">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>6 HOURS AGO</span>        </a>        <a href="#" class="second">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>8 HOURS AGO</span>        </a>        <a href="#" class="third">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>13 HOURS AGO</span>        </a>        <div class="fourth">          <img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a> <br>            <span>14 HOURS AGO</span>        </div>        <a href="#" class="first">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>6 HOURS AGO</span>        </a>        <a href="#" class="second">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>8 HOURS AGO</span>        </a>        <a href="#" class="third">Asrtonomers Pay Tribute to <br/>Bowie With New Constellation <br/>            <span>13 HOURS AGO</span>        </a>        <div class="fourth">          <img src="./images/100x100-GettyImages-494553854.jpg" alt="">            <a href="">Rouda Rousey.Tina<br>Fey to Team for 'Do<br>Nothing Bitches'<br>            Comedy</a> <br>            <span>14 HOURS AGO</span>        </div>      </div>      <div class="middle">        <div class="crywoman">          <img class="crywoman"src="./images/510x429-20160115_Movies_25_1_HP.jpg" alt="crywoman">          <a href="#" class="cry_article">30 Great Movies Turning20 <br/>              <span>From 'Fargo'to'Scream,'these films hit the big 2-0 this year</span>          </a>        </div>        <div class="feature">          <a class="word" href="#">  THE <strong>FEATURE</strong> WELL  </a>        </div>        <div class="feature1">          <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>            <div class="tv_word">              <a href="">                <span>TV</span>                <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                  left out of the documentary.                </p>              </a>            </div>        </div>        <div class="feature1">          <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>            <div class="tv_word">              <a href="">                <span>TV</span>                <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                  left out of the documentary.                </p>              </a>            </div>        </div>        <div class="feature1">          <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>            <div class="tv_word">              <a href="">                <span>TV</span>                <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                  left out of the documentary.                </p>              </a>            </div>          </div>          <div class="xlz">              <img src="./images/510x287-leo-opener.jpg" alt="xiaolizi"/>                <div class="xlz_word">                  <a href="">                    <span>MAN</span>                    <h5>Leonardo Dicaprio's<br>Crusade:Inside the <br>New Issue</h5>                  </a>                </div>          </div>          <div class="feature1">            <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>              <div class="tv_word">                <a href="">                  <span>TV</span>                  <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                  <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                    left out of the documentary.                  </p>                </a>              </div>            </div>            <div class="feature1">              <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>                <div class="tv_word">                  <a href="">                    <span>TV</span>                    <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                    <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                      left out of the documentary.                    </p>                  </a>                </div>            </div>            <div class="feature1">              <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>                <div class="tv_word">                  <a href="">                    <span>TV</span>                    <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                    <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                      left out of the documentary.                    </p>                  </a>                </div>            </div>            <div class="xlz">                <img src="./images/510x287-leo-opener.jpg" alt="xiaolizi"/>                  <div class="xlz_word">                    <a href="">                      <span>MAN</span>                      <h5>Leonardo Dicaprio's<br>Crusade:Inside the <br>New Issue</h5>                    </a>                  </div>            </div>            <div class="feature1">              <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>                <div class="tv_word">                  <a href="">                    <span>TV</span>                    <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                    <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                      left out of the documentary.                    </p>                  </a>                </div>            </div>            <div class="feature1">              <img src="./images/510x287-FRD-19618r.jpg" alt="movies"/>                <div class="tv_word">                  <a href="">                    <span>TV</span>                    <h5>'Making a Murderer':What<br>Evidence Was Left Out?</h5>                    <p>Jerry Buting discusses bones,bullets,burn pits <br>and the details                      left out of the documentary.                    </p>                  </a>                </div>            </div>        </div>      </div>      <div class="rside">          <a href=""><img src="./images/300x169-RSARTICLE-projectC.png" alt="uglyman"></a>          <div class="speaks">            <h3>El Chaopo Speaks</h3>            <span>By sean penn</span>            <p>A secret visit with the most wanted man in the <br>world</p>            <ul>              <li><a href="">El Chapo Habla:La Enrevista Con Sean Penn en Espanol</a></li>              <li><a href="">The life and Crimes of El Chapo</a></li>              <li><a href="">El Chapo Habla:La Enrevista Con Sean Penn en Espanol</a></li>              <li><a href="">The life and Crimes of El Chapo</a></li>            </ul>          </div>          <p class="title">MUSIC REVIEWS</p>          <div class="music_re">            <img src="./images/boy.png" alt="">            <img src="./images/boy.png" alt="">            <img class="star" src="./images/star.png" alt="">            <img class="star" src="./images/star.png" alt="">            <p><span>Sia</span><br>This Is Acting</p>            <p><span>Rick Ross</span><br>Black Market</p>            <img src="./images/boy.png" alt="">            <img src="./images/boy.png" alt="">            <img class="star" src="./images/star.png" alt="">            <img class="star" src="./images/star.png" alt="">            <p><span>Sia</span><br>This Is Acting</p>            <p><span>Rick Ross</span><br>Black Market</p>            <a href="#">More Music Reviews>></a>          </div>          <p class="title">INTERVIEWS</p>          <div class="interviews">            <div class="photo">              <img src="./images/RR-GettyImages-501172040-Hailee-Steinfeld.png" alt="">              <p><span>HAILEE STEINFELD</span><br>"Love Myself" singer on<br>                recording her new album <br>this year              </p>              <a href="#">READ MORE>></a>            </div>            <div class="photo">              <img src="./images/RR-GettyImages-501172040-Hailee-Steinfeld.png" alt="">              <p><span>HAILEE STEINFELD</span><br>"Love Myself" singer on<br>                recording her new album <br>this year              </p>              <a href="#">READ MORE>></a>            </div>            <div class="photo">              <img src="./images/RR-GettyImages-501172040-Hailee-Steinfeld.png" alt="">              <p><span>HAILEE STEINFELD</span><br>"Love Myself" singer on<br>                recording her new album <br>this year              </p>              <a href="#">READ MORE>></a>            </div>            <div class="photo">              <img src="./images/RR-GettyImages-501172040-Hailee-Steinfeld.png" alt="">              <p><span>HAILEE STEINFELD</span><br>"Love Myself" singer on<br>                recording her new album <br>this year              </p>              <a href="#">READ MORE>></a>            </div>          </div>          <p class="title">AROUND THE WEB</p>          <div class="around">            <img class="col1" src="./images/around.png" alt="">            <img class="col2" src="./images/around.png" alt="">            <p><a href="#">The Rotten Tomatoes<br>Awards of 2015</a></p>            <p class="around_word1"><a href="#">The Rotten Tomatoes<br>Awards of 2015</a></p>            <img class="col1" src="./images/around.png" alt="">            <img class="col3" src="./images/around.png" alt="">            <p><a href="#">The Rotten Tomatoes<br>Awards of 2015</a></p>            <p class="around_word2"><a href="#">The Rotten Tomatoes<br>Awards of 2015</a></p>            <p id="small">POWERED BY <span>ZERGNET</span></p>          </div>      </div>    </div>    <div class="footer">      <div class="lfooter">        <div class="flowon">        <img src="./images/flowon.png" alt="" />        <ul>          <li><img src="./images/icon_01.png" alt=""></li>          <li><img src="./images/icon_02.png" alt=""></li>          <li><img src="./images/icon_03.png" alt=""></li>          <li><img src="./images/icon_04.png" alt=""></li>        </ul>        <ul>          <li><img src="./images/icon_05.png" alt=""></li>          <li><img src="./images/icon_06.png" alt=""></li>          <li><img src="./images/icon_07.png" alt=""></li>          <li><img src="./images/icon_08.png" alt=""></li>        </ul>        </div>      </div>      <div class="mfooter">        <p>ROLLING STONE NEWSLETTER</p>        <a id="sign" href="#">Sign up for the latest news,lists & video</a>        <input type="text" placeholder="Enter email address">        <button type="button" name="button">SUBMIT</button>        <a id="how" href="#">How we use your email address» </a>      </div>      <div class="rfooter">        <div class="land">        <img src="./images/xiaolizi.jpg" alt="">        <img src="./images/latest.png" alt="">        <ul>          <li><a href="#">Digital Edition</a></li>          <li><a href="#" class="red_w">Subscibe</a></li>          <li><a href="#">Give a Gift</a></li>        </ul>        </div>      </div>      <div class="copyright">        <small>&copy; 2016 Rolling Stone <a href="#">Coverall</a> <a href="#">Contact</a>          <a href="#">Privacy Policy</a>  <a href="#">Your Privacy Rights</a> <a href="#">Your Ad Choices</a> <a href="">Data Policy</a>          <a href="#">Terms of Use</a> <a href="#">Customer Service</a> <a href="#">Advertise</a> <a href="#">Sitemap</a>        </small>      </div>    </div>  </div></body></html>

css源代码：

*{  margin: 0;  padding: 0;}.container{  outline: none;  margin: 0 auto;  width: 100%;  height: 2560px;  overflow: hidden;}.header{  width: 1041px;  margin:0 auto;}.header img{  width: 406px;  margin: 6px 32px 0px 118px;}.email{  font: 17px/0px "Times New Roman";  color: #be1e1e;  display: block;  float: left;  text-decoration: none;  margin-left: 10px;  margin-top: 45px;}.header ul{  width: 100%;  border-top: 1px solid black;  border-bottom: 5px solid black;  list-style-type: none;  text-align: center;  padding-bottom: 5px;  clear: both;}.header ul li{  width: auto;  height: auto;  display: inline-block;  margin:0 0 0 22px;  position: relative;}.header ul li a{  font: 15px/30px "Huawenheiti","MicrosoftYahei","arial";  text-shadow: 1px 1px 1px;  font-weight: 900;  text-decoration: none;  color: black;} ul li:nth-child(9) a{  color: #be1e1e;}.header span{  width: 302px;  float: right;  display:block;  text-align: right;  margin-top: 10px;  margin-right: 0;  margin-bottom: 15px;}input[type="search"] {    width: 202px;    height: 44px;    border:1px solid transparent;    background:url("./images/search_03.png")}.header .button {    width: 33px;    height: 41px;    border: transparent;    background: transparent;    margin-left:-40px;    display: inline-block;    color: transparent;}.header span a{  text-decoration: none;  font:14px/35px "Huawenheiti";  text-shadow: 1px 1px 1px;  color:black;}.header i{display:block;float: right;}.header li a:hover{  color: #39f;  text-shadow: 1px 1px 1px;  font-weight: 900;  text-decoration: none;  background: #be1e1e;}a{  -webkit-transition: all 0.3s ease-out;  text-decoration: none;}li img{  -webkit-transition: all 0.5s ease-out;}ul li:nth-child(9) a:hover{  color: #be1e1e;  text-shadow: 1px 1px 1px;  font-weight: 900;  text-decoration: none;  background: #b09161;}.preview{  z-index: 9;  display: none;}a:hover .music {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -200px;}a:hover .politics {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -280px;}a:hover .tv {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -380px;}a:hover .movies {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -425px;}a:hover .culture {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -515px;}a:hover .sports {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -615px;}a:hover .reviews {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -705px;}a:hover .lists {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -800px;}a:hover .country {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -870px;}a:hover .coverwall {  width: 1041px;  height: 350px;  display: block;  position: absolute;  top: 35px;  left: -999px;}.main{  width: 1041px;  margin: auto;}.lside{  width: 197px;  height: 3183px;  margin-right: 15px;  float: left;  overflow: hidden;}.news span img{  width: 56px;  height: 56px;  display: block;  margin-right: 15px;  margin-bottom: 30px;  float: left;}.news span{  width: 100%;  display: inline-block;}.news span a{  font: 15px/19px "Times New Roman";  display: inline-block;  color: black;  text-shadow: 0.5px 0.5px 0.5px;}.news{  border-bottom: 1px solid grey;  height: 150px;}.breaking{  height: 30px;  border-top:8px double #be1e1e;  border-bottom: 8px double #be1e1e;  text-align: center;  margin-bottom: 12px;}.breaking span{  width: 100%;  color: white;  background-color: #be1e1e;  font:20px/30px "Times New Roman";}.breaking span a{  color: white;  background-color: #be1e1e;  font:20px/20px "Times New Roman";  text-decoration: none;}.first{  width: 100%;  height: 63px;  font: 15px/19px "Times New Roman";  display: inline-block;  margin-top: 20px;  margin-bottom: 0px;  border-bottom: 1px solid lightgray;  text-shadow: 0.5px 0.5px 0.5px;  color: black;}.second{  width: 100%;  height: 82px;  font: 15px/19px "Times New Roman";  display: inline-block;  margin-top: 40px;  margin-bottom: 0px;  border-bottom: 1px solid lightgray;  text-shadow: 0.5px 0.5px 0.5px;  color: black;}.third{  width: 100%;  height: 70px;  font: 15px/19px "Times New Roman";  display: inline-block;  margin-top: 13px;  margin-bottom: 0px;  border-bottom: 1px solid lightgray;  text-shadow: 0.5px 0.5px 0.5px;  color: black;}.fourth{  width: 100%;  height: 98px;  font: 15px/19px "Times New Roman";  display: inline-block;  margin-top: 10px;  border-bottom: 1px solid lightgray;  text-shadow: 0.5px 0.5px 0.5px;  color: black;  position: relative;}.fourth a{  color: black;}.fourth span{  float: left;  position: absolute;  left:0;  bottom: -5px;}.fourth img{  width: 56px;  height: 56px;  display: block;  margin-right: 15px;  margin-bottom: 30px;  float: left;}.first span,.second span,.third span,.fourth span{  color: grey;  font-size: 10px;  margin-bottom: 15px;}.middle{  width: 512px;  height: 3183px;  position: relative;  float: left;}.crywoman{  width: 100%;  height: 431px;}.crywoman a{  width: 100%;  display: block;  position: absolute;  left: 18px;  top: 340px;  font: 40px/30px "Times New Roman";  color: white;  text-align: left;}.middle a span{  font: 14px/0px "MircrosoftYahei";}.feature{  width: 100%;  height: 20px;  background: #be1e1e;  border-top: 37px solid white;  border-bottom: 37px solid white;  position: relative;}.word{  width:  display: inline-block;  color: black;  border-left:2px solid #be1e1e;  border-right: 2px solid #be1e1e;  background: white;  position: absolute;  left: 110px;  bottom: -5px;  font:25px/30px "MicrosoftYahei"}.word strong{  color: #be1e1e;}.feature1{  width: 100%;  height: 110px;  margin-bottom: 50px;  margin-top: 50px;  clear: both;}.feature1 img{  width: 197px;  height: 110px;  float: left;}.tv_word{  width: 305px;  height: 110px;  margin-left: 10px;  float: left;}.tv_word a span{    margin-bottom: 10px;    font:bold 13px/0px "MicrosoftYahei";    color: #be1e1e;}.tv_word p{  font: 12px/15px "MicrosoftYahei";  color: black;  text-shadow: 0.5px 0.5px 0.5px;}.tv_word h5{  color: black;  text-shadow: 0.5px 0.5px 0.5px;}.xlz{  margin-top: 50px;  width:100%;  height: 170px;  margin-bottom: 50px;  clear: both;  float: left;}.xlz img{  width: 300px;  height: 170px;  float: left;}.xlz span{  margin-bottom: 10px;  font:bold 13px/0px "MicrosoftYahei";  color: #be1e1e;}.xlz_word{  width: 202px;  height: 100px;  float: left;  margin-left: 5px;  margin-top: 30px;}.xlz h5{  color: black;  text-shadow: 0.5px 0.5px 0.5px;}.rside{  width: 302px;  height: 3183px;  margin-left: 15px;  float: left;}.speaks{  width: 302px;  height: 308px;}.speaks span{  font: 10px/15px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  color: grey;}.speaks p{  font: 12px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;}.speaks ul{  width: 304px;}.speaks li{  font:bold 12px/28px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  list-style: square inside;}.speaks li a{  color: black;}.title{  width: 100%;  height: 38px;  border-top: 5px solid #be1e1e;  border-bottom: 1px solid black;  text-align: center;  font: 20px/35px "Times New Roman","MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;}.music_re{  width: 100%;  height: 510px;  background: #f6f6f6;  font-size: 0;  position: relative;  margin-bottom: 70px;}.music_re img{  width: 127px;  height: 127px;  margin: 10px 10px 0 10px;  display: block;  float: left;}.star{  width: 127px;  height: 40px!important;  margin: 0 10px;  margin-top: 0!important;  display: block;  float: left;}.music_re p{  width: 127px;  height: 38px;  font: 12px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  text-align: center;  float: left;  margin-left: 10px;}.music_re p span{  font:bold 13px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;}.music_re a{  font: bold 13px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  position: absolute;  right: 0;  bottom: 25px;  color: black;}.interviews{  margin-bottom: 80px;}.photo{  width: 100%;  height: 126px;  border-bottom: 1px solid black;}.photo img{  width: 142px;  height: 126px;  float: left;}.photo p{  width: 147px;  height: 70px;  font:  12px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  float: left;  margin: 20px 0 0 12px;}.photo p span{  font: bold 13px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;}.photo a{  font: bold 13px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  margin-left: 10px;  color: black;}.around{  font-size: 0;  border-bottom: 1px solid black;  overflow: hidden;}.around .col1{  width: 140px;  height: 140px;  margin:10px 10px 0 0;  display: block;  float: left;}.around .col2{  width: 140px;  height: 140px;  margin:10px 0 0px 0;  display: block;  float: right;}.around .col3{  width: 140px;  height: 140px;  margin:10px 0 10px 0;  display: block;  float: right;}.around p{  width: 125px;  height: 40px;  font:  12px/20px "MicrosoftYahei";  text-shadow: 0.5px 0.5px 0.5px;  float: left;}.around .around_word1{  float: right;  margin-right: 10px;}.around .around_word2{  float: right;  margin-right: 10px;  margin-top: -10px;}.around a{  color: black;}#small{  width: 140px;  height: 20px;  font: 11px/20px "Times New Roman","MicrosoftYahei";  float: right;  margin: 10px 0 10px 0;}#small span{  color: #be1e1e;}.footer{  width: 100%;  height: 325px;  clear: both;  background: #333333;}.lfooter{  width: 33.3%;  height: 275px;  border-right: 1px solid black;  float: left;}.mfooter{  width: 33.3%;  height: 275px;  border-right: 1px solid black;  float: left;  text-align: center;}.rfooter{  width: 33.2%;  height: 275px;  float: left;  text-align: center;}.copyright{  clear: both;  width: 100%;  height: 50px;  background: #000;}.lfooter ul{  list-style: none;}.lfooter li{  display: inline-block;  width: 35px;  height: 35px;}.flowon{  width: 162px;  height: 142px;  margin: 50px 47px 80px 220px;}.mfooter p{  color: white;  font: 20px/20px "Times New Roman","MicrosoftYahei";  letter-spacing: 0;  margin-top: 70px;}.mfooter input[type=text]{  width: 275px;  height: 45px;  border: 1px solid transparent;  display: block;  float: left;  margin: 0 0 15px 110px;}.mfooter button{  width: 86px;  height: 47px;  background: #be1e1e;  font-size: 15px;  color: white;  display: block;  float: left;  border: 1px solid transparent;}#sign{  font: 12px/20px "MicrosoftYahei";  color: white;  letter-spacing: 1px;  margin-bottom: 15px;  word-spacing: 3px;  display: inline-block;}#how{  font: 10px/20px "MicrosoftYahei";  color: grey;  display: block;  clear: both;  margin-top: 20px;}.land{  width: 278px;  height: 190px;  margin-left:30px;  margin-top: 30px;}.rfooter img:nth-child(1){  width: 126px;  height: 175px;  border: 5px solid black;  float: left;}.rfooter img:nth-child(2){  width: 136px;  height: 60px;  float: right;}.rfooter li a{  list-style: none;  width: 135px;  height: 35px;  float: left;  background: black;  color: white;  margin-top: 5px;  margin-left: 5px;}.rfooter .red_w{  color: white;  background: #be1e1e;}.copyright{  color: grey;  text-align: center;  position: relative;}.copyright a{  color: grey;  margin-left: 5px;}.copyright small{  position: absolute;  bottom: 10px;  left:2%;}

0 1