您的位置：首页 > 其它

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

2016-06-23 23:36 519 查看

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 Constellati
ecbe
on <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>© 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%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航