【免费】人物照片墙HTML模板是一款适合团队照片展示，作品展示的网站模板.rar资源-CSDN文库

共145个文件

jpg：81个

png：30个

js：17个

需积分: 0 22 浏览量更新于2023-09-12 收藏 2.85MB RAR 举报

这款名为“人物照片墙HTML模板”的资源是一个专为团队成员或作品展示设计的网页模板，主要基于HTML语言。HTML（HyperText Markup Language）是构建网页的基础语言，它定义了网页的结构和内容。这个模板可以帮助用户快速搭建一个具有吸引力且功能齐全的照片展示平台。在提供的压缩包文件中，我们可以看到几个关键的CSS文件，它们对于模板的样式和布局至关重要： 1. **style.css**：这是主要的样式表文件，包含了整个网站的基本样式和布局规则。开发者可以通过修改这个文件来调整网站的整体视觉效果，如字体、颜色、布局和间距等。 2. **magnific-popup.css**：Magnific Popup是一个轻量级的JavaScript插件，用于创建弹出窗口。在这个模板中，它可能被用来实现图片或内容的放大预览，提供更好的用户体验。 3. **elastislide.css**：Elastislide是一个响应式的滑块插件，用于创建可缩放的图片滑块。在人物照片墙中，这将有助于展示多张图片，并且在不同屏幕尺寸下都能保持良好的显示效果。 4. **colorbox.css**：ColorBox是一个JavaScript插件，用于创建弹出式图像画廊。它可能与模板中的图片展示部分结合，提供优雅的全屏浏览体验。 5. **ajax-loader.gif**和**loading.gif**：这两个是加载动画的图形文件，通常在页面内容动态加载时显示，以告知用户系统正在处理请求。除此之外，还有几个HTML文件： 1. **index.html**：这是网站的主页，包含模板的主要内容和结构。在这里，你可以找到团队照片墙的展示部分以及其他重要元素。 2. **single.html**：这个文件可能用于显示单个项目的详细信息，比如团队成员的个人资料或者作品的详细描述。 3. **blog.html**：如果模板支持博客功能，这个文件则可能包含博客文章的列表或单篇文章的布局。 4. **project.html**：这可能是项目或作品集的页面，用户可以浏览和探索更多关于团队完成的项目的信息。通过整合这些文件，用户可以创建一个美观且功能强大的人物照片墙，展示团队成员的专业技能和个人风采，或者用于展示艺术作品、摄影集等。这个模板对于那些希望快速建立在线存在感，而没有太多网页设计经验的人来说非常实用。只需简单编辑内容，就可以自定义成符合自己需求的网站。

收起资源包目录

人物照片墙HTML模板是一款适合团队照片展示，作品展示的网站模板.rar （145个子文件）

style.css 60KB

magnific-popup.css 11KB

elastislide.css 4KB

colorbox.css 3KB

ajax-loader.gif 3KB

loading.gif 895B

index.html 23KB

single.html 23KB

blog.html 17KB

project.html 15KB

about.html 15KB

portfolio.html 14KB

contact.html 10KB

404.html 7KB

blog-img9.jpg 131KB

blog-img10.jpg 131KB

blog-img8.jpg 98KB

blog-img6.jpg 91KB

blog-img5.jpg 76KB

p1.jpg 74KB

p7.jpg 72KB

pic20.jpg 66KB

p6.jpg 65KB

p2.jpg 64KB

p8.jpg 63KB

p3.jpg 61KB

banner.jpg 59KB

p9.jpg 56KB

p5.jpg 54KB

p10.jpg 54KB

pic14.jpg 48KB

blog-img2.jpg 47KB

pic13.jpg 46KB

t-pic2.jpg 44KB

pic18.jpg 42KB

g_zoom.jpg 42KB

pic16.jpg 42KB

pic19.jpg 41KB

t-pic1.jpg 38KB

blog-img1.jpg 38KB

pic15.jpg 36KB

about-img.jpg 34KB

p4.jpg 33KB

blog-img7.jpg 30KB

blog-img3.jpg 26KB

pic12.jpg 24KB

t-pic5.jpg 23KB

pic8.jpg 23KB

t-pic3.jpg 22KB

pic7.jpg 22KB

pic1.jpg 19KB

pic17.jpg 19KB

pic2.jpg 19KB

t-pic4.jpg 18KB

about-img2.jpg 18KB

pic10.jpg 17KB

pic5.jpg 17KB

pic3.jpg 16KB

about-img6.jpg 15KB

about-img3.jpg 14KB

pic9.jpg 14KB

about-img5.jpg 14KB

pic11.jpg 14KB

about-img4.jpg 13KB

pic4.jpg 13KB

about-img7.jpg 13KB

pic6.jpg 13KB

about-img8.jpg 13KB

pic.jpg 11KB

blog-img4.jpg 10KB

list-img1.jpg 8KB

about-img9.jpg 8KB

list-img.jpg 8KB

g1.jpg 7KB

t-p1.jpg 7KB

g3.jpg 7KB

g2.jpg 6KB

g4.jpg 6KB

list-img2.jpg 6KB

g5.jpg 6KB

list-img5.jpg 5KB

g6.jpg 5KB

list-img4.jpg 5KB

client7.jpg 5KB

client8.jpg 5KB

c4.jpg 5KB

client5.jpg 4KB

c3.jpg 4KB

client1.jpg 4KB

client3.jpg 4KB

client6.jpg 4KB

client2.jpg 4KB

c1.jpg 4KB

c2.jpg 4KB

client4.jpg 4KB

jquery.min.js 90KB

jquery.magnific-popup.js 45KB

jquery.mixitup.min.js 14KB

jquery.elastislide.js 13KB

jquery.wookmark.js 12KB

共 145 条

资源推荐

资源预览

资源评论

<!DOCTYPE HTML> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  <script type="text/javascript" src="js/jquery.min.js"></script>  <script src="js/jquery.magnific-popup.js" type="text/javascript"></script> <link href="css/magnific-popup.css" rel="stylesheet" type="text/css"> <script> $(document).ready(function() { $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-zoom-in' }); }); </script> </head> <body> <div class="header"> <div class="wrap"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt=""/></a> </div> <div class="cssmenu"> <ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="clear"></div> </div> </div> <div class="index-banner"> <div class="wmuSlider example1"> <div class="wmuSliderWrapper"> <article style="position: absolute; width: 100%; opacity: 0;"> <div class="banner-wrap"> <div class="slider-left"> <h3>We Believe</h3> <h4>In Quality Design</h4> <p class="top">Any Creative Project is Unique</p> <p class="middle">and should be provided with</p> <p class="bottom">the appropriate quality</p> <button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button>  <div id="small-dialog" class="mfp-hide"> <div class="plans_table"> <table width="100%" cellspacing="0" class="compare_plan"> <thead> <tr> <th class="plans-list"><h3>Plan Features</h3></th> <th class="plans-list"><h3>Basic</h3><h4>$5<small>/month</small></h4></th> <th class="plans-list"><h3>Economy</h3><h4>$9<small>/month</small></h4></th> </tr> </thead> <tfoot> <tr> <td> </td> <td class="order_now"><a href="#account" class="scroll"><button>Order Now</button></a></td> <td class="order_now"><a href="#account" class="scroll"><button>Order Now</button></a></td> </tr> </tfoot> <tbody> <tr> <td class="plan_list_title">Web Space</td> <td class="price_body">Unlimited</td> <td class="price_body">Unlimited</td> </tr> <tr> <td class="plan_list_title">Bandwidth</td> <td class="price_body">Unlimited</td> <td class="price_body">Unlimited</td> </tr> <tr> <td class="plan_list_title">25 GB Storage</td> <td class="price_body"><img src="images/icon-remove.png" alt="img"></td> <td class="price_body">Unlimited</td> </tr> <tr> <td class="plan_list_title">iPhone App</td> <td class="price_body"><img src="images/icon-remove.png" alt="img"></td> <td class="price_body">Unlimited</td> </tr> <tr> <td class="plan_list_title">Enhanced Security</td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> </tr> <tr> <td class="plan_list_title">E-mail</td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> </tr> <tr> <td class="plan_list_title">Wordpress Support</td> <td class="price_body"><img src="images/icon-remove.png" alt="img"></td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> </tr> <tr> <td class="plan_list_title">24/7 Support</td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> </tr> <tr> <td class="plan_list_title">Backups</td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> <td class="price_body"><img src="images/tickmark-icon.png" alt="img"></td> </tr> <tr> <td class="plan_list_title">Dedicated IP</td> <td class="price_body">$2/mo</td> <td class="price_body">$2/mo</td> </tr> </tbody></table> </div> </div>  </div> <div class="slider-right"> <img src="images/banner-left.png" /> </div> <div class="clear"></div> </div> </article> <article style="position: relative; width: 100%; opacity: 1;"> <div class="banner-wrap"> <div class="slider-right"> <img src="images/banner-left.png" /> </div> <div class="slider-left"> <h3>We Believe</h3> <h4>In Quality Design</h4> <p class="top">Any Creative Project is Unique</p> <p class="middle">and should be provided with</p> <p class="bottom">the appropriate quality</p> <button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button> </div> <div class="clear"></div> </div> </article> <article style="position: absolute; width: 100%; opacity: 0;"> <div class="banner-wrap"> <div class="slider-left"> <h3>We Believe</h3> <h4>In Quality Design</h4> <p class="top">Any Creative Project is Unique</p> <p class="middle">and should be provided with</p> <p class="bottom">the appropriate quality</p> <button class="btn btn-8 btn-8b"><a class="popup-with-zoom-anim" href="#small-dialog">Order Now</a></button> </div> <div class="slider-right"> <img src="images/banner-left.png" /> </div> <div class="clear"></div> </div> </article> <article style="position: absolute; width: 100%; opacity: 0;"> <div class="banner-wrap"> <div class="slider-right"> <img src="images/banner-left.png" /> </div> <div class="slider-left"> <h3>We Believe</h3> <h4>In Quality Design</h4> <p class="top">Any Creative Project is Unique</p> <p class="middle">and should be provided with</p> <p class="bottom">the appropriate quality</p> <button class="btn btn