Metro UI CSS 学习笔记之 基础组件

于 2015-01-23 14:00:47 发布
阅读量1k 收藏
点赞数
分类专栏： Metro UI CSS 学习笔记 Metro UI CSS教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/43054853
版权

查阅Metro UI CSS 对基础组件描述，本人觉得已经描述的很详细，所以在这里不打算做详细的讲解，大家可以直接阅读以下源代码（是进过本人已经优化后的代码）。

温馨提示：相关注释，也已经在代码中添加。

       

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--metro UI css 样式文件(组件基础)-->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <!--metro UI css 样式文件(组件添加)-->
    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">
    <!--metro UI css 控件修改样式文件-->
    <link href="css/normalize.css" rel="stylesheet">
    <!--加载jquery js 文件-->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <!--加载metro js 文件-->
    <script src="js/metro/metro.min.js"></script>
</head>
<body class="modern-ui">

<!--Metro UI CSS 布局模板-->
<div class="page secondary">
    <div class="page-header">
        <div class="page-header-content">
            <h1>排版<small>案例</small></h1>
            <a class="back-button big page-back" href="/"></a>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content">
            <h1>H1. 标题一</h1>
            <h2>H2. 标题二</h2>
            <h3>H3. 标题三</h3>
            <h4>H4. 标题四</h4>
            <h5>H5. 标题五</h5>
            <h6>H6. 标题六</h6>

            <p>所有HTML标题, <code><h1></code>到<code><h6></code>都是可用的。</p>

            <a href="#" class="navigation-text">导航</a>
            <p class="tertiary-text">使用<code>navigation-text</code>类名来创建导航<code><a class="navigation-text" /></code></p>

            <h2>body-text和默认段落</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p></span><span class="pln">...</span><span class="tag"></p></span></li><li class="L1"><span class="pln">    </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"body-text"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></div></span></li></ol></pre>
            <p>
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
            </p>

            <h2>body-secondary-text</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"body-secondary-text"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></p></span></li></ol></pre>
            <p class="body-secondary-text">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
            </p>

            <h2>long-text</h2>
            <small>使用这个类来显示大量的文本,比如书籍或杂志的内容。</small>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"long-text"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></p></span></li></ol></pre>
            <p class="long-text">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。

            </p>

            <h2>段落使用<code>.indent</code>类名</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"indent"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></p></span></li></ol></pre>
            <p class="indent">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
            </p>

            <p class="indent">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
            </p>

            <h2>tertiary-text</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tertiary-text"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></p></span></li></ol></pre>
            <p class="tertiary-text">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
            </p>

            <h2>tertiary-secondary-text</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tertiary-secondary-text"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></p></span></li></ol></pre>
            <p class="tertiary-secondary-text">
                W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。                </p>

            <div class="grid">
                <div class="row">
                    <div class="span3">
                        <h2>小文本</h2>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><small></span><span class="pln">...</span><span class="tag"></small></span></li></ol></pre>
                        <p>
                            <small>我是小文本</small>.
                        </p>
                    </div>
                    <div class="span4">
                        <h2>加粗文本</h2>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><strong></span><span class="pln">...</span><span class="tag"></strong></span></li></ol></pre>
                        <p>
                            <strong>我是加粗文本</strong>.
                        </p>
                    </div>
                    <div class="span3">
                        <h2>斜体文本</h2>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><em></span><span class="pln">...</span><span class="tag"></em></span></li></ol></pre>
                        <p>
                            <em>我是斜体文本</em>.
                        </p>
                    </div>
                </div>
            </div>

            <h2>缩略语</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><abbr</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Title of abbreviation"</span><span class="tag">></span><span class="pln">...</span><span class="tag"></abbr></span></li></ol></pre>
            <p>缩写词的属性是<abbr title="attribute">attr</abbr></p>
            <p><abbr class="initialism" title="HyperText Markup Language">html</abbr>是有史以来最好的事情吗</p>

            <h2>地址</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><address></span></li><li class="L1"><span class="pln">        ...</span></li><li class="L2"><span class="pln">    </span><span class="tag"></address></span></li></ol></pre>
            <address>
                <strong>公司名称</strong><br>
                中国.上海<br>
                谈家渡路盛泉大厦<br>
                <abbr title="Phone">电话:</abbr> (086) 135 7878 5218
            </address>

            <address>
                <strong>大漠</strong><br>
                <a href="mailto:#">first.last@gmail.com</a>
            </address>

            <h2>引用块</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><blockquote></span></li><li class="L1"><span class="pln">        ...</span></li><li class="L2"><span class="pln">    </span><span class="tag"></blockquote></span></li></ol></pre>
            <blockquote>
                <p>W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。</p>
            </blockquote>

            <h2>引用块向左边</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><blockquote></span></li><li class="L1"><span class="pln">        ...</span></li><li class="L2"><span class="pln">        </span><span class="tag"><small></span><span class="pln">...</span><span class="tag"></small></span></li><li class="L3"><span class="pln">    </span><span class="tag"></blockquote></span></li></ol></pre>
            <blockquote>
                <p>W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。</p>
                <small>——<cite title="Source Title">大漠</cite></small>
            </blockquote>

            <h2>引用块向右</h2>
            <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><blockquote</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"place-right"</span><span class="tag">></span></li><li class="L1"><span class="pln">        ...</span></li><li class="L2"><span class="pln">        </span><span class="tag"><small></span><span class="pln">...</span><span class="tag"></small></span></li><li class="L3"><span class="pln">    </span><span class="tag"></blockquote></span></li></ol></pre>
            <blockquote class="place-right">
                <p>W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。</p>
                <small>—— <cite title="Source Title">大漠</cite></small>
            </blockquote>

            <h2>列表</h2>
            <div class="grid">
                <div class="row">
                    <div class="span3">
                        <h3>无序列表</h3>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><ul></span></li><li class="L1"><span class="pln">        </span><span class="tag"><li></span><span class="pln">...</span><span class="tag"></li></span></li><li class="L2"><span class="pln">    </span><span class="tag"></ul></span></li></ol></pre>
                        <ul>
                            <li>前端爱好者的家园</li>
                            <li>前端学习的站点</li>
                            <li>W3CPLUS力求原创</li>
                            <li>有关于css,css3,</li>
                            <li>以一起学习，一起进步
                                <ul>
                                    <li>前端爱好者的家园</li>
                                    <li>W3CPLUS力求原创，</li>
                                    <li>打造最优秀的web</li>
                                    <li>打造最优秀的web</li>
                                </ul>
                            </li>
                            <li>W3CPLUS力求原创</li>
                            <li>关于css,css3</li>
                            <li>前端爱好者的家园</li>
                        </ul>
                    </div>

                    <div class="span3">
                        <h3>有序列表</h3>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><ol></span></li><li class="L1"><span class="pln">        </span><span class="tag"><li></span><span class="pln">...</span><span class="tag"></li></span></li><li class="L2"><span class="pln">    </span><span class="tag"></ol></span></li></ol></pre>
                        <ol>
                            <li>前端爱好者的家园</li>
                            <li>W3CPLUS力求原创，</li>
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web</li>
                            <li>前端爱好者的家园</li>
                            <li>W3CPLUS力求原创，</li>
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web</li>
                        </ol>
                    </div>

                    <div class="span4">
                        <h3>无项目样式列表</h3>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">    </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"unstyled"</span><span class="tag">></span></li><li class="L1"><span class="pln">        </span><span class="tag"><li></span><span class="pln">...</span><span class="tag"></li></span></li><li class="L2"><span class="pln">    </span><span class="tag"></ul></span></li></ol></pre>
                        <ul class="unstyled">
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web</li>
                            <li>打造最优秀的web
                                <ul>
                                    <li>前端爱好者的家园</li>
                                    <li>前端爱好者的家园</li>
                                    <li>前端爱好者的家园</li>
                                    <li>前端爱好者的家园</li>
                                </ul>
                            </li>
                            <li>以一起学习，一起进步</li>
                            <li>以一起学习，一起进步</li>
                            <li>以一起学习，一起进步</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>



</body>
</html>
Metro UI CSS 效果展示：


在奋斗的大道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值