HTML 实现仿 Windows 桌面主题特效
Posted 海拥✘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 实现仿 Windows 桌面主题特效相关的知识，希望对你有一定的参考价值。
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：
🌟【100个摸鱼小游戏】（源码永久免费开源）
直接跳到末尾 参与评论送书
直接跳到末尾 领取完整源码
快速跳转 如何高效学习
目前已上线的小游戏有50+个
游戏入口地址有多个：
- 摸鱼入口：https://haiyong.site/moyu/
- 海拥开发文档：https://haiyong.site/doc/
- GitHub 源码：https://github.com/wanghao221/moyu
html 实现仿 Windows 桌面主题特效
在线演示地址：https://haiyong.site/win/
源码可在文末免费获取
✨ 项目基本结构
目录结构如下：
├── jsLib
│ ├── jquery.winResize.js
│ ├── jquery-1.6.2.js
│ ├── jquery-1.6.2.min.js
│ ├── jquery-ui-1.8.16.custom.min.js
│ ├── myLib.js
│ ├── external
│ ├── jquery-smartMenu
│ ├── themes
│ └── ui
├── icon
├── images
├── wallpapers
└── index.html
🧡 HTML 代码
HTML 主要代码：
<a href="https://haiyong.site" class="powered_by">Powered by haiyong.site 注意：双击桌面应用即可点开</a>
<ul id="deskIcon">
<li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span>
<div class="text">海拥
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/></span>
<div class="text">CSDN
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/></span>
<div class="text">掘金
<div class="right_cron"></div>
</div>
</li>
<li class="desktop_icon" id="win11" path="https://space.bilibili.com/63551025"> <span class="icon"><img src="icon/bilibili.png"/></span>
<div class="text">bilibili
<div class="right_cron"></div>
</div>
</li>
</ul>
<div id="taskBar">
<div id="leftBtn"><a href="#" class="upBtn"></a></div>
<div id="rightBtn"><a href="#" class="downBtn"></a> </div>
<div id="task_lb_wrap">
<div id="task_lb"></div>
</div>
</div>
<div id="lr_bar">
<ul id="default_app">
<li id="app0"><img src="icon/icon1.png" title="海拥" path="https://haiyong.site/"/></li>
<li id="app2"><img src="icon/icon0.png" title="工具" path="https://haiyong.site/tools"/></li>
<li id="app3"><img src="icon/icon2.png" title="交流群" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75"/></li>
<li id="app4"> <img src="icon/icon3.png" title="联系作者" path="https://haiyong.site/img/qrcode/weixin.png"/></li>
<li id="app1"><img src="icon/icon11.png" title="Jquery学堂" path="http://www.jq22.com/?Jquery.aspx"/></li>
</ul>
<div id="default_tools"> <span id="showZm_btn" title="显示桌面"></span><span id="shizhong_btn" title="时钟"></span><span id="weather_btn" title="天气"></span> <span id="them_btn" title="主题"></span></div>
<div id="start_block"> <a title="开始" id="start_btn"></a>
<div id="start_item">
<ul class="item admin">
<li><span class="adminImg"></span> Admin</li>
</ul>
<ul class="item">
<li><span class="sitting_btn"></span>系统设置</li>
<li><span class="help_btn"></span>使用指南 <b></b></li>
<li><span class="about_btn"></span>关于我们</li>
<li><span class="logout_btn"></span>退出系统</li>
</ul>
</div>
</div>
</div>
</div>
💛 CSS 代码
CSS主要代码：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
margin:0;
padding:0;
table
border-collapse:collapse;
border-spacing:0;
fieldset, img
border:0;
address, caption, cite, code, dfn, em, strong, th, var
font-style:normal;
font-weight:normal;
ol, ul, li
list-style:none;
caption, th
text-align:left;
h1, h2, h3, h4, h5, h6
font-size:100%;
font-weight:normal;
q:before, q:after
content:”;
abbr, acronym
border:0;
*
margin:0;
padding:0
页面基础样式
/*页面基础样式*/
html
overflow:hidden;
body
font-size: 12px;
background:#06C url(wallpapers/menglong2.jpg) repeat scroll center center;
font-family: Tahoma, Geneva, sans-serif;
margin:0;
padding:0
a
font-size: 12px;
a:link
text-decoration: none;
color: #FFF;
a:visited
text-decoration: none;
color: #FFF;
a:hover
text-decoration: none;
color: #FFF;
a:active
text-decoration: none;
color: #FFF;
.corner /*只在支持css3的高级浏览器起作用*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
box-shadow:2px 2px 8px #444;
.loading
background:url(images/loading.gif) no-repeat center center
界面布局样式
/*界面布局样式*/
.powered_by
width:160px;
height:25px;
line-height:25px;
background:url(images/powered-by.png) no-repeat left center;
color:#CCC;
text-indent:26px;
display:block;
outline:none;
position:absolute;
right:20px;
bottom:60px;
任务栏样式
#taskBar
width:100%;
height:40px;
line-height:40px;
position:absolute;
right:0;
bottom:0;
#leftBtn
width:100px;
height:40px;
float:left;
display:none;
#rightBtn
width:100px;
height:40px;
float:right;
display:none;
#leftBtn a, #rightBtn a
display:block;
width:100px;
height:40px;
outline:none;
background-image:url(images/lr_btn.png);
background-repeat:no-repeat;
#leftBtn a
background-position:left top;
#rightBtn a
background-position:right top;
#leftBtn a:hover
background-position:left bottom
#rightBtn a:hover
background-position:right bottom
#task_lb_wrap
height:40px;
line-height:40px;
overflow:hidden;
position:relative;
#task_lb
width:auto;
height:auto;
position:absolute;
top:0;
right:0;
#task_lb a
display:inline-block;
outline:none;
width:100px;
height:40px;
background-image:url(images/taskHdBtn.png);
background-repeat:no-repeat;
text-align:center;
line-height:40px;
float:right
#task_lb .defaultTab
background-position:right top;
color:#ccc
#task_lb .defaultTab:hover
background-position:right bottom;
#task_lb .selectTab
background-position:left top;
color:#FFF
#task_lb .selectTab:hover
background-position:left bottom
#shizhong_btn
background:url(images/timer.png) no-repeat center center
#weather_btn
background:url(images/wheather.png) no-repeat center center
#sound_btn
background:url(images/sound_open.png) no-repeat center center
#showZm_btn
background:url(images/show-desktop.png) no-repeat center center
#them_btn
background:url(images/skin.png) no-repeat center center
侧边浮动栏
#lr_bar
width:73px;
height:auto;
position:absolute;
left:0;
top:30px;
background:url(images/dock_top.png) repeat-y left top;
z-index:90;
-moz-box-shadow: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
box-shadow:0px 3px 15px #444;
padding-top:5px;
开始按钮样式
#start_block
width:73px;
height:56px;
position:absolute;
left:0;
bottom:-56px;
backgroundjs 数字递增特效 仿支付宝我的财富 HTML5