|
[其他]
apicloud从0到1第40页问题
[复制链接]
本帖最后由 逸韵清风 于 2018-6-23 22:44 编辑
这个代码按书上写的,怎么出来效果和书上不一样呢?箭头和天天水果的图片也没有显示出来,老师给说下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
header{
width:100%;
height: 50px;
background-color: #e1017e;
}
header.left{
position: absolute;
bottom: 0;
left:0;
width:100px;
height:50px;
}
header.left.arrow{
position: absolute;
bottom: 21px;
left:11px;
width:13px;
height:8px;
background: url(../image/arrow_down.png);
background-size: 13px 8px;
background-position: center center;
background-repeat: no-repeat;
-webkit-transition:200ms;
transition: 200ms;
}
header.left.arrow.active{
-webkit-transition:rotate(180deg);
transform: :rotate(180deg)
}
header.left.city{
position: relative;
z-index: 2;
width:100%;
height:50px;
padding-left: 27px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
header.center{
width:100%;
height:50px;
background: url (../image/home_title.png);
background-size: 74px 19px;
background-position: center center;
background-repeat: no-repeat;
}
header.right{
position: absolute;
bottom: 0;
right: 0;
width:40px;
height:50px;
background: url(../image/home_membercenter.png);
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header id="header">
<div class="left">
<div class="arrow" id="arrow" ></div>
<div class="city" id="city" >北京市</div>
</div>
<div class="center" ></div>
<div class="right" ></div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
// $api.fixStatusBar(
// $api.byId("header")
// );
};
</script>
</html>
|
-
-
|