簡體   English   中英

ArcGIS JavaScript自定義徽標

[英]ArcGIS JavaScript Custom Logo

我正在嘗試為ArcGIS制圖應用程序插入自定義徽標。 該應用程序具有開箱即用的方式來上傳完全包含在標題中的小徽標。 但是,我想插入一個較大的徽標,以“覆蓋”頁眉。

我能夠使用絕對定位和z-index命令將圖像放置在標題的前面,從而部分地起作用。 但是,一旦執行此操作,位於標題中心的標題將移至最左側,而右側的分析按鈕將消失。

Web AppBuilder模板下載包含多個html,.js,.json和.css文件。 我使用index.html文件放置徽標。

我在.html文件中插入徽標后,對標題為何向左移動以及分析工具按鈕為何從標題中消失的任何想法? 我應該在其他文件中插入徽標嗎?

謝謝。

來自index.html文件的示例代碼:

        <!--[if IE 8]>
<link rel="stylesheet" type="text/css"  href="jimu.js/css/jimu-ie.css" />
<![endif]-->
    <style type="text/css">
    img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 3;
        }
    *{box-sizing: border-box;}
        body,html {
          width:100%;
          height:100%;
          margin:0;
          padding:0;
          overflow:hidden;
        }
        #main-loading{
            width: 100%;
            height: 100%;
            background-color: #2E3F60;
            text-align: center;
            overflow: hidden;
        }
        #main-loading #app-loading, #main-loading #ie-note{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #main-loading #app-loading{
    width: 100%;
    height: 100px;
  }
  #main-loading .app-name{
    font: 36px arial;
    font-weight: bold;
    position: absolute;
    z-index: 2;
  }
        #main-loading img{
            position: relative;
            display: block;
            margin: auto;
        }
        #main-loading .loading-info{
            font: 14px 'arial';
            margin-top: 50px;
            overflow: hidden;
            position: relative;
        }
        #main-loading .loading-info .loading{
            width: 260px;
            height: 4px;
            border-radius: 2px;
            background-color: #15203B;
            margin: auto;
        }
        #main-loading .loading-info .loading-progress{
            height: 4px;
            border-radius: 2px;
            background-color: #ABB2BF;
        }
        #main-loading #ie-note {
    width: 586px;
    height: 253px;
    background-image: url('images/notes.png');
    padding: 0 30px 40px 30px;
    font-size: 14px;
    color: #596679;
  }
  #ie-note .hint-title{
    height: 40px;
    line-height: 48px;
    text-align: left;
    font-weight: bold;
  }
  #ie-note .hint-img{
    background-image: url('images/hint.png');
    background-position: left;
    padding-left: 40px;
    margin-top: 20px;
    background-repeat: no-repeat;
    height: 30px;
    text-align: left;
    line-height: 30px;
    font-weight: bold;
  }
  #ie-note span{
    display: block;
    line-height: 14px;
  }
        #main-page{
            display: none;
            width: 100%;
            height: 100%;
            position: relative;
        }

        #jimu-layout-manager{
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>

這是因為您使用了絕對定位,現在沒有什么可將文本“推”到右側。 只需在標題文本元素上添加正確的邊距,就可以了。

看到這個:

 img {height: 60px;} span {height: 60px;display: inline-block;} #p {position:absolute;} #o {margin-left: 30px;} 
 <img src="http://www.mariogame.info/images/icon-facebook.png" id="p" /><span>Absolutely positioned</span> <hr /> <img src="http://www.mariogame.info/images/icon-facebook.png" /><span>Normally positioned</span> <hr /> <img src="http://www.mariogame.info/images/icon-facebook.png" /><span id="o">Absolutely positioned - text offset</span> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM