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

查阅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>

效果展示:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值