content && header之间的亮条怎么消除!!! 没有背景的时候是没什么区别的但是加入了背景的时候会在header和content之间出现亮条,请问下怎么避免或者消除亮条! 下面是显示效果。
感谢 DCloud_MUI_FXY !! 问题解决勒,后面是附加代码以及更改后的效果图:)
<!DOCTYPE html>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<script type="text/javascript" src="js/mui.min.js"></script>
<style>
body{
}
header{
background:#5ab2e0;
}
.mui-bar-nav{
-webkit-box-shadow: none;
box-shadow: 0px 100px 500px #ccc;
}
.mui-content{
margin-top:44px;
min-height: 480px;
}
.custom-A{
color: #FFFFFF;
}
.gradient{
background: -moz-linear-gradient(top, #5ab2e0 0%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ab2e0), color-stop(100%,#CCCCCC));
background: -webkit-linear-gradient(top, #2b82c9 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #5ab2e0 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #5ab2e0 0%,#CCCCCC 100%);
background: linear-gradient(to bottom, #5ab2e0 0%,#CCCCCC 100%);
}
.Error_404{
text-align: center;
overflow: hidden;
display:block;
}
.Error_404 img{
}
.Error_TIPS{
margin-top:40px;
text-align:center;
color: #FFFFFF;
font-size:25px;
font-weight: 800;
}
.ElEM_CLOUD{
padding: 0 0;
margin-bottom:-8px;
position: fixed;
bottom: 0;
}
.mui-btn-custom{
color:#5ab2e0;
width:120px;
border-radius: 25px;
}
.mui-title{
color:#FFFFFF;
}
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left custom-A"></a>
<h1 class="mui-title">ERROR</e></h1>
</header>
<div id="content" class="mui-content gradient">
<div id="Error_404"class="Error_404">
<img id="IMG_Error_404" class="" src="images/404.png" />
</div>
<div id="Error_TIPS"class="Error_TIPS">
</div>
<div class="Error_TIPS">
<button id="btnBack" class="mui-btn mui-btn-custom">返回前页</button>
</div>
<div id="ElEM_CLOUD" class="ElEM_CLOUD">
<img class="" src="images/error_cloud.png" />
</div>
</div>
<script type="text/javascript">
/* DOM ElEMENET */
var Error_404 = document.getElementById("Error_404");
var IMG_Error_404 = document.getElementById("IMG_Error_404");
var Error_TIPS = document.getElementById("Error_TIPS");
var IMG_TIPS_TEXT = document.getElementById("IMG_TIPS_TEXT");
var IMG_TIPS_BTN = document.getElementById("IMG_TIPS_BTN");
var header = document.getElementById("header");
var content = document.getElementById("content");
var btnBack = document.getElementById("btnBack");
mui.plusReady(function(){
var ElemWidth = Error_404.clientWidth;
var ElemHeight = Error_404.clientHeight;
console.log("#ElemWidth:" +ElemWidth);
console.log("#ElemHeight:"+ElemHeight);
IMG_Error_404.style.width = ElemWidth*0.75 + "px";
IMG_Error_404.style.height = ElemHeight*0.75 + "px";
Error_TIPS.innerHTML=":( 很抱歉,页面出错了";
console.log(plus.screen.resolutionHeight-header.clientHeight);
content.style.height = (plus.screen.resolutionHeight-header.clientHeight)+"px";
document.addEventListener("error", onAppPageError, false);
var onAppPageError=function(event){
console.log("#load page error target:"+event.url);
}
btnBack.addEventListener('tap',function(event){mui.back();},false)
});
</script>
</body>
</html>
珈蓝寺的夜枭 (作者)
感谢,感谢,我是爱你的!
2016-03-16 09:38