|
[多端开发]
apicloud3.0背景图片问题
[复制链接]
为什么我在body里插入图片他会显示在底部,而不是body整体,这样写代码?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<link rel="stylesheet" type="text/css" href="./css/modifyNick.css" />
<style type="text/css">
.wrap {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
}
header {
height: 44px;
width: 100%;
text-align: center;
background-color: #250ef3;
color: rgb(27, 12, 240);
line-height: 44px;
font-size: 20px;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
}
footer {
height: 30px;
width: 100%;
background-color: #ffffff;
color: white;
line-height: 30px;
text-align: center;
}
.empty {
text-align: center;
padding: 120px 0;
}
header {
background-color: #12e7cb;
}
header ul li {
height: 50px;
line-height: 50px;
text-align: center;
display: none;
color: #323237;
position: relative;
font-size: 18px;
}
header ul li.active {
display: block;
}
.flex-con {
overflow: auto;
}
#left{
border:1px solid #4390af; border-radius: 6px; background-color: #55abce;
display:block;
width:30%;
top: 40% auto;
text-align: center;
margin-top: 4px;
font-size: 18px;
padding: 1% 5%;
color:#ffffff;
cursor:pointer;
line-height:20px;
float:left;
}
#right{ border:1px solid #4390af; border-radius: 6px; background-color: #55abce;
display:block;
width:30%;
top: 40% auto;
text-align: center;
margin-top: 4px;
font-size: 18px;
padding: 1% 5%;
color:#ffffff;
cursor:pointer;
line-height:20px;
float:left;
float:right;
}
#frame{background-color: #ffffff;
}
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
<header>
<a>欢迎进入主页!</a>
<h3>共享单车时空地图APP</h3>
</header>
<div id="frame">
<div id="left" style="margin-top:450px;" tapmode="active" onclick="login()">登录</div>
<div id="right" style="margin-top:450px;" tapmode="active" onclick="regis();">注册账号</div>
</div>
<div id="footer" class="border-t">
</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript" src="./script/login.js"></script>
<script type="text/javascript">
apiready = function () {
$api.fixStatusBar($api.dom('header'));
api.setStatusBarStyle({
style: 'dark',
color: '#6ab494'
});
funIniGroup();
}
function funIniGroup() {
var eHeaderLis = $api.domAll('header li'),
frames = [];
for (var i = 0, len = eHeaderLis.length; i < len; i++) {
frames.push({
name: 'frame' + i,
url: '../html/frame' + i + '.html',
bgColor: 'rgba(0,0,0,.2)',
bounces: true
})
}
api.openFrameGroup({
name: 'group',
scrollEnabled: false,
rect: {
x: 0,
y: $api.dom('header').offsetHeight,
w: api.winWidth,
h: $api.dom('#main').offsetHeight
},
index: 0,
frames: frames
}, function (ret, err) {
});
}
// 随意切换按钮
function randomSwitchBtn(tag) {
if (tag == $api.dom('#footer li.active')) return;
var eFootLis = $api.domAll('#footer li'),
eHeaderLis = $api.domAll('header li'),
index = 0;
for (var i = 0, len = eFootLis.length; i < len; i++) {
if (tag == eFootLis[i]) {
index = i;
} else {
$api.removeCls(eFootLis[i], 'active');
$api.removeCls(eHeaderLis[i], 'active');
}
}
$api.addCls(eFootLis[index], 'active');
$api.addCls(eHeaderLis[index], 'active');
api.setFrameGroupIndex({
name: 'group',
index: index
});
}
function login() {
api.openWin({
name: 'login',
url: './html/login.html'
})
}
function regis() {
api.openWin({
name: 'register',
url: './html/register.html'
})
}
</script>
</html>
|
-
|