纹理大气背景产品服务responsive模板_响应式_html网站模板_网页源码移动端前端_H5模板

共225个文件

png：153个

jpg：34个

js：21个

25 浏览量 2023-08-05 10:52:21 上传评论收藏 4.24MB RAR 举报

该压缩包文件包含的是一款纹理大气背景的产品服务响应式HTML网站模板，专为构建现代、专业且具有吸引力的在线展示平台而设计。这款模板适用于各种企业和个人，包括但不限于商业服务、科技公司、互联网项目以及创意作品展示。其核心特点在于响应式设计，能够自适应不同设备，无论是桌面电脑、平板还是手机，都能提供一致的优质浏览体验。 1. **响应式设计**：响应式设计是现代网页开发的关键元素，它允许网页根据用户设备的屏幕尺寸和方向自动调整布局。此模板采用媒体查询（Media Queries）和流式布局（Fluid Grids）等技术，确保在不同设备上都能保持良好的视觉效果和用户体验。 2. **HTML5与CSS3**：模板基于HTML5和CSS3标准，这两种技术提供了更丰富的网页结构和样式控制，支持音频、视频、离线存储等新特性，并提高了网页的性能和可访问性。 3. **JavaScript**：模板可能包含了JavaScript代码，用于实现交互效果，如滑动、滚动动画、导航菜单的动态效果等，增强了用户交互体验。 4. **纹理背景**：背景设计采用了独特的纹理元素，可以增加网站的视觉深度和艺术感，同时也能强化品牌形象或展示特定主题。 5. **单页设计**：此模板可能是单页布局，所有内容都集中在一个页面上，通过滚动操作浏览，简化了导航，适合简洁明快地呈现信息。 6. **跳转与案例展示**：模板可能包含多种跳转功能，如内部链接和锚点，方便用户快速访问不同部分。同时，专门的案例或作品展示区域可以有效展示公司的服务、项目或成功案例。 7. **科技与互联网风格**：设计可能融入了科技和互联网的元素，适合科技公司或者与数字创新相关的业务，呈现出专业和现代的形象。 8. **移动优先**：在设计时，通常会遵循移动优先的原则，先为小屏幕设备设计，然后逐步扩展到大屏幕，确保在任何设备上都能提供优质体验。 9. **自适应源码**：源码经过优化，能够根据设备条件自动调整，确保在不同环境下的兼容性和稳定性。 10. **H5模板**：这里的“H5”指的是HTML5，意味着模板利用了HTML5的新特性，提供更加动态和互动的网页内容。这款模板的使用可以帮助快速搭建专业、现代的网站，无需从零开始设计，大大节省时间和成本。对于非开发人员，也可以通过简单的编辑和定制来适应特定的品牌和需求。

资源推荐

资源详情

资源评论

收起资源包目录

纹理大气背景产品服务responsive模板_响应式_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar （225个子文件）

foundation.css 101KB

style.css 82KB

prettyPhoto.css 19KB

normalize.css 7KB

supersized.shutter.css 5KB

supersized.css 2KB

portfolio.css 1KB

loader.gif 26KB

loader.gif 6KB

progress.gif 3KB

loader.gif 2KB

default_thumbnail.gif 227B

index.html 91KB

favicon.ico 318B

1.jpg 396KB

1.jpg 342KB

3.jpg 271KB

5.jpg 259KB

4.jpg 249KB

2.jpg 233KB

3.jpg 229KB

6.jpg 152KB

2.jpg 125KB

1.jpg 80KB

1.jpg 65KB

4.jpg 63KB

6.jpg 58KB

2.jpg 50KB

5.jpg 45KB

3.jpg 42KB

5.jpg 39KB

6.jpg 35KB

4.jpg 33KB

2.jpg 30KB

3.jpg 28KB

1.jpg 22KB

san-francisco.jpg 11KB

new-york.jpg 9KB

los-angeles.jpg 9KB

twitter.jpg 1KB

facebook.jpg 1011B

bullets.jpg 658B

foundation.min.js 155KB

jquery.js 94KB

raphael.js 59KB

jquery.prettyPhoto.js 22KB

supersized.3.2.7.min.js 17KB

jquery.foundation.orbit.js 16KB

modernizr.foundation.js 9KB

supersized.shutter.min.js 7KB

jquery.easing.min.js 7KB

jquery.quicksand.js 6KB

jquery.foundation.tooltips.js 4KB

jquery.foundation.reveal.js 3KB

twitter.js 2KB

jquery.fitvids.js 2KB

app.js 2KB

init.js 1KB

jquery.foundation.tabs.js 882B

custom.js 819B

jquery-css-transform.js 811B

jquery.parallax-1.1.3.js 609B

portfolio.js 466B

1.png 262KB

team-3.png 87KB

team-2.png 86KB

team-4.png 86KB

team-1.png 81KB

services-banner.png 75KB

groovepaper.png 40KB

triangle-bottom.png 11KB

triangle-bottom-760.png 8KB

sprite.png 7KB

triangle-top-760.png 6KB

triangle-top.png 5KB

sprite.png 4KB

sprite.png 3KB

3.png 3KB

1.png 3KB

right-arrow.png 3KB

right-arrow-small.png 3KB

left-arrow-small.png 3KB

2.png 3KB

appbar.cogs.png 3KB

responsive-nav-bg.png 3KB

pattern-1.png 3KB

back.png 3KB

forward.png 3KB

共 225 条

<!DOCTYPE html>   <html class="no-js" lang="en"> <head> <meta charset="utf-8" />  <title>Dreamer - Responsive One Page Parallax Template</title> <meta name="description" content="Dreamer - Responsive One Page Parallax Template">  <meta name="viewport" content="width=device-width" /> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"/> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="shortcut icon" href="favicon.ico" />  <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>  <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="stylesheets/portfolio.css"> <link rel="stylesheet" href="stylesheets/foundation.css"> <link rel="stylesheet" href="stylesheets/normalize.css"> <link rel="stylesheet" href="stylesheets/supersized.css" type="text/css" media="screen" /> <link rel="stylesheet" href="stylesheets/supersized.shutter.css" type="text/css" media="screen" /> <link rel="stylesheet" href="stylesheets/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" />  <link href='http://222.178.203.72:19005/whst/63/_enmsrzfnnfkdZohrzbnl//css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <link href='http://222.178.203.72:19005/whst/63/_enmsrzfnnfkdZohrzbnl//css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext' rel='stylesheet' type='text/css'> <link href='http://222.178.203.72:19005/whst/63/_enmsrzfnnfkdZohrzbnl//css?family=Gentium+Book+Basic:400,400italic,700,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <link href='http://222.178.203.72:19005/whst/63/_enmsrzfnnfkdZohrzbnl//css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>  <script src="javascripts/modernizr.foundation.js"></script> <script src="javascripts/jquery.js"></script> <script src="javascripts/custom.js"></script> <script src="javascripts/twitter.js"></script> <script src="javascripts/raphael.js" type="text/javascript"></script> <script src="javascripts/init.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.parallax-one').css("margin-top", $(window).height()); $("a[rel^='prettyPhoto']").prettyPhoto(); var windowsize = $(window).width(); $(window).resize(function() { var windowsize = $(window).width(); }); if (windowsize > 1024) { //if the window is greater than 1024px wide then load one orbit settings //.parallax(xPosition, speedFactor, outerHeight) options: //xPosition - Horizontal position of the element //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport $('.parallax-one').parallax("50%", 0.5); $('.parallax-two').parallax("50%", 0.5); $('.parallax-three').parallax("50%", 0.5); $('.parallax-four').parallax("50%", 0.5); $('.parallax-five').parallax("50%", 0.5); $('.parallax-six').parallax("50%", 0.5); } //if submit button is clicked $('#submit').click(function () { //Get the data from all the fields var name = $('input[name=name]'); var email = $('input[name=email]'); var phonenumber = $('input[name=phonenumber]'); var website = $('input[name=website]'); var projectbudget = $('input[name=projectbudget]'); var timeframe = $('input[name=timeframe]'); var youreinterestedin = $('input[name=youreinterestedin]'); var howdidyouhearaboutus = $('input[name=howdidyouhearaboutus]'); var comment = $('textarea[name=comment]'); //Simple validation to make sure user entered something //If error found, add hightlight class to the text field if (name.val()=='') { name.addClass('hightlight'); return false; } else name.removeClass('hightlight'); if (email.val()=='') { email.addClass('hightlight'); return false; } else email.removeClass('hightlight'); if (comment.val()=='') { comment.addClass('hightlight-message'); return false; } else comment.removeClass('hightlight-message'); //organize the data properly var data = 'name=' + name.val() + '&email=' + email.val() + '&phonenumber=' + phonenumber.val() + '&website=' + website.val() + '&projectbudget=' + projectbudget.val() + '&timeframe=' + timeframe.val() + '&youreinterestedin=' + youreinterestedin.val() + '&howdidyouhearaboutus=' + howdidyouhearaboutus.val() + '&comment=' + encodeURIComponent(comment.val()); //disabled all the text fields $('.text').attr('disabled','true'); //show the loading sign document.getElementById("submit").disabled=true; document.getElementById("submit").value='Please Wait..'; //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "contact-form.php", //GET method is used type: "GET", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form $('.contact-form-div').fadeOut('slow'); //show the success message $('.done').fadeIn('slow'); //if process.php returned 0/false (send mail failed) } else alert('Sorry, unexpected error. Please try again later.'); } }); //cancel the submit button default behaviours return false; }); }) </script>  <script type="text/javascript"> $(window).load(function() { $("#loading").fadeOut("1000", function() { // Animation complete $('#loading img').css("display","none"); $('#loading').css("display","none"); $('#loading').css("background","none"); $('#loading').css("width","0"); $('#loading').css("height","0"); }); }); </script> </head> <body>  <div id="loading"> <img src="images/loader.gif" alt="Website Loader"/> </div>  <div class="slideshow-pattern"></div> <div class="slideshow-overlay"></div> <div class="triangle-top"></div> <div c

评论收藏

内容反馈