请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
3
帖子
0
勋章
10
Y币

[其他] apicloud从0到1第40页问题

[复制链接]
发表于 2018-6-23 22:25:00
本帖最后由 逸韵清风 于 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>


效果.png
书上的效果.png
1
帖子
0
勋章
214
Y币
容震想想 发表于 2018-8-10 16:39
解决了吗 一样的问题啊

css写的时候 header .xx 空格不可遗漏
48
帖子
4
勋章
11
Y币
图片资源你添加到项目里面了吗
3
帖子
0
勋章
10
Y币
本帖最后由 逸韵清风 于 2018-6-24 17:51 编辑

增加了这个图片了啊
有保存这个图片啊.png
差别.png
3
帖子
0
勋章
10
Y币
老师们,给说说我错在哪啊
13
帖子
6
勋章
105
Y币
url后面括号里面加引号
0
帖子
0
勋章
4
Y币
解决了吗 一样的问题啊
18
帖子
0
勋章
190
Y币
容震想想 发表于 2018-8-10 16:39
解决了吗 一样的问题啊

资源引入进来
0
帖子
0
勋章
4
Y币

嗯 少了个空格
0
帖子
0
勋章
4
Y币
Obsessed 发表于 2018-8-10 16:46
css写的时候 header .xx 空格不可遗漏

解决了 谢谢
您需要登录后才可以回帖 登录

本版积分规则