以下是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; }