ArcGIS JavaScript自定义徽标
我正在尝试为ArcGIS地图应用程序插入自定义徽标。该应用程序提供了一种开箱即用的方式上传一个完全包含在标题中的小徽标。然而,我想插入一个更大的标志“覆盖”标题 我能够部分地实现这一点,使用绝对定位和z-index命令将图像放置在标题前面。然而,一旦我这样做了,标题中心的标题移到了最左边,右边的分析按钮消失了 Web AppBuilder模板下载包含多个html、.js、.json和.css文件。我使用index.html文件来放置徽标 当我在.html文件中插入一个徽标时,你有没有想过为什么标题会移到左边,而分析工具按钮会从标题中消失?我应该在另一个文件中插入徽标吗 多谢各位 index.html文件中的示例代码:ArcGIS JavaScript自定义徽标,javascript,html,Javascript,Html,我正在尝试为ArcGIS地图应用程序插入自定义徽标。该应用程序提供了一种开箱即用的方式上传一个完全包含在标题中的小徽标。然而,我想插入一个更大的标志“覆盖”标题 我能够部分地实现这一点,使用绝对定位和z-index命令将图像放置在标题前面。然而,一旦我这样做了,标题中心的标题移到了最左边,右边的分析按钮消失了 Web AppBuilder模板下载包含多个html、.js、.json和.css文件。我使用index.html文件来放置徽标 当我在.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>
这是因为您使用了绝对定位,现在没有任何东西可以将文本推到右侧。只需在title文本元素上添加右边距,就可以开始了 见此: img{高度:60px;} span{高度:60px;显示:内联块;} p{位置:绝对;} o{左边距:30px;} 绝对定位 正常定位
绝对定位-用于文本的文本偏移。我能够在config.json文件中找到title元素,并设置超出新插入徽标的边距。但是,小部件/分析工具按钮仍然缺少,它们最初位于页面的右侧。可能有一个小部件容器,但我还没有找到它。我是否可以使用其他命令插入不会弄乱整个标题的徽标?不确定我是否可以在没有看到它的情况下帮助您。。。你确定你没有修改那些小部件使用的一些CSS吗?我已经修改了小部件使用的CSS,但这只是为了在选择小部件后提供信息。我可以删除自定义徽标,甚至将其设置为“相对”,小部件将原封不动地重新出现。如果设置为“相对”,则徽标位于页面顶部,应用程序将被推到其下方。我可以和你分享一些代码吗?网站和web开发的新功能。您可以在问题中添加相关代码和/或制作一个复制示例的工作代码段。我在上面插入了相同的代码。我插入了前几行,以img开头。我还在body标签之间插入了以下内容。