设为首页 加入收藏

TOP

用HTML编写漫威页面(三)
2019-09-03 03:34:26 】 浏览:67
Tags:HTML 编写 页面
x;
}
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");
bac
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇关于HTML、CSS、JavaScript三者关.. 下一篇CSS网页布局:盒子模型

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目