saas建站服务怎么使用代码自己写
自助建站 的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>
图片上传到后台后,右键复制获取图片地址:
效果: