【免费】黑色动画仿flash交互jquery响应式个人简历手机web简历作品展示案例css3html5摄影图片商业企业精品.rar

共36个文件

jpg：14个

css：5个

js：4个

需积分: 0 24 浏览量更新于2023-09-11 收藏 1.47MB RAR 举报

标题 "黑色动画仿flash交互jquery响应式个人简历手机web简历作品展示案例css3html5摄影图片商业企业精品.rar" 描述了这是一个使用HTML、CSS3和JavaScript（特别是jQuery）技术制作的响应式个人简历网站模板。它具有黑色背景，带有动画效果，能够模拟Flash的交互性，同时适用于手机和平板等移动设备。该模板特别适合设计师或自由职业者展示他们的作品集，同时也适合商业企业使用。标签 "html 毕业设计" 暗示这个项目可能是作为计算机科学或相关专业学生的毕业设计作品，其中重点是HTML编码和网页布局设计。在压缩包文件名称列表中，我们可以看到以下关键文件： 1. **bootstrap.min.css**：这是Bootstrap框架的压缩版CSS文件，提供了响应式布局和常见的用户界面组件，如导航栏、按钮、表格等。 2. **animate.css**：一个包含各种动画效果的库，用于为网页元素添加动态效果，增强了用户体验。 3. **font-awesome.min.css** 和 **fontawesome-webfont.eot**、**Simple-Line-Icons.eot**：这些文件与Font Awesome图标库有关，提供了一套可缩放的矢量图标，可用于网页设计中的装饰和功能按钮。 4. **templatemo_style.css** 和 **simple-line-icons.css**：这两个CSS文件分别包含了模板特有的样式和Simple Line Icons库的样式，用于自定义界面外观和图标样式。 5. **index.html**：这是网站的主入口文件，包含HTML结构和页面内容。 6. **5.jpg**、**7.jpg**：这些可能是用于网站背景、作品展示或其他视觉元素的图片资源。综合以上信息，我们可以推断出这个项目是一个利用现代Web技术（HTML5、CSS3、jQuery）创建的响应式个人简历模板，它结合了Bootstrap框架的灵活性，Animate.css的动画效果，以及Font Awesome和Simple Line Icons的图标库来增强视觉呈现。通过这个模板，用户可以快速构建一个具有专业外观且适应多种设备的在线简历，展示其技能和作品。对于学习Web开发的学生来说，这是一个很好的实践案例，也体现了当前网页设计的趋势和标准。

收起资源包目录

黑色css3动画响应式个人web简历模板_黑色动画仿flash交互jquery响应式个人简历手机web简历作品展示案例css3html5摄影图片商业企业精品.rar （36个子文件）

simple-line-icons.css 11KB

offer-bg.jpg 65KB

custom.min.js 1KB

a2.jpg 53KB

bootstrap.min.css 111KB

blog-pink.jpg 46KB

2.jpg 49KB

Simple-Line-Icons.eot 35KB

FontAwesome.otf 73KB

fontawesome-webfont.eot 71KB

6.jpg 83KB

shape-1.png 1KB

jquery.gmap3.min.js 29KB

a1.jpg 45KB

1.jpg 53KB

blog-blue.jpg 46KB

templatemo_custom.js 2KB

fontawesome-webfont.woff 82KB

animate.css 53KB

5.jpg 127KB

font-awesome.min.css 21KB

Simple-Line-Icons.woff 58KB

index.html 14KB

Simple-Line-Icons.dev.svg 178KB

fontawesome-webfont.svg 248KB

fontawesome-webfont.ttf 138KB

jquery.min.js 94KB

story-bg.jpg 60KB

3.jpg 60KB

shape-2.png 1KB

7.jpg 97KB

blog-green.jpg 21KB

templatemo_style.css 17KB

Simple-Line-Icons.svg 175KB

4.jpg 63KB

Simple-Line-Icons.ttf 34KB

资源推荐

资源预览

资源评论

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> <title>Raleway - Creative Animated Template</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/simple-line-icons.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/templatemo_style.css"> </head> <body> <header class="site-header container animated fadeInDown"> <div class="header-wrapper"> <div class="row"> <div class="col-md-4"> <div class="site-branding"> <a href="#"><h1>Raleway</h1></a> </div> </div> <a href="#" class="toggle-nav hidden-md hidden-lg"> <i class="fa fa-bars"></i> </a> <div class="col-md-8"> <nav id="nav" class="main-navigation hidden-xs hidden-sm"> <ul class="main-menu"> <li><a class="show-1 active homebutton" href="#">Home</a></li> <li><a class="show-2 aboutbutton" href="#">About Us</a></li> <li><a class="show-3 projectbutton" href="#">Projects</a></li> <li><a class="show-4 blogbutton" href="#">Blog Entries</a></li> <li><a class="show-5 contactbutton" href="#">Contact</a></li> </ul> </nav> <nav class="main-navigation menu-responsive hidden-md hidden-lg"> <ul class="main-menu"> <li><a class="show-1 active homebutton" href="#">Home</a></li> <li><a class="show-2 aboutbutton" href="#">About Us</a></li> <li><a class="show-3 projectbutton" href="#">Projects</a></li> <li><a class="show-4 blogbutton" href="#">Blog Entries</a></li> <li><a class="show-5 contactbutton" href="#">Contact</a></li> </ul> </nav> </div> </div> </div> </header> <div class="copyrights">Collect from <a href="http://www.moobnn.com/" title="网站模板">网站模板</a></div> <div id="menu-container"> <div id="menu-1" class="homepage home-section container"> <div class="home-intro text-center"> <h2 class="welcome-title animated fadeInLeft">Introduction</h2> <p class="animated fadeInRight">Raleway HTML5 template is provided by <span class="blue">template</span><span class="green">mo</span>. Credit goes to <a href="#">Unsplash</a> for photos. Feel free to modify and use this layout for any personal or commercial website.</p> <ul class="list-icons animated fadeInUp"> <li><i class="icon-trophy"></i></li> <li><i class="icon-badge"></i></li> <li><i class="icon-magic-wand"></i></li> <li><i class="icon-screen-desktop"></i></li> </ul> </div> <div class="home-projects"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="project-title animated fadeInUp"> <h2>Latest Projects</h2> <p>Sed eu turpis vehicula, iaculis sapien eu, molestie libero. Cras ac urna in neque commodo sodales vel et dolor. Pellentesque aliquam semper lectus, nec consequat ex lacinia nec. <br><br>Nunc eget velit nec felis ultrices vulputate venenatis interdum arcu. In ac auctor quam. </p> <a href="#" class="pink-button">Continue Journal</a> </div> </div> <div class="project-home-holder col-md-6 col-sm-12"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="project-item one animated fadeInRight"> <img src="img/1.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project One</a></h4> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="project-item two animated fadeInRight"> <img src="img/2.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project Two</a></h4> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="project-item three animated fadeInRight"> <img src="img/3.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project Three</a></h4> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="project-item four animated fadeInRight"> <img src="img/4.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project Four</a></h4> </div> </div> </div> </div> </div> </div> </div> </div> <div id="menu-2" class="content about-section container"> <div class="our-story"> <div class="story-bg animated fadeIn"></div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="inner-story animated fadeInRight text-center"> <h2>ABOUT US</h2> <p>Cras placerat, est ac sollicitudin laoreet, ante enim egestas lorem, vel auctor nibh massa sit amet lacus. Cras mollis tellus id sollicitudin vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam gravida arcu</p> </div> </div> </div> </div> <div class="our-offers"> <div class="offer-bg animated fadeIn"></div> <div class="offer-header"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <div class="offer-title animated fadeInDown"> <h2>OUR WORK</h2> </div> </div> </div> </div> <div class="row"> <div class="offer-holder"> <div class="col-md-6"> <div class="offer-item offer-1 animated fadeInLeft"> <figure> <img src="img/a1.jpg" alt=""> </figure> <div class="offer-content text-center"> <h4>HAPPY WORKING WITH US</h4> <p>Sed sagittis nunc vel tellus ultricies auctor. Class aptent taciti sociosqu ad litora torquent per conubia , per inceptos himenaeos. Integer eleifend tellu.</p> <span class="offer-left"><i></i></span> <span class="offer-right"><i></i></span> </div> </div> </div> <div class="col-md-6"> <div class="offer-item offer-2 animated fadeInRight"> <figure> <img src="img/a2.jpg" alt=""> </figure> <div class="offer-content text-center"> <h4>OUR COMPANY BACKGROUND</h4> <p>Sed sagittis nunc vel tellus ultricies auctor. Class aptent taciti sociosqu ad litora torquent per conubia , per inceptos himenaeos. Integer eleifend tellu.</p> <span class="offer-left"><i></i></span> <span class="offer-right"><i></i></span> </div> </div> </div> </div> </div> </div> </div> <div id="menu-3" class="content project-section container"> <div class="projects-header"> <h2 class="animated fadeInRight">Our projects</h2> <p class="animated fadeInLeft">Sed sagittis nunc vel tellus ultricies auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eleifend tellus ut porttitor pharetra.</p> </div> <div class="projects-holder"> <div class="row"> <div class="col-md-4 col-sm-6 p-1 animated umScaleIn"> <div class="project-item"> <img src="img/1.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project One</a></h4> </div> </div> </div> <div class="col-md-4 col-sm-6 p-2 animated umScaleIn"> <div class="project-item"> <img src="img/2.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project Two</a></h4> </div> </div> </div> <div class="col-md-4 col-sm-6 p-3 animated umScaleIn"> <div class="project-item"> <img src="img/3.jpg" alt=""> <div class="overlay"> <h4><a href="#">Project Three</a></h4> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 p-4 animated