手把手从零开始教你用htmlayout/sciter写漂亮ui界面(二)

最新推荐文章于 2026-05-12 09:30:30 发布

原创

最新推荐文章于 2026-05-12 09:30:30 发布 · 2.1k 阅读

标签

#html #css #css3 #ui

书接上回: 手把手从零开始教你用htmlayout/sciter写漂亮ui界面(一)

再次鸣谢下aardio软件对htmlayout的大力封装, 所以用起来就简单多了. 只需要考虑html和css的耦合部分

上次学到, 如何用htmlahyout来贴图, 还有一些csss!属性的使用

这次我们写一个完整的 UI界面皮肤管理界面.

参考主界面的html和css,稍作修改即可.如下:

<html>
    <link href="skin.css" rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
            <div #space>更改外观</div>
            <div #btn-close command="window-close"/>
        </div>
    </body>
</html>

body{
    margin:0px;
    background-image:url(img/001/skin.png);
    background-repeat:expand stretch-left stretch-middle  stretch-right;
    background-position:280 2 2 680;
    foreground-image:url(img/border.png);
    foreground-repeat:expand stretch-left stretch-middle  stretch-right;
    foreground-position:5 5 5 5;
}
#header{
    //background-color:red;
    width:100%;
    height:70px;
    flow:horizontal;
    behavior:windowCommand;
}
#space{
    width:100%%;
    height:20px;
    font-weight:bold;
    font-size:14px;
    color:white;
    padding:5 0 0 8;
}
#btn-close{
    background-image:url(img/btn_close_normal.png);
    width:39px;
    height:19px;
}
#btn-close:hover{
    background-image:url(img/btn_close_highlight.png);
}
#btn-close:active{
    background-image:url(img/btn_close_down.png);
}

增加一个蒙版main:

<html>
    <link href="skin.css" rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
            <div #space>更改外观</div>
            <div #btn-close command="window-close"/>
        </div>
        <div #main>
             
        </div>
    </body>
<

最低0.47元/天解锁文章