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

阿里 阅读:598 2021-03-31 22:45:18 评论:0

查阅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 效果展示:


标签:CSS
声明

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

关注我们

一个IT知识分享的公众号