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

你猜 阅读:569 2021-03-31 22:43:55 评论: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"> 
 
    <!--加载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>

效果展示:



声明

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

搜索
关注我们

一个IT知识分享的公众号