<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/manwei.css"/>
</head>
<body>
<!--导航栏-->
<header>
<nav>
<img src="../images/logo.jpg" alt=""/>
<a href="">首页</a>
<a href="">最新动态</a>
<a href="">
漫威宇宙
<ol>
<li>电影</li>
<li>剧集</li>
<li>动漫</li>
</ol>
</a>
</nav>
</header>
<!--雪碧图-->
<div class="beij">
<i class="xuebi"></i>
</div>
<!--美队图片-->
<div class="zhongjian">
<img src="../images/new_title.png" alt=""/>
<div>
<div class="aa">
<div>
<img src="../images/new_pic01.jpg" alt=""/>
</div>
<div>
<a href="">
<p><strong>初版灭霸演员加盟《美队3》</strong></p>
<p>乔什不洛林版将成《复联3》终极boos</p>
</a>
</div>
</div>
<div class="mll">
<div>
<img src="../images/new_pic02.jpg" alt=""/>
</div>
<div>
<a href="">
<p><strong>《蚁人》再发新剧照</strong></p>
<p>漫威第二阶段收官之作7月17日北美上映</p>
</a>
</div>
</div>
<div class="cc">
<div>
<img src="../images/new_pic03.jpg" alt=""/>
</div>
<div>
<a href="">
<p><strong>《复仇者联盟》动作手游等你来战</strong></p>
<p>是英雄，就站起来！</p>
</a>
</div>
</div>
</div>
</div>
<!--阶段栏-->
<div class="jieduan">
<div>
<p><strong>漫威电影</strong></p>
<a href="">第一阶段</a>
<a href="">第二阶段</a>
<a href="">第三阶段</a>
<a href="">了解更多角色...</a>
</div>
<div>
<img src="../images/movie_pic.png" alt=""/>
<img src="../images/movie_pic02.png" alt=""/>
<img src="../images/movie_pic03.png" alt=""/>
<img src="../images/movie_pic04.png" alt=""/>
<img src="../images/movie_pic05.png" alt=""/>
<img src="../images/movie_pic06.png" alt=""/>
<a class="x" href="">《钢铁侠》</a>
<a class="u" href="">《钢铁侠2》</a>
<a class="e" href="">《美国队长3》</a>
<a class="b" href="">《无敌浩克》</a>
<a class="i" href="">《雷神》</a>
<a class="kk" href="">《复仇着联盟》</a>
</div>
</div>
<!--漫威剧集-->
<div class="juji">
<div class="juese">
<p>漫威剧集</p>
<a href="">了解更多角色.....</a>
</div>
<i></i>
<i></i>
<i><a href="">观看本片</a></i>
<i><a href="">更多内容</a></i>
<div class="move">
<img src="../images/watch_pic02.jpg" alt="" title="这是短视频"/><i class="bb"></i>
<img src="../images/watch_pic02.jpg" alt="" title="这是短视频"/><i class="bb"></i>
<img src="../images/watch_pic02.jpg" alt="" title="这是短视频"/><i class="bb"></i>
</div>
</div>
<!--漫威动漫-->
<div class="dongman">
<aside>
<div>
<p><strong>漫威动漫</strong></p>
<a href="">了解更多资讯....</a>
</div>
<div class="zhizhuxia">
<div>
<div>
<img src="../images/dm_pic01.jpg" alt=""/>
</div>
<div>
<a href="">终极蜘蛛侠：第一季预告片<strong>正片</strong></a>
</div>
</div>
<div>
<div>
<img src="../images/dm_pic02.jpg" alt=""/>
</div>
<div>
<a href="">终极蜘蛛侠：第二季预告片<strong>正片</strong></a>
</div>
</div>
<div>
<div>
<img src="../images/dm_pic03.jpg" alt=""/>
</div>
<div>
<a href="">终极蜘蛛侠：第三季预告片<strong>正片</strong></a>
</div>
</div>
<div>
<div>
<img src="../images/dm_pic04.jpg" alt=""/>
</div>
<div>
<a href="">终极蜘蛛侠 精彩片段</a>
</div>
</div>
</div>
<div>
<div>
<div class="aochuang">
<img src="../images/dm_pic05.jpg" alt=""/>
</div>
<div class="p">
<p><strong>《奥创纪元1》</strong></p>
<p>当蜘蛛侠女发现反派组织智慧获得了一尊表面上向宇宙骑士的物体时，复仇者们还对即将到来的灾难义务所知。宇宙骑士随后化身为致力于灭绝人类的人工智能奥创，人类文明沦陷了。</p>
</div>
</div>
<div>
<div class="aochuang2">
<img src="../images/666_03.gif" alt=""/>
</div>
<div class="pp">
<p><strong>《奥创纪元2》</strong></p>
<p>苏珊.理查次怀着复杂的心情跟着金刚狼一起回到了过去，原本打算要阻止金刚狼的苏珊，在最后关头动摇了。。。。当两人在对回到未来时，等在他们的确实宁一场噩梦。</p><i></i>
</div>
</div>
</div>
</aside>
</div>
<!--页脚-->
<footer>
<div>
<p>漫威粉丝网站由时光网呈现</p>
<p>Copyright @ 2006-2015 Mtime.com Inc All rights reserved.</p>
<p>北京动议时光网络科技有限公司京ICP正050715号 网络试听许可证0108265号北京市公安局朝阳分局备案号:11010507744</p>
</div>
</footer>
</body>
</html>
以下是css样式表
/*导航栏*/
a{
text-decoration: none;
}
body{
height: 3000px;
}
header{
width: 100%;
background-color: #020202;
height: 61px;
margin: 0 auto;
}
header>nav{
width: 1002px;
margin: 0 auto;
}
header>nav>a{
color: white;
line-height: 60px;
margin-right:56px ;
text-decoration: none;
}
header>nav>img{
margin-right: 56px;
}
ol{
width: 60px; ;
padding: 0 ;
display: none;
left: 0;
text-align: center;
background-color: black;
}
ol>li{
border: 1px solid white;
}
header>nav>a:last-child:hover ol{
display: block;
position: absolute;
z-index: 1;
}
header>nav>a:last-child{
position: relative;
}
.beij{
width: 100%;
height: 540px;
background-image: url("../images/top_banner.jpg");
background-position: center;
}
/*雪碧图*/
.xuebi{
display: inline-block;
width:83px ;
height: 60px;
background-image: url("../images/icon.png");
background-position: 0 -213px;
}
.xuebi{
padding: 0;
position: absolute;
top: 338px;
left:360px ;
}
.beij{
position: relative;
}
.xuebi:hover{
display: inline-block;
width: 83px;
height: 60px;
background-image: url("../images/icon.png");
background-position:-85px -213px;
}
/*图片*/
.zhongjian>img{
margin-top: 28px;
margin-bottom: 38px;
}
.zhongjian{
background: repeat-x url("../images/new_bj.jpg");
overflow: hidden;
margin-bottom:136px ;
}
.zhongjian>div{
width: 1002px;
height: 334px;
margin: 0 auto;
}
.aa{
float: left;
}
.mll{
float: left;
}
.cc{
float: left;
}
.zhongjian p:first-child{
color: black;
margin-top: 14px;
font-size: 18px;
}
.zhongjian p:last-child{
color: gray;
}
.zhongjian p:last-child:hover{
color: orangered;
}
/*阶段栏*/
.jieduan{
width: 100%;
height:542px ;
}
.jieduan>div:nth-child(2){
width: 100%;
height:503px ;
background-image: url("../images/movie_bj.jpg");
background-position: center;
}
.jieduan>div:first-child{
width: 1002px;
margin: 0 auto;
padding-bottom: 36px;
}
.jieduan>div:first-child>p{
font-size: 22px;
float: left;
}
.jieduan>div:first-child>a {
color: black;
float: left;
margin-left: 150px;
}
.jieduan>div:first-child>a:last-child{
background: linear-gradient(to right,green,blue,red);
color: white;
font-size: 18px;
}
.jieduan>div:first-child>a:hover{
color: red;
}
.jieduan{
position: relative;
}
.jieduan>div:last-child>img{
position: absolute;
}
.jieduan>div:last-child>img:first-child{
left:246px ;
top: 104px;
}
.jieduan>div:last-child>img:nth-child(3){
left: 550px;
top: 104px;
}
.jieduan>div:last-child>img:nth-child(2){
top: 350px;
left: 410px;
}
.jieduan>div:last-child>img:nth-child(4){
top: 350px;
left: 750px;
}
.jieduan>div:last-child>img:nth-child(5){
top: 104px;
left:866px ;
}
.jieduan>div:last-child>img:nth-child(6){
top: 350px;
left: 1020px;
}
.jieduan>div:last-child>a{
color: white;
font-size: 18px;
position: absolute;
z-index: 1;
}
.x{
left: 246px;
top: 200px;
}
.u{
top: 200px;
left: 550px;
}
.e{
top: 200px;
left: 860px;
}
.b{
left: 452px;
top: 350px;
}
.i{
top: 350px;
left: 800px;
}
.kk{
top: 350px;
left: 1020px;
}
/*漫威剧集*/
.juji{
width: 100%;
height: 556px;
background-image:url("../images/watch_bj.jpg");
background-position: center;
position: relative;
}
.juese>a{
background-color: black;
color: white;
float: right;
padding:10px ;
margin: 28px 150px 0 0;
}
.juji>i:nth-child(2){
display: inline-block;
width: 34px;
height: 58px;
background-image: url("../images/icon.png");
background-position:-73px -37px ;
position: absolute;
top: 274px;
left: 200px;
}
.juji>i:nth-child(3){
display: inline-block;
width: 36px;
height: 58px;
background-image: url("../images/icon.png");
background-position:-107px -37px ;
position: absolute;
top: 274px;
right: 200px;
}
.juji>i:nth-child(4){
display: inline-block;
width: 144px;
height: 36px;
background-image: url("../images/icon.png");
background-position:0 -354px ;
position: absolute;
top: 290px;
left: 730px;
}
.juji>i:nth-child(5){
display: inline-block;
width: 144px;
height: 36px;
background-image: url("../images/icon.png");
background-position:0 -354px ;
position: absolute;
left: 560px;
top:290px;
}
.juji>i:nth-child(4)>a{
margin-left: 40px;
color: white;
line-height: 30px;
}
.juji>i:nth-child(5)>a{
margin-left: 30px;
color: white;
line-height: 30px;
}
.move{
position: absolute;
left: 200px;
top: 346px;
}
.bb{
display: inline-block;
width: 52px;
height: 60px;
background-image: url("../images/icon.png");
background-position:-18px -213px;
}
.bb:hover{
display: inline-block;
width: 52px;
height: 60px;
background-image: url("../images/icon.png");
background-position:-102px -215px;
}
.juese>p{
color: white;
font-size: 24px;
margin-left: 120px;
padding-top: 38px;
}
.juese>p:hover{
color:green;
}
/*漫威动漫*/
.dongman{
width: 100%;
height: 500px;
margin: 0 auto;
padding-top: 30px;
position: relative;
background-image: url("../images/am_bj.jpg");
}
.dongman>aside{
width: 1002px;
height: 559px;
margin: 0 auto;
overflow: hidden;
}
aside>div:first-child{
overflow: hidden;
}
aside>div:first-child>p{
font-size: 22px;
float: left;
}
aside>div:first-child>a{
float: right;
color: white;
font-size: 18px;
background: linear-gradient(to right,darkmagenta,green);
}
.zhizhuxia>div:first-child{
float: left;
}
.zhizhuxia>div:nth-child(2){
float: left;
}
.zhizhuxia>div:nth-child(3){
float: left;
}
.zhizhuxia{
overflow: hidden;
}
.zhizhuxia>div{
margin-right:20px ;
margin-top: 5px;
}
.zhizhuxia>div a{
color: black;
}
.zhizhuxia>div a:hover{
color: red;
}
.zhizhuxia>div a>strong{
background-color: black;
color: white;
}
.zhizhuxia{
margin-bottom: 60px;
}
.aochuang{
float: left;
}
.p{
width: 322px;
float: left;
margin-right:26px ;
text-shadow: 3px 3px 5px green;
}
aside{
overflow: hidden;
}
.p:hover{
color: yellow;
}
.aochuang2{
float: left;
}
.pp:hover{
color: blue;
}
.pp{
width: 322px;
float: left;
text-shadow: 3px 3px 5px red;
}
i{
display: inline-block;
width: 36px;
height: 58px;
background-image: url("../images/icon.png");
background-position:-107px -37px ;
position: absolute;
right:180px ;
top: 300px;
}
/*页脚*/
footer{
width: 100%;
height:202px;
background-color: black;
margin: 0 auto;
}
footer p{
color: white;
text-align: center;
margin-bottom: 18px;
}
footer>div{
padding-top: 70px;
}
