<!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" />
???????<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" />
??<div>
??????<div class="aa">
??????????<div>
??????????????<img src="../images/new_pic01.jpg" />
??????????</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" />
??????????</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" />
??????????</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" />
???????<img src="../images/movie_pic02.png" />
???????<img src="../images/movie_pic03.png" />
???????<img src="../images/movie_pic04.png" />
???????<img src="../images/movie_pic05.png" />
???????<img src="../images/movie_pic06.png" />
???????<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" ?title="这是短视频"/><i class="bb"></i>
???????<img src="../images/watch_pic02.jpg" ?title="这是短视频"/><i class="bb"></i>
???????<img src="../images/watch_pic02.jpg" ?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" />
???????????????</div>
???????????????<div>
???????????????????<a href="">终极蜘蛛侠：第一季预告片<strong>正片</strong></a>
???????????????</div>
???????????</div>
???????????<div>
???????????????<div>
???????????????????<img src="../images/dm_pic02.jpg" />
???????????????</div>
???????????????<div>
???????????????????<a href="">终极蜘蛛侠：第二季预告片<strong>正片</strong></a>
???????????????</div>
???????????</div>
???????????<div>
???????????????<div>
???????????????????<img src="../images/dm_pic03.jpg" />
???????????????</div>
???????????????<div>
???????????????????<a href="">终极蜘蛛侠：第三季预告片<strong>正片</strong></a>
???????????????</div>
???????????</div>
???????????<div>
???????????????<div>
???????????????????<img src="../images/dm_pic04.jpg" />
???????????????</div>
???????????????<div>
???????????????????<a href="">终极蜘蛛侠 精彩片段</a>
???????????????</div>
???????????</div>
???????</div>
???????<div>
???????????<div>
???????????????<div class="aochuang">
???????????????????<img src="../images/dm_pic05.jpg" />
???????????????</div>
???????????????<div class="p">
???????????????????<p><strong>《奥创纪元1》</strong></p>
???????????????????<p>当蜘蛛侠女发现反派组织智慧获得了一尊表面上向宇宙骑士的物体时，复仇者们还对即将到来的灾难义务所知。宇宙骑士随后化身为致力于灭绝人类的人工智能奥创，人类文明沦陷了。</p>
???????????????</div>
???????????</div>
???????????<div>
???????????????<div class="aochuang2">
???????????????????<img src="../images/666_03.gif" />
???????????????</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;
}
用HTML编写漫威页面
原文地址：https://www.cnblogs.com/yangkaiming/p/9029183.html