博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用HTML编写漫威页面
阅读量:5831 次
发布时间:2019-06-18

本文共 10613 字,大约阅读时间需要 35 分钟。

       

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

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

转载于:https://www.cnblogs.com/yangkaiming/p/9029183.html

你可能感兴趣的文章
计划10年建10万廉价屋 新西兰政府:比想象中难
查看>>
甘肃发首版《3D打印职业教育教材》:校企合作育专才
查看>>
李娜入选国际网球名人堂 成亚洲第一人
查看>>
为找好心人抚养孩子 浙江一离婚父亲将幼童丢弃公园
查看>>
晚婚晚育 近20年巴西35岁以上孕妇增加65%
查看>>
读书:为了那个美妙的咔哒声
查看>>
jsp改造之sitemesh注意事项
查看>>
SpringBoot-Shiro使用
查看>>
iOS 9.0之后NSString encode方法替换
查看>>
解决 ThinkPHP5 无法接收 客户端 Post 传递的 Json 参数
查看>>
ASMFD (ASM Filter Driver) Support on OS Platforms (Certification Matrix). (文档 ID 2034681.1)
查看>>
CRM Transaction处理中的权限控制
查看>>
[转]linux创建链接文件的两种方法
查看>>
python ipaddress模块使用
查看>>
文件权限
查看>>
busybox里的僵尸进程为何那么多
查看>>
python debug
查看>>
java 连接数据库之一个完整的函数
查看>>
mysql脚本
查看>>
OllyDBG 入门系列教学--让你瞬间成为破解高手
查看>>