<!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;
}

用HTML编写漫威页面的更多相关文章

  1. 使用Sublime编写HTML页面时发现，虽然已经设置好了UTF-8的编码格式，但却发现HTML页面的汉字仍然是乱码。

    相信有些同学在使用Sublime编写HTML页面时发现,虽然已经设置好了UTF-8的编码格式,但却发现HTML页面的汉字仍然是乱码吧.我今天就遇到了这样的问题. 第一步:重新设置一下你的meta,设置 ...

  2. 编写html页面时常见的问题（转）

    编写html页面时常见的问题(一)   说到写页面,肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题,那么在这里我总结一些经常遇到的小问题.希望能够帮助学习页面搭建的初学者! 虽然说ie ...

  3. 基于jQuery编写的页面跳转简单的小插件

    其实这个很简单,就是一个脚本函数和两个参数(url,jupetime), 开始实现步骤: 1.像页面引用一个jquery工具包 2.在javascript脚本编写自定义方法: 方法声明: $.exte ...

  4. 编写html页面时常见的问题（二）

    这次我接着说几个编写页面时常见的另外几个问题. 不能水平居中对齐 在我们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种情况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种情况的 ...

  5. 编写html页面时常见的问题（一）

    说到写页面,肯定有很多人在刚接触编写页面这一块时遇到很多细节和兼容性的问题,那么在这里我总结一些经常遇到的小问题.希望能够帮助学习页面搭建的初学者! 虽然说ie6很多公司都已经抛弃,但是个人认为,初学 ...

  6. Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

    问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...

  7. Jsp编写的页面如何适应手机浏览器页面

    经常遇到JSP网页需要适配手机设备的尺寸问题 解决: 在JSP加入<meta name="viewport" content="width=device-width ...

  8. 利用Express和ejs编写简单页面

    1.创建临时文件夹ejsdemo $ mkdir ejsdemo 2.进入ejsdemo 初始化项目 $ npm init 3.安装express $ npm install express --sa ...

  9. 使用ES6的模块编写web页面碰到的坑

    昨天写最近在做的web应用时,在web页面的js文件中使用了模块功能,这样在html文件中只需要导入一个js就好了

随机推荐

  1. 浅谈arguments与arguments的妙用

    1.每个函数都有一个arguments属性,表示函数的实参集合,这里的实参是重点,就是执行函数时实际传入的参数的集合. 2.arguments不是数组而是一个对象,但它和数组很相似,所以通常称为类数组 ...

  2. 理解position：relative

    前言:position有5个属性:static.absolute.relative.fixed和inherit.本篇博客主要介绍relative属性,因为似乎很多人对这个属性的理解很模糊,而且不清楚r ...

  3. 微服务架构之spring cloud feign

    在spring cloud ribbon中我们用RestTemplate实现了服务调用,可以看到我们还是需要配置服务名称,调用的方法 等等,其实spring cloud提供了更优雅的服务调用方式,就是 ...

  4. VC++中如何将字符串转换成整型数字

    原文:http://blog.csdn.net/yongf2014/article/details/47071663 注意: atoi函数是c的函数,它的输入参数是char *类型. 你声明了stri ...

  5. Gensim入门教程

    What is Gensim? Gensim是一款开源的第三方Python工具包,用于从原始的非结构化的文本中,无监督地学习到文本隐层的主题向量表达.它支持包括TF-IDF,LSA,LDA,和word ...

  6. js作用域链以及全局变量和局部变量

    > [带var] > 在当前作用于中声明了一个变量,如果当前是全局作用域,也相当于给全局作用域设置了一个属性叫做a ```javascript //=>变量提升:var a; < ...

  7. 关于webWorker的理解和简单例子

    一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...

  8. 通信与实际用例应用（消息队列和进程撰写的ATM机与消息队列的五子棋对站）

    int semget(key_t key, int nsems, int semflg); 功能:创建信号量或获取信号量 nsems:信号量的数量 semflg: IPC_CREAT|IPC_EXEC ...

  9. [翻译] GTAppMenuController

    GTAppMenuController https://github.com/gianlucatursi/GTAppMenuController This is a simple project in ...

  10. JFinal启动报错：Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/Connector

    - 错误: Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/ ...