漂亮宽屏牙科牙医美容行业网站模板_漂亮宽屏牙科牙医美容医疗医院药品蓝色幻灯lightbox医生

共56个文件

jpg：29个

png：8个

js：6个

108 浏览量 2023-08-05 15:47:36 上传评论收藏 1.12MB RAR 举报

该压缩包文件包含的是一款专为牙科、牙医、美容行业设计的漂亮宽屏网站模板，适合医疗、医院和药品等相关领域的在线展示。这款模板以其精致的设计和强大的功能，能够帮助专业人士创建一个吸引眼球且功能齐全的网络平台。我们要了解"宽屏"的概念。在网页设计中，宽屏模板指的是适应大屏幕分辨率的布局，通常具有更宽的视野，能展示更多的内容，给予用户更好的视觉体验。这款模板充分利用了宽屏的优势，让网站看起来更加大气、专业。 “幻灯”或“幻灯片”是网站设计中常见的一种动态展示方式，用于展示多张图片或信息，通过自动切换或用户手动触发来呈现。这种设计元素在首页常用于突出重要信息或展示精彩瞬间，增加了网站的互动性和吸引力。 “Lightbox”是一种JavaScript插件，主要用于在网页上以弹出窗口的形式展示图片、视频或其他媒体内容。当用户点击链接时，Lightbox会将背景变暗并放大选定的媒体，使得内容更加聚焦，提升用户体验。在医疗美容行业中，Lightbox可以用来展示治疗前后对比照片，或医生的专业证书等，以增加信任度。 “CSS”（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。在这个网站模板中，CSS被用来控制布局、颜色、字体、间距等视觉效果，确保整体风格的一致性和美观性。 “JS”（JavaScript）是一种广泛使用的客户端脚本语言，用于实现网页的动态交互功能。在这款模板中，JavaScript可能被用来处理幻灯片的切换、Lightbox的开启关闭、表单验证等功能，增强网站的交互性和功能性。综合来看，这个压缩包提供的网站模板结合了牙科、美容行业的特点，利用现代网页技术，如宽屏布局、JavaScript特效和CSS样式，创建了一个专业且具有吸引力的在线平台。无论是展示服务项目、医生团队，还是发布健康资讯，都能满足需求。使用这样的模板，可以快速搭建起一个功能完备、视觉效果良好的网站，对于提升医疗机构的品牌形象和客户体验有着显著的帮助。

资源推荐

资源详情

资源评论

收起资源包目录

漂亮宽屏牙科牙医美容行业网站模板_漂亮宽屏牙科牙医美容医疗医院药品蓝色幻灯 lightbox 医生_.rar （56个子文件）

漂亮宽屏牙科牙医美容行业网站模板_漂亮宽屏牙科牙医美容医疗医院药品蓝色幻灯 lightbox 医生

ctps_345_ee

b.jpg 31KB

jquery-1.8.3.min.js 91KB

camera.min.js 38KB

nivo-lightbox.min.js 7KB

move-top.js 1KB

owl.carousel.js 37KB

jquery.easing.1.3.js 8KB

css

style.css 17KB

camera.css 26KB

owl.carousel.css 9KB

magnific-popup.css 10KB

bootstrap.css 124KB

index.html 23KB

images

pic5.jpg 13KB

g3.jpg 12KB

pic6.jpg 12KB

g2.jpg 17KB

slider3.jpg 149KB

prev.png 3KB

g8.jpg 17KB

pic8.jpg 16KB

to-top2.png 3KB

pic4.jpg 6KB

p4.jpg 11KB

pic2.jpg 8KB

slider4.jpg 84KB

next.png 3KB

g7.jpg 23KB

pic3.jpg 8KB

g6.jpg 8KB

nav.png 3KB

pic1.jpg 9KB

se.png 547B

g5.jpg 8KB

slider2.jpg 31KB

close.png 3KB

light_bg.png 16KB

p2.jpg 12KB

call.jpg 14KB

g4.jpg 13KB

p3.jpg 12KB

slider1.jpg 256KB

pic7.jpg 13KB

camera_skins.png 24KB

banner2.jpg 34KB

g1.jpg 9KB

g9.jpg 9KB

p1.jpg 10KB

s.jpg 20KB

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

SansitaOne.ttf 46KB

OpenSans-Regular.ttf 212KB

<!DOCTYPE HTML> <html> <head> <title>Home</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <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="Dentist 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.8.3.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},1200); }); }); </script>  <link href="css/camera.css" rel="stylesheet" type="text/css" media="all" /> <script type='text/javascript' src='js/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> <script type='text/javascript' src='js/camera.min.js'></script> <script> jQuery(function(){ jQuery('#camera_wrap_1').camera({ thumbnails: true }); jQuery('#camera_wrap_2').camera({ height: '400px', loader: 'bar', pagination: false, thumbnails: true }); }); </script> </head> <body> <div class="header"> <div class="container"> <div class="header-top"> <div class="logo"> <a href="index.html">dentist</a> </div> <div class="top-menu"> <span class="menu"><img src="images/nav.png" alt=""/> </span> <ul> <nav class="cl-effect-16"> <li><a href="#home" class="active scroll" data-hover="home">Home</a></li> <li><a href="#about" class="scroll" data-hover="about">About</a></li> <li><a href="#services" class="scroll" data-hover="services">Services</a></li> <li><a href="#gallery" class="scroll" data-hover="gallery">Gallery</a></li> <li><a href="#team" class="scroll" data-hover="team">Team</a></li> <li><a href="#news" class="scroll" data-hover="news">News</a></li> <li><a href="#contact" class="scroll" data-hover="contact">Contact</a></li> </nav> </ul>  <script> $("span.menu").click(function(){ $(".top-menu ul").slideToggle("slow" , function(){ }); }); </script>  </div> <div class="clearfix"> </div> </div> <div class="slider"> <div class="fluid_container"> <div class="camera_wrap camera_magenta_skin" id="camera_wrap_1"> <div data-src="images/slider1.jpg"> <div class="camera_caption fadeFromBottom"> </div> </div> <div data-src="images/slider2.jpg"> <div class="camera_caption fadeFromBottom"> </div> </div> <div data-src="images/slider3.jpg"> <div class="camera_caption fadeFromBottom"> </div> </div> <div data-src="images/slider4.jpg"> <div class="camera_caption fadeFromBottom"> </div> </div> </div> <div class="clear"> </div> </div> </div> </div> </div> <div class="content"> <div class="about-section" id="about"> <div class="container"> <div class="about-header"> <h3>welcome to <span>happy smile</span></h3> </div> <div class="about-grids"> <div class="col-md-4 about-grid"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> <h4>Dolor nunc vule</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum.</p> </div> <div class="col-md-4 about-grid"> <span class="glyphicon glyphicon-check" aria-hidden="true"></span> <h4>Nullam mattis</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum.</p> </div> <div class="col-md-4 about-grid"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <h4>Dolor nunc vule</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum.</p> </div> <div class="clearfix"></div> </div> </div> </div> <div class="services-section" id="services"> <div class="container"> <h3>Services <span>overview</span></h3> <div class="services-grids"> <div class="col-md-3 services-grid"> <img src="images/p1.jpg" class="img-responsive zoom-img" alt=""> <h4>Vestibulum</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa.</p> </div> <div class="col-md-3 services-grid"> <img src="images/p2.jpg" class="img-responsive zoom-img" alt=""> <h4>Elementum</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa.</p> </div> <div class="col-md-3 services-grid"> <img src="images/p3.jpg" class="img-responsive zoom-img" alt=""> <h4>Proin Dictum</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa.</p> </div> <div class="col-md-3 services-grid"> <img src="images/p4.jpg" class="img-responsive zoom-img" alt=""> <h4>malesuada</h4> <p>Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa.</p> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="copyrights">Collect from <a href="http://www.moobnn.com/" >手机网站模板</a></div> <div class="gallery-section" id="gallery"> <div class="container"> <div class="gallery-text"> <h3>our <span>gallery</span></h3> </div> <div class="gallery-grids"> <div class="col-md-4 gallery-grid"> <div id="nivo-lightbox-demo"> <a href="images/g1.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <img src="images/g1.jpg" class="img-responsive " alt=""/> <div class="rotate"> <i> </i> </div> </a> </div> </div> <div class="col-md-4 gallery-grid"> <div id="nivo-lightbox-demo"> <a href="images/g2.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <img src="images/g2.jpg" class="img-responsive " alt=""/> <div class="rotate"> <i> </i> </div> </a> </div> </div> <div class="col-md-4 gallery-grid"> <div id="nivo-lightbox-demo"> <a href="images/g3.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <img src="images/g3.jpg" class="img-responsive " alt=""/> <div clas

评论收藏

内容反馈