菜单 搜索
首页 前端知识 HTML 实现仿 Windows 桌面主题特效

HTML 实现仿 Windows 桌面主题特效

2024-10-29 11:10:41 前端知识 前端哥 997 804 我要收藏 
    <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>




### []( )💛 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;

background:url(images/dock_b.png) no-repeat left bottom;

-moz-box-shadow: 0px 5px 15px #444;

-webkit-box-shadow: 0px 5px 15px #444;

box-shadow:0px 5px 15px #444;

}

#start_btn {

display:block;

width:48px;

height:48px;

background:url(images/start-btn.png) no-repeat center bottom;

margin:4px auto 0 auto;

outline:none;

z-index:501;

cursor:pointer;

}

#start_btn:hover {

background-position:center top

}




开始菜单样式

#start_item {

width:180px;

height:auto;

padding:5px 0;

background: url(images/start_item_bg.png) repeat;

position:absolute;

z-index:500;

left:75px;

bottom:0px;

display:none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 2px 2px 5px #444;

-webkit-box-shadow: 2px 2px 5px #444;

box-shadow:2px 2px 5px #444;

}

#start_item .item {

width:100%;

height:auto;

border-top:1px solid #999

}

#start_item .item li {

width:98%;

height:24px;

overflow:hidden;

zoom:-1;

padding:6px 0;

line-height:24px;

margin:0 auto;

color:#FFF;

}

#start_item .item li:hover {

background:url(images/start_item_over.png) repeat-x left bottom;

cursor:pointer

}

#start_item .item li span {

display:inline-block;

width:24px;

height:24px;

background-image:url(images/start_itembtn.png);

background-repeat:no-repeat;

margin:0 10px;

float:left;

}

#start_item .item li b {

width:10px;

height:24px;

background:url(images/item-child.png) no-repeat center center;

display:inline-block;

float:right;

margin-right:10px;

}

#start_item .sitting_btn {

background-position:left -140px;

}

#start_item .help_btn {

background-position:left -44px;

}

#start_item .about_btn {

background-position:left -164px;

}

#start_item .logout_btn {

background-position:left -20px;

}

#start_item .admin {

border-bottom:1px solid #444;

padding:5px 0;

border-top:none;

}

#start_item .item li .adminImg {

border:1px solid #E0E0E0;

background-position:left -92px;

background-color:#FFF;

}




默认小工具

#default_tools {

width:71px;

height:auto;

overflow:hidden;

zoom:-1;

padding:5px 0;

border-top:1px solid #555;

margin:0 auto;

}

#default_tools span {

width:30px;

height:30px;

display:inline-block;

margin:0 0 0 3px;

cursor:pointer;

float:left;

}




默认应用程序

#default_app {

width:73px;

height:auto;

padding:5px 0;

position:relative;

}

#default_app li {

width:48px;

height:48px;

overflow:hidden;

margin:3px auto;

padding:6px;

}

#default_app li img {

width:48px;

height:48px;

cursor:pointer;

}

#default_app .btnOver {

background:url(images/default_appbtn_bg.png) no-repeat center center

}




重写右键菜单样式

.smart_menu_box .smart_menu_a {

color:#333

}

.smart_menu_box .smart_menu_li_separate {

border-bottom:1px solid #d6d5d5;

}




窗口样式

.windows {

min-width:240px;

min-height:200px;

width:700px;

height:560px;

position:absolute;

display:none;

background-color:#E0E0E0;

}

.win_title {

width:100%;

height:26px;

line-height:26px;

background:#E0E0E0 url(images/titlebar_bg_cur.png) repeat-x left center;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

.win_title b {

color:#333;

margin-left:10px;

}

.win_title .win_btnblock {

width:auto;

padding:0 5px;

float:right;

height:17px;

margin:4px 3px 0 0;

}

.win_title .win_btnblock a {

display:inline-block;

width:26px;

height:17px;

background-image:url(images/windowBtn.png);

background-repeat:no-repeat;

float:left;

margin:0 1px;

outline:none;

}

.winMaximize {

background-position:right bottom;

}

.winMaximize:hover {

background-position:right top;

}

.winHyimize {

background-position:-26px bottom;

}

.winHyimize:hover {

background-position:-26px top;

}

.winClose {

background-position:-52px top;

}

.winClose:hover {

background-position:-52px bottom;

}

.winMinimize {

background-position:left bottom;

}

.winMinimize:hover {

background-position:left top;

}

.winframe {

width:100%;

height:auto;

margin:0 0 0 3px;

padding:0

}




桌面图标

#deskIcon {

width:100%;

height:auto;

overflow:hidden;

zoom:-1;

position:relative;

}

.desktop_icon {

width:86px;

height:88px;

cursor:pointer;

margin-left:-1000px;

text-align:center;

}

.desktop_icon span {

display:block;

}

.desktop_icon .icon {

width:50px;

height:50px;

margin:5px auto;

}

.desktop_icon .icon img {

width:50px;

height:50px;

}

.desktop_icon .text {

display:inline-block;

width:auto;

height:22px;

line-height:22px;

text-align:center;

color:#fff;

background:url(images/iconTextbg.png) no-repeat left center;

position:relative;

padding-left:10px;

margin-right:10px;

}

.desktop_icon .right_cron {

width:10px;

height:22px;

position:absolute;

right:-10px;

top:0;

background:url(images/iconTextbg_right.png) left center no-repeat;

}

.desktop_icon_over {

background:url(images/icon_over.png) no-repeat center center;

}




### []( )💙 JS 代码



JS代码较多这里只展示部分JS代码，完整源码可在文末获取

//声明desktop空间,封装相关操作

myLib.NS(“desktop”);

myLib.desktop={

winWH:function(){

	$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});

},

desktopPanel:function(){

	$('body').data('panel',{

				   'taskBar':{

				   '_this':$('#taskBar'),

				   'task_lb':$('#task_lb')

									},

				   'lrBar':{

				   '_this':$('#lr_bar'),	   

				   'default_app':$('#default_app'),

			       'start_block':$('#start_block'),

			       'start_btn':$('#start_btn'),

				   'start_item':$('#start_item'),

				   'default_tools':$('#default_tools')

						},				

					'deskIcon':{

						'_this':$('#deskIcon'),

						'icon':$('li.desktop_icon')

						},

					'powered_by':$('a.powered_by')

					});

	},

getMydata:function(){

	return $('body').data();

	},

mouseXY:function(){

	var mouseXY=[];

	$(document).bind('mousemove',function(e){ 

		mouseXY[0]=e.pageX;

		mouseXY[1]=e.pageY;

       });

	return mouseXY;

	},	

contextMenu:function(jqElem,data,menuName,textLimit){

	  var _this=this

	      ,mXY=_this.mouseXY();

	  

      jqElem

	  .smartMenu(data,{

        name: menuName,

		textLimit:textLimit,

		afterShow:function(){

			var menu=$("#smartMenu_"+menuName);

			var myData=myLib.desktop.getMydata(),

	            wh=myData.winWh;//获取当前document宽高

			var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();

			if(menuXY.top>wh['h']-menuH){

				menu.css('top',mXY[1]-menuH-2);

				}

			if(menuXY.left>wh['w']-menuW){

				menu.css('left',mXY[0]-menuW-2);

				}	

			}

       });

	  $(document.body).click(function(event){

		event.preventDefault(); 			  

		$.smartMenu.hide();

					  });

	}	

}




[]( )🥇 如何让学习不再盲目

-----------------------------------------------------------------------



**学习技巧篇**



> 1\. 编程小白  

> 很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。  

> **链接地址：**[牛客网 | 编程初学者入门训练]( )  

> ![在这里插入图片描述](https://www.qianduange.cn/upload/article/02a1a07484314d4ab68d1ae72544e43a.png)  

> 2\. 编程进阶  

> 当基础练习完已经逐步掌握了各知识要点后，这个时候去专项练习中学习数据结构、算法基础、计算机基础等。先从简单的入手，感觉上来了再做中等难度，以及较难的题目。这三样是面试中必考的知识点，我们只有坚持每日自己去多加练习，拒绝平躺持续刷题，不断提升自己才能冲击令人满意的公司。  

> **链接地址：**[牛客网 | 专项练习]( )
转载请注明出处或者链接地址：https://www.qianduange.cn//article/19482.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

nlohmann/json的介绍和使用详解

2024-11-02 11:11:09

使用python读写txt和json（jsonl）大文件

2024-11-02 11:11:02

python将字典数据保存为json文件

2024-11-02 11:11:55

【geojson 各国数据获取指引】

2024-11-02 11:11:55

settings.json：Visual Studio Code的深度定制化核心

2024-11-02 11:11:55

如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8

2024-11-02 11:11:19

执行npm run serve 找不到vite模块 Error: Cannot find module

2024-11-02 11:11:16

前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误

2024-11-02 11:11:09

问题：无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1，因为在此系统上禁止运行脚本。

2024-11-02 11:11:07

共享依赖的新选择：探索 PNPM 在低代码开发中的威力

2024-11-02 11:11:56

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！