自助建站的saas服務(wù)對不懂設(shè)計(jì)的用戶是非常容易上手的，但是對于前段開發(fā)者來說，如果想要服務(wù)商沒有提供的樣式時(shí)，要怎么操作呢？
以華為云速建站服務(wù)為例，具體操作如下：
點(diǎn)擊插件，通過高級代碼功能來自己寫樣式
將樣式以及js引用放置在</head>之前：
<style type="text/css">
ul.list-show li a{line-height: 36px;margin: 20px 0;font-size: 16px;}
ul.list-show li:hover a {font-weight: bold;color: #333333;}
ul.list-show li a span {padding:0 4px;line-height: 16px;text-align: middle;background: #cccccc;display:inline-block;margin-right: 25px;color: #ffffff;font-size: 12px;}
ul.list-show li div img {padding: 5px;margin-left: 30px;}
#t1 span {background: #ff4656;}
#t2 span {background: #ff784a;}
#t3 span {background:#fcc350;}
</style>
<script src="https://libs.baidu.com/jquery/1.4.2/jquery.min.js\></script>
<script>
function show(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display","block");
$(objDiv).css("left", event.clientX);
$(objDiv).css("top", event.clientY + 10);
}
function hide(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display", "none");
}
</script>
將內(nèi)容放置在插件內(nèi)（通過高級代碼插件調(diào)整內(nèi)容位置，以及高度寬度，自助更換文字，以及圖片地址）：
<div class="border-right:1px solid #eaeaea;">
<ul class="list-show">
<li id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">
<a><span>1</span>鼠標(biāo)放上去1</a>
<div id="mydiv1" style="display:none;">
<img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_21.jpg\ />
</div>
</li>
<li id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">
<a><span>2</span>鼠標(biāo)放上去2</a>
<div id="mydiv2" style="display:none;">
<img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_59.jpg\ />
</div>
</li>
<li id="t3" onMouseOver="javascript:show(this,'mydiv3');" onMouseOut="hide(this,'mydiv3')">
<a><span>3</span>鼠標(biāo)放上去3</a>
<div id="mydiv3" style="display:none;">
<img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_43.jpg\ />
</div>
</li>
<li id="t4" onMouseOver="javascript:show(this,'mydiv4');" onMouseOut="hide(this,'mydiv4')">
<a><span>4</span>鼠標(biāo)放上去4</a>
<div id="mydiv4" style="display:none;">
<img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_35.jpg\ />
</div>
</li>
<li id="t5" onMouseOver="javascript:show(this,'mydiv5');" onMouseOut="hide(this,'mydiv5')">
<a><span>5</span>鼠標(biāo)放上去5</a>
<div id="mydiv5" style="display:none;">
<img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_15.jpg\ />
</div>
</li>
</ul>
</div>
圖片上傳到后臺后，右鍵復(fù)制獲取圖片地址：
效果：
