ArcGIS JavaScript自定义徽标
ArcGIS JavaScript Custom Logo
我正在尝试为ArcGIS地图应用程序插入自定义徽标。该应用程序提供了一种开箱即用的方式来上传一个完全包含在标题中的小徽标。然而,我想插入一个更大的标志,"覆盖"标题。
我能够部分地使用绝对定位和z索引命令将图像放置在页眉前面,从而使其发挥作用。然而,一旦我这样做了,位于标题中心的标题就移到了最左边,右边的分析按钮也消失了。
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>
相关文章:
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- Can用户'MediaWiki上的自定义JavaScript调用Lua模块
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 使用drupal中自定义javascript文件中的一个函数
- 使用浏览器在页面(客户端)上运行自定义JavaScript来模拟点击?怎么做
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- target=“_空白“;使用自定义javascript生成的html页面
- Meteor:选择自定义javascript和自定义css作为模板
- 用自定义javascript全局命名空间替换窗口
- 为什么自定义 JavaScript 文件放在客户端文件夹中时不在我的 Meteor 模板上呈现
- 创建自定义 Javascript 对象的惯用方法有哪些
- 当通过选择页面上所有复选框的 jQuery 脚本选中复选框时,如何触发自定义 javascript 事件
- 我的自定义javascript旋转木马无法正常工作
- 自定义javascript日期
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何获取从jQuery click()函数调用的特定于标记的自定义Javascript函数
- 自定义javascript开/关开关可以'I don’我不去上班
- 自定义Javascript Alert Popup onclick svg路径
- 定义自定义JavaScript异常的较短方法
- 如何在PlayN中添加对自定义JavaScript事件触发器的支持