侧栏Menu导航美容化妆专题网页模板_侧栏菜单性响应式源码.rar资源-CSDN文库

共58个文件

jpg：26个

png：10个

js：8个

155 浏览量 2023-08-05 15:34:35 上传评论收藏 1.33MB RAR 举报

该压缩包文件包含一个侧栏菜单导航的美容化妆专题网页模板，使用了现代网页开发技术，如JavaScript（js）、CSS（css），并且是响应式的，能够适应不同设备的屏幕尺寸，提供良好的用户体验。以下是关于这个网页模板的一些详细知识点： 1. **侧栏Menu导航**：侧栏菜单通常在网页的一侧，常用于大型网站或有多个层级分类的网页，用户可以通过它轻松浏览和访问网站的所有部分。这种设计使得页面内容更加清晰，减少页面混乱，提高用户导航效率。 2. **响应式设计**：响应式网页设计（Responsive Web Design）是一种使网页能够自动适应不同设备屏幕尺寸的设计方法。通过使用媒体查询、流式布局、自适应图片等技术，确保网页在手机、平板、桌面电脑等不同设备上都能正常显示和使用。 3. **Bootstrap框架**：Bootstrap是广泛使用的开源前端开发框架，它提供了预设的CSS样式、JavaScript组件和HTML结构，可以快速构建美观且响应式的网页。在这个模板中，Bootstrap可能被用来实现侧栏菜单和其他交互元素。 4. **CSS（层叠样式表）**：CSS是用于定义网页样式和布局的语言。在这个模板中，CSS可能被用来设置颜色、字体、布局、动画效果等，以实现视觉上的吸引力和专业感。 5. **JavaScript（JS）**：JavaScript是一种客户端脚本语言，用于增加网页的交互性。在这个模板中，JS可能用于实现侧栏菜单的展开和折叠，以及其他动态效果，如滑动过渡、弹出框等。 6. **扁平化设计**：扁平化设计是一种简约的界面设计风格，去除了多余的装饰元素，强调清晰、直观和易用。这个模板可能采用了扁平化设计原则，使界面看起来简洁而时尚。 7. **专题网页**：专题网页是为了特定主题或活动而设计的网页，通常包括与主题相关的信息、图像和链接。这个模板可能专为美容、化妆或美发等美容行业相关的内容而定制。 8. **大图设计**：大图背景或者作为主要内容展示的图片，可以增强网页的视觉冲击力，提升品牌形象。在这个模板中，可能有设计用于突出美容产品的大型图片元素。 9. **女性、模特、唇彩、性感等关键词**：这些词汇表明模板可能针对的是女性消费者，尤其是对美容产品感兴趣的群体。模特和唇彩等元素可能被用来展示产品，性感则可能暗示一种时尚或高端的审美风格。这个压缩包提供的侧栏Menu导航美容化妆专题网页模板是一个结合了现代设计趋势和技术的解决方案，适合用于创建吸引女性用户、具有强烈视觉吸引力的美容相关网站。通过利用响应式布局、Bootstrap框架、CSS和JavaScript，可以创建一个不仅美观而且功能强大的网页，同时满足不同设备用户的浏览需求。

资源推荐

资源详情

资源评论

收起资源包目录

侧栏Menu导航美容化妆专题网页模板_侧栏菜单导航美容化妆美发专题单页唇彩黑色大图女性模特性响应式源码.rar （58个子文件）

侧栏Menu导航美容化妆专题网页模板_侧栏菜单导航美容化妆美发专题单页唇彩黑色大图女性模特性感 bootstrap 手机响应式扁平化

cpts_449_tg

modernizr.custom.97074.js 8KB

jquery.chocolat.js 10KB

jquery.flexslider.js 41KB

easing.js 5KB

classie.js 2KB

move-top.js 1KB

modernizr.custom.js 8KB

jquery-1.11.1.min.js 94KB

css

style.css 23KB

flexslider.css 4KB

component.css 2KB

bootstrap.css 138KB

chocolat.css 2KB

index.html 18KB

images

g3.jpg 77KB

g2.jpg 73KB

b1.jpg 42KB

g-2.jpg 19KB

test-1.jpg 14KB

g-5.jpg 13KB

3.png 17KB

g8.jpg 55KB

a-1.jpg 20KB

a-3.jpg 25KB

menu.png 3KB

g-4.jpg 13KB

g-6.jpg 17KB

left-1.png 3KB

social.png 4KB

1.png 15KB

bnr.jpg 86KB

g-3.jpg 29KB

g7.jpg 44KB

a-2.jpg 14KB

g6.jpg 61KB

b5.jpg 20KB

b4.jpg 27KB

d-arw.png 3KB

g5.jpg 42KB

a-4.jpg 23KB

close.png 280B

g-8.jpg 28KB

right-1.png 3KB

g4.jpg 48KB

g-1.jpg 25KB

top-arrow.png 5KB

g-7.jpg 26KB

2.png 24KB

g1.jpg 46KB

c-banner.jpg 53KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

SourceSansPro-Regular.ttf 146KB

Niconne-Regular.ttf 45KB

Italianno-Regular.ttf 134KB

<!DOCTYPE html> <html> <head> <title>Home</title> <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> <link href="css/style.css" type="text/css" rel="stylesheet" media="all"> <link href="css/component.css" rel="stylesheet" type="text/css" />  <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="Gorgeous Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod 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 src="js/jquery-1.11.1.min.js"></script>   <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script>  </head> <body class="cbp-spmenu-push">  <div class="banner" id="home">  <div class="header"> <div class="logo"> <h1><a href="index.html">Gorgeous</a></h1> </div> <div class="top-nav"> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> <h3>Menu</h3> <a href="index.html" class="active scroll">Home</a> <a href="#about" class="scroll">About Us</a> <a href="#gallery" class="scroll">Gallery</a> <a href="#news" class="scroll">News</a> <a href="#advantages" class="scroll">Our Advantages</a> <a href="#contact" class="scroll">Contact Us</a> </nav> <div class="main buttonset">  <button id="showRightPush"><img src="images/menu.png" alt=""/></button>  </div>  <script src="js/classie.js"></script> <script> var menuRight = document.getElementById( 'cbp-spmenu-s2' ), showRightPush = document.getElementById( 'showRightPush' ), body = document.body; showRightPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toleft' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRightPush' ); }; function disableOther( button ) { if( button !== 'showRightPush' ) { classie.toggle( showRightPush, 'disabled' ); } } </script>  </div> <div class="clearfix"></div> </div>  <div class="container"> <div class="banner-bottom"> <ul> <li class="s1"><p>SCROLL DOWN</p><a href="#about" class="scroll"><img src="images/d-arw.png" alt="" /></a></li> <li class="s2"><p>SCROLL DOWN</p><a href="#about" class="scroll"><img src="images/d-arw.png" alt="" /></a></li> </ul> </div> <div class="bnr-grids"> <div class="col-md-4 bnr-left"> <div class="b-one"> <img src="images/1.png" alt="" /> <p>Ut tincidunt dolor sed neque malesuada ullamcorper. In accumsan magna in tristique consectetur.</p> </div> </div> <div class="col-md-4 bnr-left"> <div class="b-two"> <img src="images/2.png" alt="" /> <p>Ut tincidunt dolor sed neque malesuada ullamcorper. In accumsan magna in tristique consectetur.</p> </div> </div> <div class="col-md-4 bnr-left"> <div class="b-tre"> <img src="images/3.png" alt="" /> <p>Ut tincidunt dolor sed neque malesuada ullamcorper. In accumsan magna in tristique consectetur.</p> </div> </div> <div class="clearfix"></div> </div> </div> </div>  <div class="copyrights">Collect from <a href="http://www.moobnn.com/" >企业网站模板</a></div>  <div class="about" id="about"> <div class="container"> <div class="about-top heading"> <h2>About Us</h2> <p>Donec eu aliquam eros. Integer consequat purus ac lorem finibus vestibulum. Donec pulvinar purus a nibh tempus convallis. Sed scelerisque posuere maximus.</p> </div> <div class="about-bottom"> <div class="col-md-6 about-left"> <div class="abt-one"> <div class="abt-left"> <h4>Pellentesque mollis malesuada</h4> <p>Nulla et finibus libero. Suspendisse vitae ex facilisis, ultricies est sed, porta ante. Vivamus tristique luctus lorem, eget dignissim lacus sodales tristique.</p> </div> <div class="abt-right"> <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> </div> <div class="clearfix"></div> </div> <div class="abt-two"> <div class="abt-left"> <h4>Pellentesque mollis malesuada</h4> <p>Nulla et finibus libero. Suspendisse vitae ex facilisis, ultricies est sed, porta ante. Vivamus tristique luctus lorem, eget dignissim lacus sodales tristique.</p> </div> <div class="abt-right"> <span class="glyphicon glyphicon-gift" aria-hidden="true"></span> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-6 about-left"> <div class="abt-one"> <div class="ab-left"> <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> </div> <div class="ab-right"> <h4>Pellentesque mollis malesuada</h4> <p>Nulla et finibus libero. Suspendisse vitae ex facilisis, ultricies est sed, porta ante. Vivamus tristique luctus lorem, eget dignissim lacus sodales tristique.</p> </div> <div class="clearfix"></div> </div> <div class="abt-two"> <div class="ab-left"> <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> </div> <div class="ab-right"> <h4>Pellentesque mollis malesuada</h4> <p>Nulla et finibus libero. Suspendisse vitae ex facilisis, ultricies est sed, porta ante. Vivamus tristique luctus lorem, eget dignissim lacus sodales tristique.</p> </div> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </div> </div> </div>   <div class="gallery" id="gallery"> <div class="container"> <div class="gallery-top heading"> <h3>Our Gallery</h3> </div> <div class="gallery-bottom"> <div class="gallery-grids"> <div class="col-md-3 gallery-left"> <div class="g-1"> <a class="example-image-link" href="images/g2.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/g-2.jpg" alt=""/></a> </div> <div class="g-2"> <a class="example-image-link" href="images/g7.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/g-7.jpg" alt=""/></a> </div> </div> <div class="col-md-6 gallery-left"> <a class="example-image-link" href="images/g1.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="images/g-1.jpg" alt=""/></a> <div class="g-5"> <div class="col-md-6 g-3"> <a class="example-image-link" href="images/g5.jpg" data-lightbox="example-set" data-title=""><img class="example

评论收藏

内容反馈