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. JDK1.8和Spring 3.2.0 的坑

    上午 org.apache.catalina.core.StandardContext listenerStart严重: Exception sending context initialized e ...

  2. Interface Builder中的技巧

    在我工作中经常会遇到有人吐槽Xcode中的interface builder(以下简称IB)不好用的开发者.在我看来,IB是一个非常棒的可视化开发工具,可以非常快捷的设置UI控件的大部分常用属性.下面 ...

  3. iOS开发 Coretext基本用法

    转至 http://blog.csdn.net/fengsh998/article/details/8691823 API接口文档. https://developer.apple.com/libra ...

  4. HashMap 和 Hashtable 的同和不同

    综述 可以直接根据 hashcode 值判断两个对象是否相等吗?肯定是不可以的,因为不同的对象可能会生成相同的 hashcode 值.虽然不能根据 hashcode 值判断两个对象是否相等,但是可以直 ...

  5. Java中的BigInteger在ACM中的应用

    Java中的BigInteger在ACM中的应用 在ACM中的做题时,常常会遇见一些大数的问题.这是当我们用C或是C++时就会认为比較麻烦.就想有没有现有的现有的能够直接调用的BigInter,那样就 ...

  6. UVA - 1416 Warfare And Logistics (最短路)

    Description The army of United Nations launched a new wave of air strikes on terroristforces. The ob ...

  7. Solidworks提示字体Arial Unicode MS安装不正确,PDF文件中一个或多个文本字串可能遗失怎么办

    从以下网站下载Arial Unicode MS字体,WIN7的直接安装即可,XP的放到windows\fonts文件夹内.重启Solidworks即可 http://font.chinaz.com/1 ...

  8. PS 抠图如何使用通道法处理头发

      通道抠图法抠出美女飘逸头发-PS抠图实例教程 抠图更换背景后效果图 通道抠图法抠出美女飘逸头发-PS抠图实例教程 教程步骤: 1  打开原图,进入通道面板. 通道抠图法抠出美女飘逸头发-PS抠图实 ...

  9. 本机上使用Three.js载入纹理

    怎样载入纹理 // 首先, 创建一个纹理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var m ...

  10. 用 Sencha Touch 构建移动 web 应用程序

    Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载 ...