博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
微信公众号与APP微信第三方登录账号打通
查看>>
onchange()事件的应用
查看>>
Windows 下最佳的 C++ 开发的 IDE 是什么?
查看>>
软件工程师成长为架构师必备的十项技能
查看>>
python 异常
查看>>
百度账号注销
查看>>
mysql-This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决
查看>>
BIEE Demo(RPD创建 + 分析 +仪表盘 )
查看>>
Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程
查看>>
基本概念复习
查看>>
重构第10天:提取方法(Extract Method)
查看>>
Android Fragment使用(四) Toolbar使用及Fragment中的Toolbar处理
查看>>
解决pycharm在ubuntu下搜狗输入法一直固定在左下角的问题
查看>>
多线程day01
查看>>
react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
查看>>
MySQL出现Access denied for user ‘root’@’localhost’ (using password:YES)
查看>>
通过Roslyn构建自己的C#脚本(更新版)(转)
查看>>
红黑树
查看>>
python调用windows api
查看>>
第四章 mybatis批量insert
查看>>