1. [图片] htmlui.jpg


​2. [代码]下面源码复制到快手(WWW.AAU.CN)中运行即可     
import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;text="HTMLayout - 无边框窗口";border="none";right=599 )
winform.add(  )
/*}}*/
 
import win.util.round;
win.util.round(winform,,,6,6); //窗体改成圆角,最后两个参数指定圆角半径
 
import web.layout;
import web.layout.behavior.windowCommand;
import web.layout.behavior.windowSizer;
 
//创建网页浏览器
var wbLayout = web.layout( winform )
 
wbLayout.html = /**
<div #title-bar command="window-caption">  
    <div .buttons> 
        <a command="window-min">0</a>
        <a command="window-max">1</a>
        <a command="window-close">r</a>
    </div> 
</div>
 
<div />  
**/
 
wbLayout.css = /**
html{
    background:#999;/*网页背景色*/
    border-radius:4px; /*8像素大小的圆角*/
}http://www.enterdesk.com/special/shouhui/​
 
#title-bar{ 手绘图片
    behavior:windowCommand;/*添加交互行为:windowCommand*/
    width:100%; /*宽度撑满窗口*/
    height:21px; /*高度36像素,px表示单位为像素*/
    background:#CCCCCC; /*背景色*/

 
#title-bar .buttons { 
    width:85px;/*宽度85像素*/
    height:16px;/*高度16像素*/
    flow:horizontal;/*内部水平布局横向排列按钮*/
     
    position:absolute;/*使用绝对定位*/
    right:2px;/*右边距2像素*/
    top:0px;/*顶边距0像素*/
}
 
#title-bar a[command]{
    display:block; /*显示为块模式,才能指定宽高*/
    width:16px;/*宽度16像素*/
    height:16px;/*高度16像素*/
    font-family:"Marlett"; /*该字体显示按钮符号*/
    padding:4px 2px 5px 4px;/*上右下左内边距*/
}
#title-bar a[command]:hover{ 
    background:#999;/*鼠标移到节点上改变背景色*/
}
  
#title-bar a[command="window-restore"]{ 
    content:"2";/*自动转换到还原按钮时,改变内部文本为还原符号*/
}
**/
 
winform.show() 
win.loopMessage();

HTML,CSS 无边框桌面窗口的更多相关文章

  1. C# WinForm设置窗口无边框、窗口可移动、窗口显示在屏幕中央、控件去边框

    1)窗口去除边框 在组件属性中FormBorderStyle设为None 2)窗口随着鼠标移动而动 添加引用using System.Runtime.InteropServices; 在初始化控件{I ...

  2. winform无边框窗口拖动

    无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...

  3. 【Qt】Qt之自定义界面(实现无边框、可移动)【转】

    简述 UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性.有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. 爱美之心人皆有之.其实软件 ...

  4. Qt之自定义界面(实现无边框、可移动)

    简述 UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性.有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位和特点. 爱美之心人皆有之.其实软件 ...

  5. pyqt4制作透明无边框窗体

    用PyQt做了一个无边框登陆窗口,效果如下: 下面是代码: # -*- coding: utf-8 -*- from PyQt4 import QtGui ,Qt ,QtCore image=QtGu ...

  6. QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

    qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...

  7. 【转】MFC 无边框窗口的拖动

    MFC中无边框窗口的拖动 void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDO ...

  8. electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

    为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进 ...

  9. pyqt5设计无边框窗口(一)

    import sys from PyQt5 import QtGui,QtCore from PyQt5 import QtCore, QtGui, QtWidgets ############### ...

随机推荐

  1. 快速掌握分布式搜索引擎ElasticSearch(一)

    前言 由于最近在项目中接触使用到了ElasticSearch,从本篇博客开始将给大家分享这款风靡全球的产品.将涉及到ElasticSearch的安装.基础概念.基本用法.高级查询.中文分词器.与Spr ...

  2. 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc

    转载 : http://www.arm9home.net/read.php?tid-83474.html 本人是第一次在此发帖,希望大家多多支持,发帖目的是为了分享,分享的目的是传递开源的精神.Tin ...

  3. lstm作的第一首诗,纪念

    黄獐春风见破黛,十道奇昌犹自劳. 开领秦都色偏早,未知长柳是来恩. 争时欲下花木湿,早打红筵枝上香. 酣质矫胶麦已暮,丝窗瑞佩满含龙. 感觉有点意思哈,花木对应枝上,还有点对仗的意味. 于是接着又弄了 ...

  4. 20. Spring Boot Servlet【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/52069482 Web开发使用 Controller 基本上可以完成大部分需求,但是我们还可 ...

  5. django_session

    基于cookie做用户验证时:敏感信息不适合放在cookie中 session依赖cookie session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 s ...

  6. Unity开发规范(个人习惯,仅供參考)

    近期整理了一下unity里的文件夹使用和脚本上的一些规范,这个看个人习惯,仅供參考 1.unity中的Project文件夹      总体文件夹大致例如以下:            按资源种类分目录. ...

  7. 简单的看Unicode和UTF-8的区别

    作者:uuspider链接:http://www.zhihu.com/question/23374078/answer/65352538来源:知乎著作权归作者所有,转载请联系作者获得授权. 举一个例子 ...

  8. bootstrap之鼠标操作

    TouchLongClick package io.appium.android.bootstrap.handler; import android.os.SystemClock; import co ...

  9. sed系列:行或者模式匹配删除特定行

    “p” command prints the buffer (remember to use -n option with “p”) “d” command is just opposite, its ...

  10. 2017-07-19-CR 和 LF

    CR 和 LF CR - Carriage Return 回车 LF - Line Feed 换行 Carriage 打字机滑轨.老式打字机,打字时,滑轨从左往右移动,一行打完了,需要把滑轨调回到最左 ...