漫威主题网站HTML布局-优快云博客

html代码实现：

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../css/reset.css"/>
	<link rel="stylesheet" href="../css/yt.css"/>
	</head>
	<body>
	<!--导航-->
	<header>
	<nav>
	<div>
	<img src="../image/logo.jpg" alt=""/>
	</div>
	<div>
	<ul>
	<li><a class="font1" href=""><strong>首页</strong></a></li>
	<li ><a class="font" href="">最新动态
	<ol class="kuozhan">
	<li><a href="">粉丝</a></li>
	<li><a href="">微博</a></li>
	<li><a href="">明星</a></li>

	</ol>
	</a></li>
	<li ><a class="font" href="">漫威宇宙
	<ol class="kuozhan">
	<li><a href="">电影</a></li>
	<li><a href="">剧集</a></li>
	<li><a href="">动漫</a></li>
	</ol>

	</a></li>
	</ul>
	</div>

	</nav>
	</header>
	<!--主页-->
	<div>
	<!--大图-->
	<div class="datu">
	<img src="../image/top_banner.jpg" alt=""/>
	<div class="tubiao1">
	<a href=""><i class="xuebi"></i></a></div>
	</div>
	<!-- 最新动态-->
	<div class="dongtai">
	<img class="imgtitle" src="../image/new_title.png" alt=""/>
	</div>
	<!-- 三张图-->
	<div class="sanzhangtu">
	<div><img src="../image/new_pic01.jpg" alt=""/>

	<h3><a href="">初版灭霸演员加盟《美队3》</a></h3>

	<p><a href="">乔什布洛林版将成《复联3》终极BOSS</a></p>
	</div>
	<div style="margin: 0px 6px "><img src="../image/new_pic02.jpg" alt=""/>

	<h3><a href="">《蚁人》再发新剧照</a></h3>

	<p><a href="">漫威第二阶段收官之作 7月17日北美上映</a></p>
	</div>
	<div><img src="../image/new_pic03.jpg" alt=""/>

	<h3><a href="">《复仇者联盟》动作手游等你来战</a></h3>

	<p><a href="">是英雄，就战起来！</a></p>
	</div>


	</div>
	<div class="baitu">
	<p class="mangweidongman">漫威动漫</p>
	<div class="juesediv"><a class="juese" href="">了解更多角色...</a></div>
	</div>
	<!-- 待续-->
	<div class="daixu">
	<div class="dakuangjia">
	<div>
	<div>
	<img src="" alt=""/>
	</div>
	<p>《钢铁侠》</p>
	<p>2008.4.30</p>
	</div>
	<div>
	<p>2008.8.20</p>
	<p>《无敌浩克》</p>
	<div></div>
	</div>
	<div>
	<div></div>
	<p>《钢铁侠2》</p>
	<p>2010.4.25</p>
	</div>
	<div>
	<p>2011.5.2</p>
	<p>《雷神》</p>
	<div></div>
	</div>
	<div>
	<div></div>
	<p>《美国队长》</p>
	<p>2011.7.19</p>
	</div>
	<div>
	<p>2012.5.4</p>
	<p>《复仇者联盟》</p>
	<div></div>
	</div>


	</div>

	</div>




	<!-- 漫威剧集-->
	<div class="juji">
	<div class="juji2">
	<div>
	<p class="mangweidongman1">漫威剧集</p>
	<div class="juesediv"><a class="juese" href="">了解更多角色...</a></div>
	</div>
	<div class="tubiaozuo1"><a href=""><i class="tubiaozuo0"></i></a></div>
	<div class="tubiaoyou1"><a href=""><i class="tubiaoyou0"></i></a></div>
	<div class="juxing1"><a href=""><span class="juxing" >更多内容</span></a></div>
	<div class="juxing2"><a href=""><span class="juxing">观看本片</span></a></div>
	<div class="tupian1"><a href=""><img src="../image/a1.png" alt=""/></a></div>
	<div class="tupian2"><a href=""><img src="../image/a2.png" alt=""/></a></div>
	<div class="tupian3"><a href=""><img src="../image/a3.png" alt=""/></a></div>
	</div>

	</div>






	<!-- 漫威动漫-->
	<div class="dongman1">
	<div class="dongman2">
	<div>
	<p class="mangweidongman">漫威动漫</p>
	<div class="juesediv"><a class="juese" href="">了解更多角色...</a></div>
	</div>
	<div>
	<ul>
	<li><figure>
	<img src="../image/dm_pic01.jpg" alt=""/>
	<figcaption>终极蜘蛛侠第一季预告片<i></i></figcaption>
	<div><img src="../image/bofang.png" alt=""/></div>
	</figure></li>
	<li><figure>
	<img src="../image/dm_pic02.jpg" alt=""/>
	<figcaption>终极蜘蛛侠第二季预告片<i></i></figcaption>
	<div><img src="../image/bofang.png" alt=""/></div>
	</figure></li>
	<li><figure>
	<img src="../image/dm_pic03.jpg" alt=""/>
	<figcaption>终极蜘蛛侠第三季预告片<i></i></figcaption>
	<div><img src="../image/bofang.png" alt=""/></div>
	</figure></li>
	<li><figure>
	<img src="../image/dm_pic04.jpg" alt=""/>
	<figcaption >终极蜘蛛侠精彩片段</figcaption>
	<div><img src="../image/bofang.png" alt=""/></div>
	</figure></li>
	</ul>
	</div>
	<article>
	<section>
	<div>
	<img src="../image/dm_pic05.jpg" alt=""/>
	</div>
	<div>
	<h1><strong>《奥创纪元 1》</strong></h1>
	<p>当蜘蛛女侠发现反派组织智慧帮获得了一尊表面看来像宇宙骑士的物体时，复仇者们还对即将到来的灾变一无所知。宇宙骑士随后化身为致力于灭绝人类的人工智能奥创，人类文明沦陷了</p>
	</div>
	</section>
	<section>
	<div>
	<img src="../image/dm_pic05.jpg" alt=""/>
	</div>
	<div>
	<h1>《奥创纪元 2》</h1>
	<p>苏珊?理查兹怀着复杂的心情跟着金刚狼一起回到了过去。原本打算要阻止金刚狼的苏珊，在最后关头却动摇了……当两人再度回到未来时，等着他们的却是另一场噩梦。</p>
	</div>
	</section>
	<div class="zhibiao1"><a href=""><i class="tubiaozuo"></i></a></div>
	<div class="zhibiao2"><a href="" ><i class="tubiaoyou"></i></a></div>

	</article>

	</div>
	</div>

	</div>
	<!--页脚-->
	<footer>
	<p>漫威粉丝网站由时光网呈现</p>
	<p style="text-align: center">Copyright © 2006-2015 Mtime.com Inc. All rights reserved.</p>
	<p>北京动艺时光网络科技有限公司京ICP证050715号网络视听许可证0108265号北京市公安局朝阳分局备案编号:1101050744</p>
	</footer>





	</body>
	</html>