디렉토리 구조는 다음과 같습니다.
├── 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 │ ├── 외부 │ ├── jquery-smartMenu │ ├── 테마 │ └── UI ├── 아이콘 ├── 이미지 ├── 배경화면 └── 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"/>< /스팬> <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"/>< /스팬> <div class="text">빌리빌리 <div class="right_cron"></div> </div> </li> </ul> <div id="태스크바"> <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="haiyong" 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 Academy" 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="start" id="start_btn"></a> <div id="start_item"> <ul class="항목 관리자"> <li><span class="adminImg"></span> 관리자</li> </ul> <ul 클래스="항목"> <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, 입력, 텍스트 영역, p, blockquote, th, td {
여백:0;
패딩:0;
}
테이블 {
테두리 축소:축소;
테두리 간격:0;
}
필드셋, img {
테두리:0;
}
주소, 캡션, 인용, 코드, dfn, em, Strong, th, var {
글꼴 스타일:일반;
글꼴 두께:일반;
}
올, 울, 리 {
목록 스타일:없음;
}
캡션, 일 {
텍스트 정렬:왼쪽;
}
h1, h2, h3, h4, h5, h6 {
글꼴 크기:100%;
글꼴 두께:일반;
}
q:이전, q:이후 {
콘텐츠:";
}
약어, 약어 {
테두리:0;
}
* {
여백:0;
패딩:0
}기본 페이지 스타일
/*기본 페이지 스타일*/
HTML {
오버플로:숨김;
}
몸 {
글꼴 크기: 12px;
background:#06C url(wallpapers/menglong2.jpg) 반복 스크롤 센터 센터;
글꼴 모음: Tahoma, Geneva, sans-serif;
여백:0;
패딩:0
}
{
글꼴 크기: 12px;
}
a:링크 {
텍스트 장식: 없음;
색상: #FFF;
}
a:방문했습니다 {
텍스트 장식: 없음;
색상: #FFF;
}
a:호버 {
텍스트 장식: 없음;
색상: #FFF;
}
a:활성 {
텍스트 장식: 없음;
색상: #FFF;
}
.corner {/*CSS3을 지원하는 고급 브라우저에서만 작동합니다*/
-moz-국경-반경: 5px;
-웹킷-국경-반경: 5px;
테두리 반경: 5px;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
상자 그림자:2px 2px 8px #444;
}
.로드 중 {
배경:url(images/loading.gif) 반복 없음 중심 중심
}인터페이스 레이아웃 스타일
/*인터페이스 레이아웃 스타일*/
.powered_by {
너비:160px;
높이:25px;
줄 높이:25px;
background:url(images/powered-by.png) 왼쪽 중앙에 반복 없음;
색상:#CCC;
텍스트 들여쓰기:26px;
표시:블록;
개요:없음;
위치:절대;
오른쪽:20px;
하단:60px;
}작업 표시줄 스타일
#taskBar {
너비:100%;
높이:40px;
줄 높이:40px;
위치:절대;
오른쪽:0;
하단:0;
}
#leftBtn {
너비:100px;
높이:40px;
부동:왼쪽;
디스플레이:없음;
}
#rightBtn {
너비:100px;
높이:40px;
플로트:오른쪽;
디스플레이:없음;
}
#leftBtn a, #rightBtn a {
표시:블록;
너비:100px;
높이:40px;
개요:없음;
배경 이미지:url(images/lr_btn.png);
배경 반복:반복 없음;
}
#leftBtn a {
배경 위치:왼쪽 상단;
}
#rightBtn a {
배경 위치:오른쪽 상단;
}
#leftBtn a:hover {
배경 위치:왼쪽 하단
}
#rightBtn a:hover {
배경 위치:오른쪽 하단
}
#task_lb_wrap {
높이:40px;
줄 높이:40px;
오버플로:숨김;
위치:상대적;
}
#task_lb {
너비:자동;
높이:자동;
위치:절대;
상단:0;
오른쪽:0;
}
#task_lb a {
디스플레이:인라인 블록;
개요:없음;
너비:100px;
높이:40px;
배경 이미지:url(images/taskHdBtn.png);
배경 반복:반복 없음;
텍스트 정렬:가운데;
줄 높이:40px;
부동:오른쪽
}
#task_lb .defaultTab {
배경 위치:오른쪽 상단;
색상:#ccc
}
#task_lb .defaultTab:hover {
배경 위치:오른쪽 하단;
}
#task_lb .selectTab {
배경 위치:왼쪽 위;
색상:#FFF
}
#task_lb .selectTab:호버 {
배경 위치:왼쪽 하단
}
#shizhong_btn {
배경:url(images/timer.png) 반복 없음 중심 중심
}
#weather_btn {
배경:url(images/wheather.png) 반복 없음 중심 중심
}
#sound_btn {
배경:url(images/sound_open.png) 반복 없음 중심 중심
}
#showZm_btn {
배경:url(images/show-desktop.png) 반복 없음 중심 중심
}
#them_btn {
배경:url(images/skin.png) 반복 없음 중심 중심
}사이드 플로팅 바
#lr_bar {
너비:73px;
높이:자동;
위치:절대;
왼쪽:0;
상단:30px;
배경:url(images/dock_top.png) 반복-y 왼쪽 상단;
Z-색인:90;
-moz-box-shadow: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
상자 그림자:0px 3px 15px #444;
패딩 상단:5px;
}시작 버튼 스타일
#start_block {
너비:73px;
높이:56px;
위치:절대;
왼쪽:0;
하단:-56px;
background:url(images/dock_b.png) 왼쪽 하단 반복 없음;
-moz-box-shadow: 0px 5px 15px #444;
-webkit-box-shadow: 0px 5px 15px #444;
상자 그림자:0px 5px 15px #444;
}
#start_btn {
표시:블록;
너비:48px;
높이:48px;
background:url(images/start-btn.png) 반복 없음 중앙 하단;
여백:4px 자동 0 자동;
개요:없음;
Z-색인:501;
커서:포인터;
}
#start_btn:호버 {
배경 위치:가운데 상단
}시작 메뉴 스타일
#start_item {
너비:180px;
높이:자동;
패딩:5px 0;
배경: url(images/start_item_bg.png) 반복;
위치:절대;
Z-색인:500;
왼쪽:75px;
하단:0px;
디스플레이:없음;
-moz-국경-반경: 5px;
-웹킷-국경-반경: 5px;
테두리 반경: 5px;
-moz-box-shadow: 2px 2px 5px #444;
-webkit-box-shadow: 2px 2px 5px #444;
상자 그림자:2px 2px 5px #444;
}
#start_item .item {
너비:100%;
높이:자동;
테두리 상단:1px 솔리드 #999
}
#start_item .item 리 {
너비:98%;
높이:24px;
오버플로:숨김;
줌:-1;
패딩:6px 0;
줄 높이:24px;
여백:0 자동;
색상:#FFF;
}
#start_item .item li:hover {
배경:url(images/start_item_over.png) 반복-x 왼쪽 하단;
커서:포인터
}
#start_item .item li 스팬 {
디스플레이:인라인 블록;
너비:24px;
높이:24px;
배경 이미지:url(images/start_itembtn.png);
배경 반복:반복 없음;
여백:0 10px;
부동:왼쪽;
}
#start_item .item li b {
너비:10px;
높이:24px;
background:url(images/item-child.png) 반복 없음 센터 center;
디스플레이:인라인 블록;
플로트:오른쪽;
여백 오른쪽:10px;
}
#start_item .sitting_btn {
배경 위치:왼쪽 -140px;
}
#start_item .help_btn {
배경 위치:왼쪽 -44px;
}
#start_item .about_btn {
배경 위치:왼쪽 -164px;
}
#start_item .logout_btn {
배경 위치:왼쪽 -20px;
}
#start_item .admin {
테두리 하단:1px 솔리드 #444;
패딩:5px 0;
테두리 상단:없음;
}
#start_item .item li .adminImg {
테두리:1px 솔리드 #E0E0E0;
배경 위치:왼쪽 -92px;
배경색:#FFF;
}기본 가젯
#default_tools {
너비:71px;
높이:자동;
오버플로:숨김;
줌:-1;
패딩:5px 0;
테두리 상단:1px 솔리드 #555;
여백:0 자동;
}
#default_tools 범위 {
너비:30px;
높이:30px;
디스플레이:인라인 블록;
여백:0 0 0 3px;
커서:포인터;
부동:왼쪽;
}기본 애플리케이션
#default_app {
너비:73px;
높이:자동;
패딩:5px 0;
위치:상대적;
}
#default_app 리 {
너비:48px;
높이:48px;
오버플로:숨김;
여백:3px 자동;
패딩:6px;
}
#default_app li img {
너비:48px;
높이:48px;
커서:포인터;
}
#default_app .btnOver {
배경:url(images/default_appbtn_bg.png) 반복 없음 중심 중심
}마우스 오른쪽 버튼 클릭 메뉴 스타일 재정의
.smart_menu_box .smart_menu_a {
색상:#333
}
.smart_menu_box .smart_menu_li_separate {
테두리 하단:1px 솔리드 #d6d5d5;
}창 스타일
.windows {
최소 너비:240px;
최소 높이:200px;
너비:700px;
높이:560px;
위치:절대;
디스플레이:없음;
배경색:#E0E0E0;
}
.win_title {
너비:100%;
높이:26px;
줄 높이:26px;
배경:#E0E0E0 url(images/titlebar_bg_cur.png) 반복-x 왼쪽 중앙;
-moz-국경-반경: 5px;
-웹킷-국경-반경: 5px;
테두리 반경: 5px;
}
.win_title b {
색상:#333;
여백-왼쪽:10px;
}
.win_title .win_btnblock {
너비:자동;
패딩:0 5px;
플로트:오른쪽;
높이:17px;
여백:4px 3px 0 0;
}
.win_title .win_btn차단 a {
디스플레이:인라인 블록;
너비:26px;
높이:17px;
배경 이미지:url(images/windowBtn.png);
배경 반복:반복 없음;
부동:왼쪽;
여백:0 1px;
개요:없음;
}
.win최대화 {
배경 위치:오른쪽 하단;
}
.winMaximize:hover {
배경 위치:오른쪽 상단;
}
.winHyimize {
배경 위치:-26px 하단;
}
.winHyimize:hover {
배경 위치:-26px 상단;
}
.winClose {
배경 위치:-52px 상단;
}
.winClose:호버 {
배경 위치:-52px 하단;
}
.win최소화 {
배경 위치:왼쪽 하단;
}
.winMinimize:hover {
배경 위치:왼쪽 상단;
}
.윈프레임 {
너비:100%;
높이:자동;
여백:0 0 0 3px;
패딩:0
}데스크탑 아이콘
#deskIcon {
너비:100%;
높이:자동;
오버플로:숨김;
줌:-1;
위치:상대적;
}
.desktop_icon {
너비:86px;
높이:88px;
커서:포인터;
여백-왼쪽:-1000px;
텍스트 정렬:가운데;
}
.desktop_icon 범위 {
표시:블록;
}
.desktop_icon .icon {
너비:50px;
높이:50px;
여백:5px 자동;
}
.desktop_icon .icon img {
너비:50px;
높이:50px;
}
.desktop_icon .text {
디스플레이:인라인 블록;
너비:자동;
높이:22px;
줄 높이:22px;
텍스트 정렬:가운데;
색상:#fff;
background:url(images/iconTextbg.png) 왼쪽 중앙에 반복 없음;
위치:상대적;
왼쪽 패딩:10px;
여백 오른쪽:10px;
}
.desktop_icon .right_cron {
너비:10px;
높이:22px;
위치:절대;
오른쪽:-10px;
상단:0;
배경:url(images/iconTextbg_right.png) 왼쪽 가운데 반복 없음;
}
.desktop_icon_over {
background:url(images/icon_over.png) 반복되지 않는 중심 center;
}?
JS 코드는 많습니다. 여기에는 JS 코드의 일부만 표시되어 있습니다. 전체 소스 코드는 기사 끝부분에서 얻을 수 있습니다.
//데스크톱 공간을 선언하고 관련 작업을 캡슐화합니다. myLib.NS("desktop");
myLib.desktop={
winWH:함수(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
},
데스크탑패널:함수(){
$('body').data('패널',{
'작업 표시줄':{
'_this':$('#taskBar'),
'작업_lb':$('#작업_lb')
},
'lr바':{
'_this':$('#lr_bar'),
'default_app':$('#default_app'),
'시작_블록':$('#start_block'),
'시작_btn':$('#시작_btn'),
'start_item':$('#start_item'),
'default_tools':$('#default_tools')
},
'데스크아이콘':{
'_this':$('#deskIcon'),
'아이콘':$('li.desktop_icon')
},
'powered_by':$('a.powered_by')
});
},
getMydata:함수(){
$('body').data()를 반환합니다.
},
마우스XY:함수(){
var 마우스XY=[];
$(document).bind('mousemove',function(e){
mouseXY[0]=e.pageX;
mouseXY[1]=e.pageY;
});
마우스XY를 반환합니다.
},
contextMenu:함수(jqElem,data,menuName,textLimit){
var_this=이것
,mXY=_this.mouseXY();
jqElem
.smartMenu(데이터,{
이름: 메뉴이름,
텍스트 제한:텍스트 제한,
afterShow:함수(){
var menu=$("#smartMenu_"+menuName);
var myData=myLib.desktop.getMydata(),
wh=myData.winWh;//현재 문서 너비와 높이 가져오기 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('왼쪽',mXY[0]-menuW-2);
}
}
});
$(document.body).click(함수(이벤트){
event.preventDefault();
$.smartMenu.hide();
});
}
}GitHub 주소: https://github.com/wanghao221/moyu
이것으로 Windows 데스크톱 테마 효과를 모방하는 HTML 구현에 대한 이 기사를 마무리합니다. Windows 데스크톱 콘텐츠를 모방하는 더 많은 관련 HTML을 보려면 downcodes.com에서 이전 기사를 검색하거나 다음 관련 기사를 계속해서 읽어보시기 바랍니다. .downcodes.com을 지원하세요!