橙黑色响应式单页page专题模板7717_html网站模板_网页源码移动端前端_H5模板

共122个文件

png：55个

jpg：19个

js：18个

58 浏览量 2023-08-06 11:49:41 上传评论收藏 452KB ZIP 举报

该压缩包文件“橙黑色响应式单页page专题模板7717_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip”包含了一个完整的橙黑色调的响应式单页网页模板，适合用于创建具有现代感和专业外观的网页项目。这个模板设计考虑了不同设备的兼容性，确保在桌面、平板和手机等不同屏幕尺寸上都能提供良好的用户体验。 1. **响应式设计**：模板的核心特性是响应式布局，意味着它能够根据用户设备的屏幕大小自动调整其布局和样式。这种设计方法可以保证内容在任何设备上都能清晰、有效地呈现，提高用户的浏览体验。 2. **HTML5**：使用HTML5作为基础结构，意味着模板包含了最新的HTML元素和语义化标记，有助于搜索引擎优化（SEO）并提供更好的多媒体支持，如音频、视频和图像。 3. **CSS3**：通过CSS3，模板实现了丰富的样式效果和动态动画，如渐变、阴影、过渡和动画。CSS3还允许更精确的布局控制，如媒体查询，用于实现响应式设计的关键部分。 4. **JavaScript**：JavaScript可能被用于实现交互功能，如表单验证、滑动效果、菜单展开等。这些动态效果增强了用户与网页的互动性。 5. **单页布局**：单页布局是指所有内容都集中在同一页面上，通过滚动来浏览，通常用于展示项目、作品集或简介类网站。这种设计简化了导航，使得用户能快速获取所需信息。 6. **自适应设计**：自适应设计是响应式设计的一种，模板会根据设备的具体特征进行调整，而不是简单地缩放。这可能包括图片尺寸调整、内容区块重组以及特定设备的优化样式。 7. **yzts_1_argus**：这是压缩包内的一个文件或文件夹，可能是该模板的一部分，可能包含具体的HTML、CSS、JS文件或者其他资源，如图片或字体文件。具体用途需要解压后查看。在实际使用中，开发人员可以修改这些源代码以适应自己的品牌需求，添加或删除功能，或者根据项目需求进行定制。对于不熟悉前端开发的用户，可能需要寻求专业人士的帮助来充分利用这个模板。这个模板提供了一个快速构建专业且具有吸引力的网站的起点，节省了从零开始设计的时间和精力。

资源推荐

资源详情

资源评论

收起资源包目录

橙黑色响应式单页page专题模板7717_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip （122个子文件）

prettyPhoto.css 27KB

style.css 19KB

responsive.css 3KB

argus_grid.css 2KB

clear.css 2KB

loader.gif 7KB

loader.gif 6KB

loader.gif 2KB

default_thumbnail.gif 227B

index.html 37KB

news_2.html 2KB

news_8.html 2KB

news_11.html 2KB

news_5.html 2KB

news_10.html 1KB

news_4.html 1KB

news_9.html 1KB

news_3.html 1KB

news_7.html 1KB

news_1.html 1KB

news_6.html 1KB

news_12.html 1KB

top_image.jpg 19KB

news_post_image_01.jpg 12KB

large_image_05.jpg 11KB

large_image_01.jpg 11KB

large_image_03.jpg 11KB

large_image_06.jpg 11KB

large_image_07.jpg 11KB

large_image_02.jpg 11KB

large_image_04.jpg 11KB

about_image_02.jpg 6KB

about_image_03.jpg 6KB

about_image_01.jpg 6KB

small_image_06.jpg 5KB

small_image_03.jpg 5KB

small_image_05.jpg 5KB

small_image_02.jpg 5KB

small_image_07.jpg 5KB

small_image_04.jpg 5KB

small_image_01.jpg 5KB

jquery-1.8.1.min.js 91KB

jquery.carouFredSel-6.1.0-packed.js 36KB

jquery.prettyPhoto.js 35KB

respond.src.js 9KB

jquery.easing.1.3.js 8KB

jquery.omniwindow.js 6KB

main.js 5KB

jquery.sticky.js 4KB

jquery.touchSwipe.min.js 4KB

portfolio.js 3KB

ajax.js 3KB

popup.js 2KB

jquery.center.js 2KB

small-menu.js 1KB

jquery.mousewheel.min.js 1KB

jquery.dryMenu.js 757B

jquery.myHint.js 661B

jquery.hashtag.js 86B

big.png 47KB

chart.png 41KB

s.png 29KB

sprite.png 7KB

sprite.png 4KB

sprite.png 3KB

home_arrow.png 3KB

contact_dribbble_icon.png 3KB

contact_pinterest_icon.png 2KB

setup.png 2KB

about_arrow_right.png 2KB

contact_twitter_icon.png 2KB

about_arrow_left.png 2KB

close_post.png 2KB

deliver.png 2KB

contact_flickr_icon.png 2KB

clock.png 2KB

contact_facebook_icon.png 2KB

logo.png 2KB

zoom.png 2KB

develop.png 2KB

bulb.png 2KB

default_thumb.png 2KB

video.png 1KB

news_arrow.png 1KB

btnPrevious.png 1KB

btnNext.png 1KB

共 122 条

<!DOCTYPE HTML> <html>  <head> <title>Argus - One Page Responsive Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="Template by Dry Themes" /> <meta name="keywords" content="HTML, CSS, JavaScript, PHP, Minimal Awesomness" /> <meta name="author" content="DryThemes" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="favicon.png"/> <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="css/clear.css" /> <link type="text/css" rel="stylesheet" href="css/prettyPhoto.css" /> <link type="text/css" rel="stylesheet" href="css/argus_grid.css" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/responsive.css" /> <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="js/jquery.sticky.js"></script> <script type="text/javascript" src="js/jquery.hashtag.js"></script> <script type="text/javascript" src="js/jquery.dryMenu.js"></script> <script type="text/javascript" src="js/small-menu.js"></script> <script type="text/javascript" src="js/jquery.carouFredSel-6.1.0-packed.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="js/jquery.myHint.js"></script> <script type="text/javascript" src="js/jquery.omniwindow.js"></script> <script type="text/javascript" src="js/jquery.center.js"></script> <script type="text/javascript" src="js/popup.js"></script> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript" src="js/portfolio.js"></script> <script type="text/javascript" src="js/main.js"></script>  </head> <body onLoad="initialize()"> <table class="doc-loader"> <tr> <td> <img src="images/loader.gif" alt="Loading..." /> </td> </tr> </table> <div class="section home" id="home"> <div class="container"> <div class="column-510 m-top-260"> <div class="list_carousel left"> <ul id="home-slides"> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> </li> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> </li> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> </li> </ul> </div> <a id="home-next" href="#"></a> </div> <div class="clear"></div> </div> </div> <div class="section services" id="services"> <div id="main-menu"> <div class="menu-wrapper"> <nav> <div class="logo"></div> <aside class="right"> <ul> <li class="active first"><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#news">News</a></li> <li><a href="#milestones">Milestones</a></li> <li class="last"><a href="#contact">Contact</a></li> </ul> </aside> </nav> </div> </div> <div class="container"> <div class="one-third m-top-45"> <div class="summary-white-bg"> we provide awesome digital <span>services</span>. </div> </div> <div class="clear"></div> <div class="summary-small-white-bg m-top-50 m-bottom-45"> we are a full service digital agency from Earth. We design and build <span>websites, applications, mobile solutions</span> and other awesome digital media. </div> <div class="clear"></div> <div class="two-third m-bottom-40"> <p> Nullam dictum felis eu pede mollis pretium. Cras dapibus. Vivamus elementum se semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae seasne eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, telus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </p> </div> <div class="one-third m-bottom-40 last"> <p> Aenenan massa. Cum sociis natoque perse penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu. </p> </div> <div class="clear"></div> <div class="column-560"> <ul class="services-list"> <li> <div class="services-wrapper"> <img src="images/bulb.png" alt="image_bulb" /> <span class="service-title m-bottom-10">brainstorming</span> <div class="services-role m-bottom-20">idea.</div> <div class="services-line"></div> </div> <div class="services-content"> Donec quam fellis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, frin gilla vel, aliquet nec. </div> </li> <li> <div class="services-wrapper"> <img src="images/setup.png" alt="image_setup" /> <span class="service-title m-bottom-10">design</span> <div class="services-role m-bottom-20">create.</div> <div class="services-line"></div> </div> <div class="services-content"> Lorem quam fellis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, frin gilla vel, aliquet nec. </div> </li> <li> <div class="services-wrapper"> <img src="images/develop.png" alt="image_develop" /> <span class="service-title m-bottom-10">coding</span> <div class="services-role m-bottom-20">develop.</div> <div class="services-line"></div> </div> <div class="services-content"> Justo quam fellis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, frin gilla vel, aliquet nec. </div> </li> <li> <div class="services-wrapper"> <img src="images/deliver.png" alt="image_deliver" /> <span class="service-title m-bottom-10">customer</span> <div class="services-role m-bottom-20">deliver.</div> <div class="services-line"></div> </div> <div class="services-content"> Nulla quam fellis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, frin gilla vel, aliquet nec. </div> </li> </ul> </div> <div class="column-340 last"> <div class="list_carousel"> <ul id="testimonials-slides"> <li> <div> Aenean massa. Cut sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa. </div> <div class="testimonials-signature">— John Doe</div> </li> <li> <div> Nullam dictum felis eu pede mollis pretium. Cras dapibus. Vivamus elementum se semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae seasne eleifend ac, enim. </div> <div class="testimonials-signature">— John Smith</div>

评论收藏

内容反馈