我做了一个页面,在其他浏览器都正常显示样式和js功能，但是到了火狐下完全没有样式了
.main-content{
overflow: hidden;
}
nav{
background: #ccc;
height: 50px;
}
#banner{
background: transparent;
height: 650px;
}
#banner .inner{
max-width:300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1{
margin: 0;
color: #fff;
}
button{
border: none;
background: yellow;
color: #000;
padding: 10px;
}
#banner button{
padding: 14px 60px;
}
#banner .inner .more{
margin-top: 180px;
color: #fff;
}
#banner .inner .subheading{
color: rgba(255,226,0,0.72);
}
.subheading{
line-height: 30px;
margin: 30px;
}
.logo{
width: 1080px;
height: 50px;
float: left;
padding-left: 12px;
font-size: 20px;
font-weight: bold;
word-spacing: 2px;
background: transparent;
}
.logo a{
text-decoration: none;
color: #000;
}
nav ul{
list-style: none;
margin: 0;
background: yellow;
float: right；
}
nav ul li,nav .logo{
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a{
display: inherit;
height: inherit;
line-height: 50px;
float: right;
text-decoration: none;
color: #000;
}
.hr{
width: 100%;
margin: 20px auto;
height: 2px;
}
.active{
border-bottom: 2px solid #a6b90b;
}
h1{
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2{
font-size: 30px;
}
h3{
font-size: 20px;
}
p{
font-size: 18px;
letter-spacing: 1px;
}
ul{
margin: 0;
list-style: none;
}
.green-section{
text-align: center;
background: #5bbdce;
color:#fff;
padding: 100px 0;
}
.green-section .hr{
background: #177c8e;
width: 60%;
}
.wrapper{
max-width: 1080px;
margin:0 auto;
}
.sub-heading{
font-size: 18px;
padding: 20px;
}
.green-section .icon-group {
margin-top: 60px;
}
.green-section .icon-group .icon{
display: inline-block;
width: 80px;
height: 80px;
margin: 20px;
background: #0d859a;
transform: rotate(45deg);
}
.gray-section{
background: #000;
color:#fff;
}
.gray-section .img-section{
width:45%;
}
.img-section img{
width: 100%;
}
.gray-section .text-section{
width: 55%;
}
.artical-preview>div{
float: left;
font-size: 0;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
/**.artical-preview:after{
content: '';
clear: both;
display: block;
}**/
.text-section{
position: relative;
top: 68px;
left: 30px;
}
.text-section .sub-heading{
font-size: 23px;
margin-bottom: 20px;
}
.text-section h2{
margin-bottom: 10px;
}
.text-section p{
font-size: 15px;
}
.artical-preview >*{
max-width: 90%;
}
.artical-preview:nth-child(odd){
background-color: rgba(255, 255, 255, 0.1);
}
.purple-section{
background: #9f2ae8;
color: #fff;
padding: 80px;
}
.purple-section .heading-wrapper{
text-align: center;
}
.purple-section .heading-wrapper .hr{
background: #5a078e;
width: 60%;
}
.card{
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/**border: 1px solid #fff;**/
}
.card:first-child{
background: rgba(0,0,0,0.05);
}
.card:nth-child(2){
background: rgba(0,0,0,0.09);
}
.card:nth-child(3){
background: rgba(0,0,0,0.13);
}
.card:nth-child(4){
background: rgba(0,0,0,0.15);
}
footer{
background: #333;
color: #fff;
min-height: 200px;
text-align: center;
}
ul.share-group{
display:block;
width: 1080px;
margin: 0 auto;
padding: 30px;
}
.share-group li{
display: inline-block;
padding: 10px;
}
.copy{
padding: 40px;
}
.main-content{
background: #444 url(img/4.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
background-size: cover;
/**background-position: center center;**/
}
header{
background: rgba(0,0,0,0.4);
}
#sidebar{
width: 200px;
background: #333;
position: fixed;
top: 0;
right: -200px;
transition: right 0.5s;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul a{
width: 100%;
padding: 10px 30px;
display: inline-block;
color: #fff;
text-decoration: none;
}
#sidebar ul a:hover{
background: #444;
}
.mask{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right:0;
background: rgba(0,0,0,0.3);
}
.backToTop{
position: fixed;
bottom: 30px;
right: 30px;
color: #fff;
border: 1px solid #888;
padding: 10px;
}
.share-group img{
width: 30px;
height: 30px;
}
.wechat-group{
position: relative;
display: block;
width: 45px;
height: 45px;
}
.wechat-group:hover .wechat-layer{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.wechat-layer{
position: absolute;
left: 0;
top: 0px;
width: 145px;
height: 145px;
background: url(img/wechat.jpg) 45px 50px;
background-position: 50px 50px;
background-repeat:no-repeat;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.01);
-moz-transform: scale(0.01);
-ms-transform: scale(0.01);
-o-transform: scale(0.01);
transform: scale(0.01);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
#fp-nav{
display: block;
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
box-sizing: border-box;
}
.right{
right: 30px;
}
#fp-nav ul li{
display: block;
margin: 7px;
position: relative;
width: 14px!important;
height: 14px!important;
margin-bottom: 10px!important;
}
#fp-nav ul li a{
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
color: #337ab7;
background-color: transparent;
}
#fp-nav ul li a span{
border-radius: 50%;
position: absolute;
z-index: 1;
transition: all .1s ease-in-out;
}
#fp-nav ul li a span{
width: 14px;
height: 14px;
left: 0!important;
top: 0!important;
margin: 0!important;
border: 1px solid #6090b6!important;
background: transparent;
}
js:
$(function(){
'use strict';
var sidebar=$('#sidebar'),
mask=$('.mask'),
sidebar_trigger=$('#sidebar_trigger'),
backButton=$('.backToTop');
function showSidebar(){
mask.fadeIn();
sidebar.css('right',0);
}
function hideSidebar(){
mask.fadeOut();
sidebar.css('right',-sidebar.width());
}
sidebar_trigger.on('click',showSidebar)
mask.on('click',hideSidebar)
backButton.on('click',function(){
$('html,body').animate({
scrollTop:0
},800)})
$(window).on('scroll',function(){
if($(window).scrollTop()>$(window).height())
backButton.fadeIn();
else
backButton.fadeOut();
})
$(window).trigger('scroll');
$('.list-nav').first().css("background","#6090b6");
$('.list-nav').on('click',function(){
$(this).css("background","#6090b6");
var $otherSpans = $(this).closest('li').siblings().find('span.list-nav');
$otherSpans.css("background","");
var href = $(this).attr("href");
var pos = $(href).offset().top;
$("html,body").animate({scrollTop: pos}, 1000);
return false;
})
})
html:
我的博客爱运动
作为一个阳光的女孩，我每天都会抽出一定的时间去健健身。
img1img2img3
爱学习
我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。
爱学习
我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。
爱学习
我拥有十分的学习热情，我考了很多证，这些证都是我花费极少精力就考到的。
爱时尚
运动衣
maikkkkkllhhgfhejnooo
ooooolll
lluuuuuu
运动衣
maikkkkkkkkkkk
kkllhhg
fhejn
运动衣
maikkkkkkkkkkk
kkllhhg
fhejn
运动衣
maikkkkkkkkkkk
kkllhhg
fhejn
© 冯瑞君 2017-03-28
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
