win8风格界面metro界面_win8风格博客资源-CSDN文库

共17个文件

png：6个

js：3个

svg：2个

metro

win8界面

模块化界面

模板界面

需积分: 9 162 浏览量 2018-06-08 11:21:13 上传评论收藏 134KB RAR 举报

标题中的“win8风格界面”和“metro界面”指的是Windows 8操作系统引入的一种全新的用户界面设计语言，称为“Metro UI”或“Modern UI”。这种设计风格以其简洁、大胆的色块和图标，以及触控友好的特性而闻名，旨在提供跨设备的一致用户体验，无论是桌面电脑、平板电脑还是智能手机。在描述中，“仿win8系统面板风格”指的是界面设计模仿了Windows 8启动屏幕（Start Screen）的特征，这个屏幕由各种大小不一的磁贴（Tiles）组成，每个磁贴代表一个应用程序或功能。用户可以通过这些磁贴快速访问所需内容。这种模块化的设计允许用户根据个人喜好和工作需求自由配置磁贴，创建个性化的启动屏幕。 “模块化web界面”意味着这个界面设计可以被拆分成多个独立的组件或模块，每个模块都有特定的功能，用户可以根据需要添加、删除或调整这些模块的位置。这种设计方法有助于提高界面的灵活性和可定制性，使得用户能够按照自己的工作流程来组织界面，提高工作效率。 “模板界面”可能是指预设的一些布局模式，用户可以选择适合自己的模板，快速设置界面布局，无需从零开始设计。这些模板可能包含了不同类型的模块组合，适用于各种应用场景，如办公、娱乐、学习等。在文件名称“windows8-metro”中，我们可以推测这是一个与Windows 8 Metro风格相关的项目或者资源包，可能包含了一系列CSS样式、JavaScript脚本、图片和其他素材，用于构建具有类似Win8 Metro风格的网页或应用界面。这个知识点涉及Web界面设计的趋势和技巧，尤其是针对多设备兼容性的考虑。通过采用Windows 8的Metro设计原则，开发者和设计师可以创建出直观、响应式的界面，同时提供一致且丰富的用户体验，无论用户是在大屏幕的电脑还是小屏幕的移动设备上。这种设计理念强调内容优先，注重清晰的视觉层次和高效的导航，是现代Web和应用开发的重要组成部分。

资源推荐

资源详情

资源评论

收起资源包目录

windows8-metro.rar （17个子文件）

windows8-metro

css

demo-styles.css 8KB

images

safari.png 4KB

chrome.png 3KB

opera.png 3KB

firefox.png 4KB

ie.png 3KB

1.png 66KB

fonts

demo-icomoon.woff 9KB

demo-icomoon.svg 28KB

demo-icomoon.eot 6KB

demo-icomoon.ttf 6KB

demo-icomoon.dev.svg 29KB

index.html 5KB

jquery-1.8.2.min.js 91KB

modernizr-1.5.min.js 11KB

prefixfree.min.js 6KB

.project 669B

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Panel</title> <link rel="stylesheet" href="css/demo-styles.css" /> </head> <body>  <div class="demo-wrapper"> <div class="login-screen"> <p>Log In</p> <div class="myform"> <input type="text" placeholder="Password" /> <button data-icon="" id="unlock-button"></button> </div> </div> <div class="page todos"> <h2 class="page-title">My Todos</h2> <ul contenteditable> <li>Finish my 3D demo<span class="delete-button">x</span></li> <li>Design my blog<span class="delete-button">x</span></li> <li>Buy groceries<span class="delete-button">x</span></li> <li>Finish my todo app<span class="delete-button">x</span></li> <li>Organize my bookmarks<span class="delete-button">x</span></li> </ul> <div class="close-button">x</div> </div> <div class="page random-page"> <h2 class="page-title">Some Awesome App!</h2> <div class="close-button">x</div> </div> <div class="dashboard clearfix"> <div class="col1 clearfix"> <div class="big todos-thumb" data-page="todos"> <p>My Todos <span class="todos-thumb-span">You have 5 more tasks to do!</span> </p> </div> <div class="small lock-thumb"> <span class="icon-font center" aria-hidden="true" data-icon=""></span> </div> <div class="small last cpanel-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon=""></span> </div> <div class="big notes-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon=""></span> <p> Notes</p> </div> <div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Calculator</p></div> </div> <div class="col2 clearfix"> <div class="big organizer-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Contacts</p></div> <div class="big news-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>News</p></div> <div class="small calendar-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="small last paint-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="big weather-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Weather</p></div> </div> <div class="col3 clearfix"> <div class="big photos-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Photos</p></div> <div class="small alarm-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="small last favorites-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="big games-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Games</p></div> <div class="small git-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="small last code-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> </div> </div> </div>  <script src="js/jquery-1.8.2.min.js"></script> <script src="js/modernizr-1.5.min.js"></script> <script src="js/prefixfree.min.js"></script> <script> function showDashBoard(){ for(var i = 1; i <= 3; i++) { $('.col'+i).each(function(){ $(this).addClass('fadeInForward-'+i).removeClass('fadeOutback'); }); } } function fadeDashBoard(){ for(var i = 1; i <= 3; i++) { $('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i); } } $(".lock-thumb").click(function(){ fadeDashBoard(); $('.login-screen').addClass('slidePageInFromLeft').removeClass('slidePageBackLeft'); }); $('#unlock-button').click(function(){ $('.login-screen').removeClass('slidePageInFromLeft').addClass('slidePageBackLeft'); showDashBoard(); }); $('.big, .small').each(function(){ var $this= $(this), page = $this.data('page'); $this.on('click',function(){ $('.page.'+page).addClass('openpage'); fadeDashBoard(); }) }); $('.close-button').click(function(){ $(this).parent().addClass('slidePageLeft') .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { $(this).removeClass('slidePageLeft').removeClass('openpage'); }); showDashBoard(); }); $('.view-demo-button').click(function(){ $(this).parent().addClass('slideDemoOverlayUp'); showDashBoard(); }); </script> </body> </html>

评论收藏

内容反馈