自助建站 的saas服务对不懂设计的用户是非常容易上手的，但是对于前段开发者来说，如果想要服务商没有提供的样式时，要怎么操作呢？

以华为云速 建站 服务为例，具体操作如下：

点击插件，通过高级代码功能来自己写样式

将样式以及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>

将内容放置在插件内（通过高级代码插件调整内容位置，以及高度宽度，自助更换文字，以及图片地址）：

<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>鼠标放上去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>鼠标放上去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>鼠标放上去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>鼠标放上去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>鼠标放上去5</a>
            <div id="mydiv5" style="display:none;">
                <img src="https://prodefd76f1-pic6.ysjianzhan.cn/upload/5f225ebf4c8e9_15.jpg\ />
                </div>
        </li>
        </ul>
</div>

图片上传到后台后，右键复制获取图片地址：

效果：