珈蓝寺的夜枭
珈蓝寺的夜枭
  • 发布:2016-03-15 20:59
  • 更新:2016-03-15 21:40
  • 阅读:1353

content && header之间的亮条怎么消除

分类:MUI

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-15 20:59 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

.mui-bar-nav{  
 -webkit-box-shadow: none;  
    box-shadow: none;  
}

该问题目前已经被锁定, 无法添加新回复