资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/用HTML编写漫威页面

用HTML编写漫威页面

cppprimer / 1514人阅读

摘要：页脚漫威粉丝网站由时光网呈现北京动议时光网络科技有限公司京正号网络试听许可证号北京市公安局朝阳分局备案号以下是样式表导航栏雪碧图图片阶段栏漫威剧集漫威动漫页脚




    
    
    
    




    



    



    
   



    
    





    

        
漫威剧集

        了解更多角色.....
    


    
    
    观看本片
    更多内容
    

        
        
        
    




    



    

        
漫威粉丝网站由时光网呈现

        
Copyright @ 2006-2015 Mtime.com Inc All rights reserved.

        
北京动议时光网络科技有限公司京ICP正050715号 网络试听许可证0108265号北京市公安局朝阳分局备案号:11010507744

    





以下是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页面编写规范 分两页面用html php编写页面代码 java用什么编写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2266.html

相关文章

  • 从数据上看：谁才是漫威的绝对C位

    摘要：据说此部之后，不少影迷熟知的角色演员就要离开漫威世界的荧幕了。换句话说用数据说话，谁才是漫威宇宙中着墨最多的人物我之前做了个小调查仅就我这边的采样来看，钢铁侠在国内是无法撼动的人气王。 复联4上映了！这次比美国还早了两天。当然，我还没看，不会给你们剧透，当然也不想不剧透。 这一部不仅是灭霸这一线剧情的结局，也被认为漫威第三阶段的收官之作。据说此部之后，不少影迷熟知的角色（演员）就要离开...

    RancherLabs 评论0 收藏0

  • 复联4火爆来袭，大数据告诉你——漫威哪个英雄人气最高

    摘要：漫威从年到现在共拍了部超级英雄的电影，包括部钢铁侠部雷神部蜘蛛侠部超凡部英雄归来部平行宇宙部美队部银河护卫队部蚁人部绿巨人部奇异博士部惊奇队长部黑豹。 复仇者联盟系列自上映以来，票房一直是节节高 showImg(https://segmentfault.com/img/remote/1460000018996772); 其中复联3的累积票房更是挤进中国电影票房总榜的第11位。（数据来自...

    paulli3 评论0 收藏0

  • 数据库之战| 寻找你心中的数据库漫威英雄

    摘要：可以说数据库系统是目前世界上流行的关系数据库管理系统。图形数据库是数据库家族中特殊的存在，用于存储丰富的关系数据，是目前最流行的开源图形数据库，支持完整的事务。匹配数据库可以说是数据库开源界当之无愧的王者是最受 ​今晚，就在今晚0点，《复仇者联盟4-终局之战》就要首映了！ 四月什么最难抢？!绝对是《复仇者联盟4》的首映票预售。飙到接近300的票价也难以阻挡漫威粉们的狂热。 不知道大家有...

    codeKK 评论0 收藏0

  • 数据库之战| 寻找你心中的数据库漫威英雄

    摘要：可以说数据库系统是目前世界上流行的关系数据库管理系统。图形数据库是数据库家族中特殊的存在，用于存储丰富的关系数据，是目前最流行的开源图形数据库，支持完整的事务。匹配数据库可以说是数据库开源界当之无愧的王者是最受 ​今晚，就在今晚0点，《复仇者联盟4-终局之战》就要首映了！ 四月什么最难抢？!绝对是《复仇者联盟4》的首映票预售。飙到接近300的票价也难以阻挡漫威粉们的狂热。 不知道大家有...

    Donne 评论0 收藏0

  • 数据库之战| 寻找你心中的数据库漫威英雄

    摘要：可以说数据库系统是目前世界上流行的关系数据库管理系统。图形数据库是数据库家族中特殊的存在，用于存储丰富的关系数据，是目前最流行的开源图形数据库，支持完整的事务。匹配数据库可以说是数据库开源界当之无愧的王者是最受 ​今晚，就在今晚0点，《复仇者联盟4-终局之战》就要首映了！ 四月什么最难抢？!绝对是《复仇者联盟4》的首映票预售。飙到接近300的票价也难以阻挡漫威粉们的狂热。 不知道大家有...

    Anonymous1 评论0 收藏0

发表评论

登陆后可评论

0条评论

cppprimer

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<