Metro UI CSS 学习笔记之组件(多页控件和手风琴)

来源：互联网发布：数据结构设计编辑：程序博客网时间：2024/05/22 06:46
查阅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>
效果展示:
0 0