Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建
2024-06-03 02:07:34
简介：
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的解决方案。Metro UI CSS包含两种类型的许可证: MIT和 Commercial
LESS
Metro UI CSS是用LESS在开发. 一个很优秀的男人，Alexis Sellier创建了这个动态CSS语言LESS。 它使开发CSS更快、更简便、更有趣。
Metro UI CSS 环境搭建：
Metro UI CSS 提供Demo 模板文件：
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="css/metro-bootstrap.css"><script src="js/jquery/jquery.min.js"></script><script src="js/jquery/jquery.widget.min.js"></script><script src="js/metro/metro.min.js"></script></head><body class="metro">... markup page ...</body>
</html>参考Metro UI CSS Demo 编写案例：
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="stylesheet" href="css/metro-bootstrap.css"><script src="js/jquery/jquery.min.js"></script><script src="js/jquery/jquery.widget.min.js"></script><script src="js/metro/metro.min.js"></script>
</head>
<body class="metro">
<h1>Metro UI CSS 学习笔记</h1>
</body>
</html>效果展示：
Metro UI CSS 高仿windows8 效果展示
<!DOCTYPE>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="product" content="Metro UI CSS Framework"><meta name="description" content="Simple responsive css framework"><meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev"><meta name="keywords" content="js, css, metro, framework, windows 8, metro ui"><!--metro UI css 样式文件--><link href="css/metro-bootstrap.css" rel="stylesheet"><link href="css/metro-bootstrap-responsive.css" rel="stylesheet"><!--字体样式文件--><link href="css/iconFont.css" rel="stylesheet"><!--自定义样式--><link href="css/docs.css" rel="stylesheet"><!--控件样式css--><link href="js/prettify/prettify.css" rel="stylesheet"><!-- Load JavaScript Libraries --><!--加载jquery js 文件--><script src="js/jquery/jquery.min.js"></script><script src="js/jquery/jquery.widget.min.js"></script><script src="js/jquery/jquery.mousewheel.js"></script><!--控件样式js--><script src="js/prettify/prettify.js"></script><!-- Metro UI CSS JavaScript plugins --><!--判读metro js 样式是否加载成功--><script src="js/load-metro.js"></script><!-- Local JavaScript --><!--初始化函数--><script src="js/docs.js"></script><!--github 操作-->
<!-- <script src="js/github.info.js"></script>--><title>Metro UI CSS : Metro Bootstrap CSS 类库</title><style></style>
</head>
<body class="metro" style="background-color: #efeae3">
<!--<header class="bg-dark" data-load="header.html"></header>--><div class=""><div style="background: url(images/b1.jpg) top left no-repeat; background-size: cover; height: 300px;"><div class="container" style="padding: 50px 20px"><h1 class="fg-white">Metro UI CSS 2.0</h1><h2 class="fg-white">Metro UI CSS 样式控件<br /> 用来创建 Windows 8 风格.</h2><!-- <a href="https://github.com/olton/Metro-UI-CSS/archive/master.zip"-->
<!-- class="place-left button bg-darkRed bg-hover-red fg-white fg-hover-white bd-orange" style="margin-top: 10px">-->
<!-- <h3 style="margin: 10px 40px">Download <span class="icon-download-2 on-right"></span></h3>-->
<!-- </a>--></div></div><div class="container"><div class="grid fluid"><div class="row"><div class="span4 bg-amber padding20 text-center"><h2 class="fg-white">容易学</h2></div><div class="span4 bg-green padding20 text-center"><h2 class="fg-white">less 资源</h2></div><div class="span4 bg-red padding20 text-center"><h2 class="fg-white">许可证</h2></div></div></div></div><div class="container"><div class="grid no-margin"><div class="row"><div class="span4 no-tablet-portrait no-phone"><div class="notice marker-on-right bg-lighterBlue padding20 text-center" style="height: 200px"><h1 class="fg-white" style="font-size: 120px; line-height: 80px; margin-bottom: 30px">5</h1><p class="subheader-secondary fg-white">样式简单添加</p></div></div><div class="span8"><div class="notice marker-on-bottom no-desktop padding10 bg-lighterBlue text-center "><p class="subheader-secondary fg-white no-margin">5步简单添加样式</p></div><ol class="styled"><li style="width: 90%">创建一个<strong>HTML5 DOCTYPE</strong></li><li style="width: 90%">引入 <strong>metro-bootstrap.css</strong></li><li style="width: 90%">引入 <strong>metro.min.js</strong> (jquery.js 必须)</li><li style="width: 90%">创建一个容器Class包含 <strong>.metro</strong></li><li style="width: 90%">在需要创建Metro UI CSS 样式页面，引入以上标记（Metro UI CSS相关资源）</li></ol></div></div></div><pre class="prettyprint linenums no-phone" style="margin-top: 10px;">
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="css/metro-bootstrap.css"><script src="js/jquery/jquery.min.js"></script><script src="js/jquery/jquery.widget.min.js"></script><script src="js/metro/metro.min.js"></script></head><body class="metro">... markup page ...</body>
</html>
</pre></div><div class="bg-steel no-tablet-portrait no-phone"><div class="container padding20 fg-white"><div class="carousel bg-transparent no-overflow" id="carousel2"><div class="slide"><div class="place-right"><img src="./images/css-logo.png"alt="" class="span3"/></div><h2 class="fg-white ntm">Developed with advice</h2><p class="fg-white">Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.</p><p class="fg-white">Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.</p></div><div class="slide"><div class="place-right padding20 ntp nrp nbp"><img src="./images/bizspark_b_2.png"alt="" class="span3"/></div><h2 class="fg-white ntm">BizSpark Startup</h2><p class="fg-white">Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.</p><p class="fg-white">BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.</p><a class="button small1 inverse" href="http://bizspark.com">Join the BizSpark Program now</a></div><div class="slide"><div class="place-right"><img src="./images/phpstorm_7_eap.png"alt="" class="span3"/></div><h2 class="fg-white ntm">Thanks to JetBrains</h2><p class="fg-white">Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.</p><a class="button small1 inverse" href="http://www.jetbrains.com/phpstorm/">Get PhpStorm now!</a></div></div>
<!-- <script>-->
<!-- $(function(){-->
<!-- $("#carousel2").carousel({-->
<!-- height: 210,-->
<!-- period: 5000,-->
<!-- duration: 1000,-->
<!-- effect: 'fade',-->
<!-- markers: {-->
<!-- show: false-->
<!-- }-->
<!-- });-->
<!-- })-->
<!-- </script>--></div></div><div class="bg-dark"><div class="container" style="padding: 10px 0;"><div class="grid no-margin"><div class="row no-margin"><div class="span3 padding10"><img src="./images/spface.jpg" alt="" class="polaroid"/></div><div class="span6 padding10"><h3 class="fg-white">关于作者</h3><p class="fg-white">大家好! 我叫 Sergey Pimenov ,是Metro UI CSS 的作者来自乌克兰的首都基辅.</p></div><div class="span3 padding10"><a class="button danger " style="width: 100%; margin-bottom: 5px" href="http://bizspark.com">Microsoft BizSpark</a><a class="button success " style="width: 100%; margin-bottom: 5px" href="http://jetbrains.com">JetBrains</a><a class="button info " style="width: 100%; margin-bottom: 5px" href="https://github.com/olton/Metro-UI-CSS">Github</a><a class="button warning " style="width: 100%; margin-bottom: 5px;" href="http://lesscss.org">{ Less }</a></div></div></div></div><div class="container tertiary-text bg-dark fg-white" style="padding: 10px">2012-2013, Metro UI CSS © by <a href="mailto:sergey@pimenov.com.ua" class="fg-yellow">Sergey Pimenov</a></div></div>
</div>
<!--系统函数-->
<!--<script src="js/hitua.js"></script>--></body>
</html>效果展示:
Metro UI CSS 资源下载：
Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建相关推荐
- RN学习笔记01：概述、特点与环境搭建
RN学习笔记01:概述.特点与环境搭建 一.RN概述 React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 Reac ...
- Spring Boot基础学习笔记24：RabbitMQ安装以及整合环境搭建
文章目录 零.学习目标 一.消息服务概述 (一)为什么使用消息服务 1.使用消息服务的好处 2.异步处理 3.应用解耦 4.流量削峰 5.分布式事务管理 6.分布式事务管理流程 (二)常用的消息中间件 ...
- Hadoop学习笔记——入门教程（虚拟机安装LinuxHadoop环境搭建配置）
文章目录 一.Hadoop安装配置文档及注意事项 二.Hadoop概述 2.1.Hadoop是什么 2.2.Hadoop的发展历史 2.3.Hadoop三大发行版本 2.3.1 Apache Hado ...
- 【tensorflow.js学习笔记（1）】tf.js环境搭建及曲线拟合例子
月初TensorFlow开发者大会上,谷歌正式发布了TensorFlow的JS版本tensorflow.js,并演示了几个很有意思的demo,展现了浏览器环境下也能进行深度学习任务的能力.tensor ...
- Go 学习笔记（1）— Ubuntu 系统 Go 环境搭建、VS Code 配置 Go 开发环境、VS Code 远程开发配置
1. 安装说明 Ubuntu 下直接安装 Go 1.11 版本编译器时需要依赖 Go 1.4 版本.所以如果在使用 apt-get install go安装时参考以下链接安装:https://blog ...
- cocos2d python文档_【Cocos2D-X 学习笔记】Cocos2D-x 3.0+VS开发环境搭建[使用Python]
上一节讲了如何用VS自带的项目管理器创建项目,该方法只适用于cocos2d-x 2.0版本,而cocos2d-x 3.0较之前版本在命名等方面有了较大更新,而cocos2d-x3.0不再支持用VS项目 ...
- .net core 2.0学习笔记（一）：开发运行环境搭建
期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
最新文章
- Python进阶最新中文版，开源！
- Django框架视图类
- python这个软件学会能做什么工作-学会Python真的有高收入？盯，请查收这份入坑指南...
- 当猪飞起来：也谈创业初期商业模式问题
- （转载）HTTP与RPC的区别
- JAVA元注解@interface详解(@Target,@Documented,@Retention,@Inherited)
- Unity3D 协程 浅谈
- VMware:虚拟机（xp)与主机(win10)连接步骤（超详细）
- SmtpJS 几行代码实现javascript发送邮件(记录)
- python selenium下载图片_selenium下载图片(原图)
- 【Word】公式“大括号”中的内容对齐
- [GAMIT/GLOBK学习笔记]globk_comb.cmd/glorg_comb.cmd文件详解
- 群体优化算法工具箱分享（GA、PSO、CS、GWO、WOA、HHO）
- 召唤神龙无敌版------小鱼吃大龙
- split().reverse().join()放一起 好记很多
- mysql len函数的用法_SQL LEN() 函数
- C++ 二义性是什么？怎么解决？
- 除了迅雷还有谁在“偷”你的信息？
- 红楼梦java_蒋勋细说红楼梦——缘分告别时的淡淡哀伤
- 高斯定理下的电场和磁场（详细案例模型分析）