查阅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">
<!--加载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>
<!--加载第三方js 文件-->
<script src="js/modern/dropdown.js"></script><!--下拉菜单第三方控件-->
<script src="js/modern/pagecontrol.js"></script><!--多页控件第三方js-->
<script src="js/modern/accordion.js"></script><!--手风琴第三方js-->
<script src=""></script>
<title>Modern UI CSS 学习笔记</title>
</head>
<body class="modern-ui" style="background: #f1f1f1">
<div class="page">
<div class="page-header">
<div class="page-header-content">
<h3>Metro UI CSS样式文件之组件（多页控件和手风琴）</h3>
</div>
</div>
<div class="page-region">
<div class="page-region-content">
<p>多页控件Demo</p>
<div data-role="page-control" class="page-control span10">
<span class="menu-pull"></span>
<div class="menu-pull-bar">页面 1</div>
<ul>
<li class="active"><a href="#page1">页面 1</a></li>
<li><a href="#page2">页面 2</a></li>
<li><a href="#page3">页面 3</a></li>
<li><a href="#page4">页面 4</a></li>
</ul>
<div class="frames">
<div id="page1" class="frame active">
<h2>页面 1</h2>
<p>Windows8已经到来，基于Metro UI风格完全改变了Window要操作系统。Metro是微软的设计语言，微软将这个新的UI用于他们的所有平台，包括台式机、平板电脑、手机和他们的网站。就我个人而言，我喜欢Metro UI，它的简单性、基于网格的接口（适合响应式设计），以及他在每个部分的一致性很适合现代网页设计的需求。Metro UI也将挑起网页设计的一股新浪潮。</p>
</div>
<div id="page2" class="frame">
<h2>页面 2</h2>
<p>现在Metro的概念传播到多种产品上。品牌宣传、媒体中心，Windows Phone，Windows8操作系统。其最大特点就是通过方正的区块标记简单的连接到需要的地方，简单明了，从视觉上就能告诉我们要去的地方是什么？
微软是这样描述的：“Metro是我们的设计语言。我们称之为‘Metro’，是因为他的现代和简约，而且他在移动时，速度非常的快，他的排版结合印刷术。而且他是完全真实的”。</p>
</div>
<div id="page3" class="frame">
<h2>页面 3</h2>
<p>Metro UI风格大家一定见识了不少，至于其好坏我们在此不做讨论，今天开始，我们在w3cplus上会推出一系列的Metro UI设计风格的DEMO，当然这些DEMO不是仅仅的Metro UI风格，我们会尽量使用CSS3属性，让其效果更佳优美，或者我们也会将其结合Bootstrap制作一些DEMO以供大家学习。另外广大网友提意在DEMO中加入简单的介绍，方便理解。那么从今天开始的DEMO，我们会加入一些说明，如果您有更好的建议，希望能告诉我们。谢谢！</p>
</div>
<div id="page4" class="frame">
<h2>页面 4</h2>
<p>W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。</p>
</div>
</div>
</div>
<h2>Javascript</h2>
<p>在页面头部加载<code>pagecontrol.js</code></p>
<br>
<br>
<p>手风琴 Demo</p>
<h2>手风琴</h2>
<ul data-role="accordion" class="accordion span10">
<li>
<a href="#">标题 1</a>
<div>
<h3>标题 1</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
<p>
子内容2
</p>
</div>
</li>
<li class="active">
<a href="#">标题 2</a>
<div>
<h3>标题 2</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
<div>
子内容 2
</div>
</div>
</li>
<li>
<a href="#">标题 3</a>
<div>
<h3>标题 3</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
<li>
<a href="#">标题 4</a>
<div>
<h3>标题 4</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
</ul>
<h2>深色手风琴</h2>
<ul data-role="accordion" class="accordion dark span10">
<li>
<a href="#">标题 1</a>
<div>
<h3>标题 1</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
<li class="active">
<a href="#">标题 2</a>
<div>
<h3>标题 2</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
<li>
<a href="#">标题 3</a>
<div>
<h3>标题 3</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
<li>
<a href="#">标题 4</a>
<div>
<h3>标题 4</h3>
W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。
</div>
</li>
</ul>
<h2>Javascript</h2>
<p>页面头部需要加载<code>accordion.js</code></p>
</div>
</div>
</body>
</html>效果展示:
扫一扫
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
