提高ArcGIS Online主页展示效果-霸气的主页

本文链接：https://blog.csdn.net/arcgis_all/article/details/8186053

第一手信息，来自ArcGIS_云计算新浪微博http://weibo.com/arcgiscloud

企业级账户通过订阅，可以自定义外观，感觉如同自己的网站一样。你可以更改banner、专题内容、图库等。

如果你还不知道怎么设置主页，请看一下，走进云中，定制属于自己的ArcGIS Online（中）。

今天在网上看到了一张霸气的组织主页，我们来模拟一下。

极大的主页：

首先点击我的组织，点击编辑设置。

根据顺序，分别点击。

在通栏里面的输入框内，我们输入以下Html代码。

<div style="width: 960px;

height: 470px;

background: url(http://downloads2.esri.com/agol/org/samples/graphics/esri-q.jpg);">

</div>

保存一下，我们看一下效果。如果是自己上传图片的话，宽度960，高度180像素。这里我们设置宽度960，高度470像素。这样我们就可以得到一个极大的Banner。

圆角：

上面的两幅图，第二图的是有圆角的，很显然更加的漂亮一些！这是如何做的呢？

我们修改一下上面的Html代码。这里使用到Html5技术，所以说，需要浏览器的支持。

<div style="width: 960px;

height: 470px;

background: url(http://downloads2.esri.com/agol/org/samples/graphics/esri-q.jpg);

* 使用到Html5技术，设置圆角

-webkit-border-radius:0 0 10px 10px;

-moz-border-radius:0 0 10px 10px;

-o-border-radius:0 0 10px 10px;

border-radius:0 0 10px 10px">

</div>

到了这里大家，都注意到原来的logo和组织名称去什么地方了！原因是，遮盖住了。简单的方法，就是把logo和组织名称等等相关信息，都处理成一张底图来替换一下就可以了。

如果想设计复杂点，可以使用Html代码来实现。比如说，当中添加一个转向按钮。

<div style="width: 960px;

height: 470px;

background: url(http://downloads2.esri.com/agol/org/samples/graphics/esri-q.jpg);

* 使用到Html5技术，设置圆角

-webkit-border-radius:0 0 10px 10px;

-moz-border-radius:0 0 10px 10px;

-o-border-radius:0 0 10px 10px;

border-radius:0 0 10px 10px">

<a href="http://www.esrichina.com.cn" style="background: #65A9D7;

* 按钮的边

border:#fff 1px solid;

* 设置内边距

padding:7px 15px ;

* 内容的样式

font-family: '微软雅黑','Microsoft Yahei','arial','helvetica';

color:white;

font-size: 14px;

font-weight: hold;

vertical-align: middle;

text-decoration: none;

text-shadow: rgba(0,0,0,.4) 0 1px 0 ">Esri</a>

</div>

当然为了安全起见，Html标签和属性，也不是随意写的。只允许使用下面的标签和属性！

标记	属性
a	href、target、style
img	src、width、height、border、alt、style
span	style
table	width、height、cellpadding、cellspacing、border、style
div	style
font	size、color、style
tr	height、valign、align、style
td、th	height、width、valign、align、colspan、rowspan、nowrap、style
b、strong、i、em、br、p、li、ul、tbody