metro扁平UI网页组件.zip资源-CSDN文库

共29个文件

jpg：12个

js：8个

png：4个

版权申诉

javascript

html5

jQuery

39 浏览量 2022-11-24 12:31:30 上传评论收藏 451KB ZIP 举报

"metro扁平UI网页组件.zip" 是一个包含前端开发资源的压缩包，它采用流行的Metro设计风格，这种设计风格源自Windows 8的用户界面，强调简洁、清晰和色彩丰富的元素。该组件集适用于构建现代、直观且响应式的网页应用。在压缩包中，我们主要会涉及到以下几个关键的技术点： 1. CSS：CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。在这个metro扁平UI组件中，CSS将被用来定义各种元素的布局、颜色、字体等视觉效果，实现扁平化的设计风格。可能会用到CSS3的新特性，例如过渡（transition）、动画（animation）以及Flexbox或Grid布局来实现响应式设计。 2. 前端框架：前端框架简化了网页开发过程，提供了预先封装好的UI组件和交互逻辑。这个压缩包可能包含了基于CSS和JavaScript的框架，比如Bootstrap或Materialize，它们能够帮助开发者快速构建符合Metro风格的页面。 3. JavaScript：JavaScript是一种广泛使用的脚本语言，用于实现网页的动态功能和交互。在metro扁平UI组件中，JavaScript可能用于处理用户交互、数据绑定、动画效果等，可能使用了jQuery库，jQuery简化了DOM操作、事件处理和AJAX交互，使得JavaScript编程更为高效。 4. HTML5：HTML5是最新版本的超文本标记语言，增加了许多新的元素和API，以支持多媒体、离线存储和增强的表单控件等功能。在metro UI组件中，HTML5的语义化标签如<header>、<footer>、<nav>、<section>等将被用来构建更结构化的网页，提高可访问性和SEO优化。 5. jQuery：jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画和Ajax交互。在metro扁平UI中，jQuery可能用于添加动态效果、实现页面元素的交互，以及与服务器进行异步通信。 6.Metro UI：Metro UI是微软引入的一种设计语言，其特点是平面、简单、明亮的颜色块和大号的图标。在网页开发中，这种设计风格通常会运用到按钮、图标、卡片、列表等组件上，使页面看起来更加现代化和简洁。 "metro扁平UI网页组件.zip" 提供的资源将帮助开发者快速创建具有现代感、响应式和用户友好的网页。通过结合使用CSS3、HTML5、JavaScript（尤其是jQuery）和Metro UI设计原则，开发者可以构建出既美观又实用的Web应用。这些组件通常经过优化，易于定制和整合到现有的项目中，从而提高开发效率。

资源推荐

资源详情

资源评论

收起资源包目录

metro扁平UI网页组件.zip （29个子文件）

metro扁平UI网页组件

metro扁平UI网页组件.jpg 165KB

jiaoben2305

css

slider.css 20KB

JFAlert.css 3KB

style.css 20KB

images

user1.jpg 3KB

user3.jpg 3KB

pic1.jpg 49KB

star-empty-50.png 608B

user2.jpg 2KB

temp2.jpg 2KB

star-rating-50.png 615B

s4.jpg 29KB

s2.jpg 14KB

sprites.png 9KB

s3.jpg 21KB

s1.jpg 35KB

user4.jpg 2KB

slide-pagenat.png 526B

temp1.jpg 2KB

fonts

Overpass_Regular-webfont.ttf 61KB

index.html 12KB

jquery.min.js 91KB

jquery.easing.min.js 5KB

jquery.cslider.js 7KB

jquery.starRating.js 1KB

JFCore.js 137KB

jquery.mixitup.min.js 14KB

modernizr.custom.28468.js 7KB

fliplightbox.min.js 14KB

<!DOCTYPE HTML> <html> <head> <title>metro扁平UI网页组件 - 网页模板</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/fliplightbox.min.js"></script> <script type="text/javascript"> $('body').flipLightBox() </script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function() { var filterList = { init : function() { // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector : '.portfolio', filterSelector : '.filter', effects : ['fade'], easing : 'snap', // call the hover effect onMixEnd : filterList.hoverEffect() }); }, hoverEffect : function() { // Simple parallax effect $('#portfoliolist .portfolio').hover(function() { $(this).find('.label').stop().animate({ bottom : 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top : -30 }, 500, 'easeOutQuad'); }, function() { $(this).find('.label').stop().animate({ bottom : -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top : 0 }, 300, 'easeOutQuad'); }); } }; // Run the show! filterList.init(); }); </script>  <link rel="stylesheet" type="text/css" href="css/slider.css" /> <script type="text/javascript" src="js/modernizr.custom.28468.js"></script> <script type="text/javascript" src="js/jquery.cslider.js"></script> <script type="text/javascript"> $(function() { $('#da-slider').cslider({ autoplay : true, bgincrement : 450 }); }); </script>  <link type="text/css" rel="stylesheet" href="css/JFAlert.css" /> <script type="text/javascript" src="js/JFCore.js"></script>  <script type="text/javascript"> (function() { JC.init({ domainKey: '' }); })(); </script> </head> <body> <div class="wrap"> <div class="span_of_2"> <div class="span1_of_1"> <div class="container"> <ul id="filters" class="clearfix"> <li><span class="filter active" data-filter="app card icon web">All</span></li> <li><span class="filter" data-filter="logo web">Photography</span></li> <li><span class="filter" data-filter="app card icon web">Inspirations</span></li> <li><span class="filter" data-filter="logo web">Icon</span></li> </ul> <div id="portfoliolist"> <div class="portfolio logo1" data-cat="logo"> <div class="portfolio-wrapper"> <a href="#"> <img src="images/s1.jpg" alt="Image 1" /> </a> <div class="label_style"> <a href="#"><span class="icon_1"></span></a> <div class="label_text"> <h2>scarabaeidae</h2> <p>Rezonum & Collections</p> </div> </div> </div> </div> <div class="portfolio app left" data-cat="app"> <div class="portfolio-wrapper"> <a href="#"> <img src="images/s2.jpg" alt="Image 2" /> </a> <div class="label_style"> <a href="#"><span class="icon_2"></span></a> <div class="label_text"> <h2>scarabaeidae</h2> <p>Rezonum & Collections</p> </div> </div> </div> </div> <div class="portfolio web" data-cat="web"> <div class="portfolio-wrapper"> <a href="#"> <img src="images/s3.jpg" alt="Image 3" /> </a> <div class="label_style"> <a href="#"><span class="icon_3"></span></a> <div class="label_text"> <h2>scarabaeidae</h2> <p>Rezonum & Collections</p> <form> <input type="button" value="buy it now" /> </form> </div> </div> </div> </div> <div class="portfolio card left" data-cat="card"> <div class="portfolio-wrapper"> <a href="#"> <img src="images/s4.jpg" alt="Image 4" /> </a> <div class="label_style"> <a href="#"><span class="icon_4"></span></a> <div class="label_text"> <h2>scarabaeidae</h2> <p>Rezonum & Collections</p> <form> <input type="button" class="bg" value="buy it now" /> </form> </div> </div> </div> </div> </div> </div> <div class="span_btm"> <img src="images/pic1.jpg" alt=""/> <div class="span_text"> <h3>ios games / slots</h3> <p>Written by <a href="#">eiusmod tempor incididunt</a> </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p> <form> <span><input type="button" class="bg" value="like it now" /> </span> <span><input type="button" class="bg1" value="learn more" /> </span> <div class="clear"></div> <span class="or">or</span> </form> </div> </div> </div> <div class="span1_of_2"> <div class="slider"> <div id="da-slider" class="da-slider"> <div class="da-slide"> <h2>Flat Design websites</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div class="da-slide"> <h2>Clean & Flat Design</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div class="da-slide"> <h2>Clean & Flat Design</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="da-slide"> <h2>Flat Design websites</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div> </div> <div class="grids_of_2"> <div class="grid1_of_1"> <div class="temparature"> <h4 class="left">4<sup>o</sup>c</h4> <span class="right bg"></span> <div class="clear"></div> </div> <div class="temp_list_main"> <div class="temp_main"> <ul class="temp_list"> <li><span class="temp_img"><img src="images/temp1.jpg" alt=""/></span><span class="temp_text"><h4>Mon</h4><h5>30<sup>o</sup></h5></span><div class="clear"></div></li> </ul> <ul class="temp_list_icon"> <li><i class="icon_1"></i></li> </ul> <div class="clear"></div> </div> <div class="temp_main top"> <ul class="temp_list"> <li><span class="temp_img"><img src="images/temp2.jpg" alt=""/></span><span class="temp_text"><h4>Thu</h4><h5>27<sup>o</sup></h5></span><div class="clear"></div></li> </ul> <ul class="temp_list_icon"> <li><i class="icon_2"></i></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="grid1_of_2"> <form> <input type="button" value="button one" class="bg1" /> <input type="button" value="button two" c

评论收藏

内容反馈

版权申诉