华为云计算 云知识 saas建站服务怎么使用代码自己写

saas建站服务怎么使用代码自己写

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

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

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

images_161101878623855

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

将内容放置在插件内(通过高级代码插件调整内容位置,以及高度宽度,自助更换文字,以及图片地址):

<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>

images_161101883680443

图片上传到后台后,右键复制获取图片地址:

images_16110188541660

效果:

images_161101886520172

上一篇:“四个现代化”,让企业实现应用敏捷 下一篇:如何提高CDN缓存命中率

云速建站 CloudSite

华为云建站为您提供上千套网站模板,覆盖上百行业,无论您需要个人网站模版、企业网站模版、电商行业模板还是HTML5网站模版、H5响应式网站模板,华为云建站都能满足您的需求,让您零基础快速搭建个人网站,企业网站、电商网站。

五站合一:PC+移动+小程序+微信公众号+APP

立即使用最新活动                
帮助文档                

其他问题||https://support.huaweicloud.comhttps://support.huaweicloud.com/cloudsite_faq/cloudsite_faq_190731021.html,云速建站自定义策略||https://support.huaweicloud.comhttps://support.huaweicloud.com/adaptive-cloudsite/adaptive_3002.html,投票功能设置||https://support.huaweicloud.comhttps://support.huaweicloud.com/adaptive-cloudsite/adaptive_9004.html,续费站点||https://support.huaweicloud.comhttps://support.huaweicloud.com/adaptive-cloudsite/adaptive_4003.html,站点管理||https://support.huaweicloud.comhttps://support.huaweicloud.com/adaptive-cloudsite/adaptive_4000.html

https://www.huaweicloud.com/product/cloudsite.html