1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div id="x-desktop"> <锾攒揉敫a href="#" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a> <dl id="x-shortcuts"> <dt id="grid-win-shortcut"> <a href="#"><img src="images/s.gif" /> <div>Grid Window</div> </a> </dt> <dt id="acc-win-shortcut"> <a href="#"><img src="images/s.gif" /> <div>Accordion Window</div> </a> </dt> </dl></div><div id="ux-taskbar"> <div id="ux-taskbar-start"></div> <div id="ux-taskbuttons-panel"></div> <div class="x-clear"></div></div>
4、书写css代码。html, body { background: #3d71b8 url(../wal造婷用痃lpapers/desktop.jpg) no-repeat left top; font: normal 12px tahoma, arial, verdana, sans-serif; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; }.start { background-image: url( ../images/taskbar/black/startbutton-icon.gif ) !important; }.bogus { background-image: url( ../images/bogus.png ) !important; }.logout { background-image: url( ../images/logout.gif ) !important; }.settings { background-image: url( ../images/gears.gif ) !important; }#dpanels { width: 250px; float: right; }#dpanels .x-panel { margin: 15px; }#dpanels .x-date-picker { border: 0 none; border-top: 0 none; background: transparent; }#dpanels .x-date-picker td.x-date-active { background: #ffffff; }#dpanels .x-date-picker { width: 100% !important; }#x-desktop { width: 100%; height: 100%; border: 0 none; position: relative; overflow: hidden; zoom: 1; }#ux-taskbar .x-btn { float: left; margin: 1px 0 0 1px; position: relative; }#ux-taskbar-start .x-btn { float: left; margin: 0; position: relative; }#ux-taskbar button {text-align: left; color: #ffffff; }#title-bar-wrapper { height: 35px; }#title-bar { color: #225599; padding: 9px 7px; font: bold 16px tahoma, arial, verdana, sans-serif; float: left; }#x-logout { float: right; padding: 6px 7px; }.x-btn-text-icon .x-btn-center .logout { background-position: 0pt 3px; background-repeat: no-repeat; padding: 3px 0pt 3px 18px; }#ux-taskbar { background: transparent none; height: 30px; margin: 0; padding: 0; position: relative; z-index: 12001; }.x-btn-icon .ux-taskbutton-center .x-btn-text { background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0; }.x-btn-icon .ux-taskbutton-center { padding: 1px; }.x-btn-text-icon .ux-taskbutton-center .x-btn-text { background-position: 0 6px; background-repeat: no-repeat; padding: 7px 0px 7px 20px; }.x-btn-text-icon .ux-startbutton-center .x-btn-text { background-position: 0 4px; background-repeat: no-repeat; color: #000000 !important; font-weight: bold; padding: 7px 0px 7px 28px; }
5、书写并添加js代码。<script src="js/ext-base.js"></script><!-- ENDLIBS --><script src="js/ext-all.js"></script><!-- DESKTOP --><script src="js/StartMenu.js"></script><script src="js/TaskBar.js"></script><script src="js/Desktop.js"></script><script src="js/App.js"></script><script src="js/Module.js"></script><script src="sample.js"></script>
6、代码整体结构。
7、查看效果。
