首页 编程语言正文

Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建

java哥 阅读：650 2021-03-31 22:45:28 评论：0

简介：

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 &copy; 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 资源下载：

标签:CSS
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
关注我们

一个IT知识分享的公众号

友情链接IM LINKS