仿flashjquerybootstrap菜单侧栏menuwap菜单.rar资源-CSDN文库

共23个文件

jpg：10个

js：6个

css：3个

需积分: 5 157 浏览量 2023-09-12 08:45:42 上传评论收藏 958KB RAR 举报

标题中的“仿flashjquerybootstrap菜单侧栏menuwap菜单.rar”表明这是一个使用了jQuery、Bootstrap框架，并且具有模拟Flash效果的侧栏菜单，适用于移动设备（WAP）的网页模板。这个压缩包包含了一系列用于构建这种功能的资源文件。我们要理解jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本模板中，jQuery可能被用来实现动态菜单的交互效果，如点击展开或收起，以及响应式设计以适应不同设备的屏幕尺寸。 Bootstrap是Twitter开发的一个开源前端框架，它提供了一套包括CSS和JavaScript组件的设计模板，用于快速构建响应式和移动优先的网站。在这个模板中，Bootstrap的CSS和JS组件可能被用于构建导航栏、侧栏菜单等界面元素，确保它们在各种屏幕尺寸上都能正确显示和操作。描述中提到的“亮红色个性杂志翻页效果”可能是指模板采用了鲜明的红色调，以及一种类似于实体杂志翻页的视觉效果。这通常是通过CSS3的3D变换或者JavaScript插件实现的，如BookBlock.js，它能够创建一个可翻页的书籍布局，为用户带来更生动的浏览体验。在压缩包内的文件名列表中： - `style.css` 是主要的样式表文件，包含了整个模板的CSS样式，包括颜色、布局、字体等视觉元素的定义。 - `bookblock.css` 可能是用于实现杂志翻页效果的特定CSS，它可能包含了BookBlock插件所需的样式规则。 - `jquery.jscrollpane.custom.css` 与jQuery ScrollPane插件相关，这是一个用于创建自定义滚动条的库，它可以提高滚动区域的用户体验。 - `index.html` 是网页的主入口文件，包含了HTML结构和页面内容，以及对CSS和JavaScript文件的引用。 - `bg.jpg`, `m2.jpg`, `m4.jpg`, `m3.jpg`, `team-1.jpg`, `team-3.jpg` 这些是图片资源，可能用作背景图像、菜单图标或者其他设计元素。综合以上信息，我们可以得出这个模板结合了jQuery的动态效果、Bootstrap的响应式布局以及BookBlock的翻页效果，为设计师或个人博主提供了一个色彩鲜明、互动性强的在线作品展示平台，尤其适合在移动设备上浏览。通过修改和定制这些资源，用户可以根据自己的需求打造出独特的个人主页。

资源推荐

资源详情

资源评论

收起资源包目录

亮红色个性杂志翻页效果个人主页模板_红色个性杂志翻页博客设计师作品展示个人个人主页blog仿flashjquerybootstrap菜单侧栏menuwap菜单.rar （23个子文件）

style.css 19KB

m4.jpg 10KB

modernizr.custom.79639.js 9KB

m1.jpg 7KB

arrow.png 3KB

device.png 224KB

bookblock.css 2KB

jquerypp.custom.js 8KB

m2.jpg 13KB

jquery.bookblock.js 15KB

jquery.mousewheel.js 2KB

jquery.jscrollpane.min.js 14KB

bg.jpg 620KB

team-3.jpg 9KB

page.js 4KB

index.html 18KB

m3.jpg 9KB

m6.jpg 8KB

team-1.jpg 9KB

team-2.jpg 6KB

icon.png 6KB

team-4.jpg 8KB

jquery.jscrollpane.custom.css 1KB

<!DOCTYPE html> <html> <head> <title>Home</title> <meta name="description" content="Fullscreen Pageflip Layout with BookBlock" /> <meta name="keywords" content="fullscreen pageflip, booklet, layout, bookblock, jquery plugin, flipboard layout, sidebar menu" /> <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/modernizr.custom.79639.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Modelio Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> </script> </head> <body> <div id="container" class="container"> <div class="menu-panel"> <h3>Modelio</h3> <ul id="menu-toc" class="menu-toc"> <li class="menu-toc-current"><a href="#item1">Home</a></li> <li><a href="#item3">About</a></li> <li><a href="#item4">Models</a></li> <li><a href="#item5">Team</a></li> <li><a href="#item5">Portfolio</a></li> <li><a href="#item5">Contact</a></li> </ul> </div> <div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item" id="item1"> <div class="content"> <div class="scroller"> <div class="wrap"> <h2><a href="index.html">MODELIO</a></h2> <div class="banner"> <div class="banner-text"> <h1>THE WHOLE WORLD</h1> <p>OF BEAUTY AND FASHION</p> <a class="read-btn" href="#">Read More</a> </div> </div> <div class="banner-bottom"> <h3>BE ALWAYS ON THE CUTTING EDGE OF STYLE!</h3> <h4>GO TO THE TOP FASHION DESIGN SCHOOL</h4> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p class="para">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p> </div> </div> </div> <div class="copy-right"> <div class="wrap"> <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="http://www.moobnn.com/">网页模板</a></p> </div> </div> </div> </div> <div class="bb-item" id="item2"> <div class="content"> <div class="scroller two"> <div class="wrap"> <h2><a href="index.html">MODELIO</a></h2> <div class="about"> <h3 class="sec-head">About</h3> <h3>BE ALWAYS ON THE CUTTING EDGE OF STYLE!</h3> <h4>GO TO THE TOP FASHION DESIGN SCHOOL</h4> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="copyrights">Collect from <a href="http://www.moobnn.com/" >手机网站模板</a></div> <div class="second-paper"> <div class="second-img"> <img src="images/device.png" alt=""/> </div> <div class="second-text"> <div class="mod-menu"> <ul class="nav menu "> <li><a href="#"><span> </span>Lorem ipsum dolor sit amet conse </a></li> <li><a href="#"><span> </span>Excepteur sint occaecat cupidatat non</a></li> <li><a href="#"><span> </span>Proident sunt in culpa qui officia </a></li> <li><a href="#"><span> </span>Ipsum dolor sit amet conse </a></li> <li><a href="#"><span> </span>Initial Setup & Customizations</a></li> <li><a href="#"><span> </span>Voluptate velit esse cillum </a></li> <li><a href="#"><span> </span>Lorem ipsum dolor sit amet conse ctetur </a></li> <div class="clear"></div> </ul> </div> </div> <div class="clear"></div> </div> <p class="sub-para">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> <div class="copy-right"> <div class="wrap"> <p>Copyright © 2015.Company name All rights reserved.More Templates <a href="http://www.moobnn.com/" target="_blank" title="模板在线">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a> - Collect from <a href="http://www.moobnn.com/" title="模板在线" target="_blank">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a></p> </div> </div> </div> </div> <div class="bb-item" id="item3"> <div class="content"> <div class="scroller"> <div class="wrap"> <h2><a href="index.html">MODELIO</a></h2> <div class="meodels"> <h3 class="sec-head">Models </h3> <div class="span_1"> <div class="grid_1"> <img src="images/m1.jpg" class="img-responsive" alt=""/> <h4>JESSICA PRISTON</h4> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua. Ut enim

评论收藏

内容反馈