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