【免费】非响应式黑红大气企业站_HTML手机电脑网站_网页源码移动端前端js效果_H5模板

共127个文件

png：43个

jpg：41个

html：11个

需积分: 0 92 浏览量更新于2023-08-03 收藏 715KB ZIP 举报

该压缩包文件“非响应式黑红大气企业站_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip”包含了一套完整的非响应式网页设计资源，专为创建大气、专业的企业网站而设计。这个资源集包括HTML文件、CSS样式表以及JavaScript代码，用于实现手机和电脑端的网页展示效果。让我们深入探讨其中涉及的几个关键知识点： 1. **非响应式设计**：与响应式设计不同，非响应式设计不根据用户设备的屏幕尺寸自动调整布局。这意味着这个模板可能更适合在固定屏幕尺寸的设备上展示，如桌面电脑，可能需要手动优化以适应移动设备。 2. **HTML**（HyperText Markup Language）：这是网页内容的基础结构语言，用于定义页面上的各个元素，如标题、段落、链接等。在这个模板中，HTML文件将包含所有网页的布局和内容信息。 3. **CSS**（Cascading Style Sheets）：CSS用于控制网页的外观和布局，包括颜色、字体、布局和响应式设计。在这个模板中，自适应CSS源码将帮助实现不同设备上的视觉一致性，尽管它是非响应式的，但可能包含了针对不同屏幕尺寸的一些优化。 4. **JavaScript**：这是一种客户端脚本语言，常用于增强网页的交互性和动态功能，如动画、表单验证和实时更新内容。在这个压缩包中，JavaScript效果可能包括滑动菜单、轮播图、按钮点击效果等，这些可以提升用户体验。 5. **H5模板**：这里的“H5”通常指的是HTML5，新一代的HTML标准，它引入了更多的语义标签、媒体支持和离线存储等功能。这个模板是基于HTML5构建的，意味着它可以利用这些新特性来提供更现代、功能丰富的网站。 6. **UI组件**：用户界面（UI）组件是指预设的可复用设计元素，如按钮、表单、导航条等。这些组件可以加速开发过程，确保界面的一致性，并提供一致的用户体验。 7. **移动端优化**：尽管这个模板是非响应式的，但考虑到移动端的用户，可能在HTML、CSS和JavaScript中包含了针对手机和平板的优化措施，如媒体查询，以确保在较小屏幕上仍能良好显示。为了充分利用这些资源，开发者或设计师需要熟悉HTML、CSS和JavaScript的基本知识，以便定制和整合到自己的项目中。对于希望创建具有专业外观且不依赖响应式布局的企业网站来说，这是一个理想的起点。同时，对于那些想要学习网页设计的人来说，这套模板也是一个很好的学习材料，可以从中了解网页开发的流程和技术。

收起资源包目录

非响应式黑红大气企业站_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip （127个子文件）

style.css 23KB

prettyPhoto.css 18KB

inner.css 7KB

reset.css 1KB

Thumbs.db 8KB

Thumbs.db 7KB

Thumbs.db 6KB

loader.gif 2KB

avatar.gif 563B

bg-outerheader.gif 243B

default_thumbnail.gif 227B

tab.gif 227B

bg-outerfootersidebar.gif 214B

bg-outerafterheader.gif 77B

bg-linesubmenu.gif 50B

list.gif 49B

bg-sepmenu.gif 43B

element.html 31KB

portfolio.html 18KB

blog.html 18KB

single.html 18KB

index-2.html 17KB

index.html 17KB

about.html 16KB

portfolio2.html 16KB

service.html 15KB

contact.html 14KB

archive.html 13KB

favicon.ico 7KB

bg-outerslider.jpg 23KB

post-single.jpg 22KB

post4.jpg 21KB

pf2_3.jpg 18KB

slide3.jpg 18KB

pic2.jpg 18KB

pic1.jpg 17KB

post5.jpg 14KB

pf4_7.jpg 14KB

slide1.jpg 13KB

bg-outerbeforecontentinner.jpg 13KB

slide2.jpg 13KB

pf2_1.jpg 13KB

pf4_1.jpg 12KB

post1.jpg 12KB

pf4_8.jpg 11KB

pf2_4.jpg 11KB

pf2_2.jpg 10KB

post3.jpg 10KB

pf4_3.jpg 9KB

pf4_11.jpg 9KB

pf2_7.jpg 8KB

pf2_8.jpg 7KB

post2.jpg 7KB

pf4_5.jpg 7KB

pf2_6.jpg 7KB

pf4_9.jpg 6KB

pf4_6.jpg 6KB

pf2_5.jpg 6KB

pf4_10.jpg 6KB

pf4_2.jpg 6KB

ads2.jpg 5KB

pf4_4.jpg 5KB

pf4_12.jpg 5KB

s1.jpg 5KB

ads4.jpg 4KB

ads3.jpg 4KB

ads1.jpg 4KB

thumb2.jpg 2KB

people.jpg 2KB

thumb1.jpg 1KB

jquery-1.6.4.min.js 90KB

jquery.cycle.all.js 51KB

jquery.prettyPhoto.js 24KB

superfish.js 4KB

supersubs.js 3KB

hoverIntent.js 3KB

html5.js 2KB

contact.js 2KB

fade.js 384B

bg-slide.png 10KB

icon1.png 7KB

icon3.png 7KB

bg-footersidebarcontainer.png 7KB

icon2.png 4KB

sprite.png 4KB

logo.png 4KB

bg-afterheader.png 2KB

linkedin.png 868B

btnNext.png 845B

btnPrevious.png 828B

flickr.png 778B

bg-buttonright.png 727B

youtube.png 724B

twitter.png 710B

hover-zoom.png 701B

lastfm-small.png 691B

date.png 656B

google-small.png 653B

dribble-small.png 620B

共 127 条

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" href="images/favicon.ico" /> <meta charset="utf-8" /> <title>Artefak</title> <link href="styles/reset.css" type="text/css" rel="stylesheet" /> <link href="styles/style.css" type="text/css" rel="stylesheet" /> <link href="styles/inner.css" rel="stylesheet" type="text/css" />     <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript" src="js/supersubs.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ //=================================== MAIN MENU ===================================// jQuery("ul.sf-menu").supersubs({ minWidth : 12, // requires em unit. maxWidth : 14, // requires em unit. extraWidth : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values // due to slight rounding differences and font-family }).superfish(); // call supersubs first, then superfish, so that subs are // not display:none when measuring. Call before initialising // containing tabs for same reason. //=================================== TABS AND TOGGLE ===================================// //jQuery tab jQuery(".tab-content").hide(); //Hide all content jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab jQuery(".tab-content:first").show(); //Show first tab content //On Click Event jQuery("ul.tabs li").click(function() { jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class jQuery(this).addClass("active"); //Add "active" class to selected tab jQuery(".tab-content").hide(); //Hide all tab content var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content jQuery(activeTab).fadeIn(200); //Fade in the active content return false; }); //jQuery toggle jQuery(".toggle_container").hide(); jQuery("h2.trigger").click(function(){ jQuery(this).toggleClass("active").next().slideToggle("slow"); }); }); </script> </head> <body> <div id="bodychild"> <div id="outercontainer">  <div id="outerheader"> <header id="top"> <div id="logo"><a href="index-2.html"><img src="images/logo.png" alt=""></a></div> <section id="navigation"> <nav> <ul id="topnav" class="sf-menu"> <li><a href="index-2.html">Home</a></li> <li class="current"><a href="about.html">About</a> <ul> <li><a href="about.html">About Page</a></li> <li><a href="portfolio2.html">Portfolio Alternate</a></li> <li><a href="element.html">Element</a></li> <li><a href="single.html">Blog Detail</a></li> <li><a href="archive.html">Archives</a></li> </ul> </li> <li><a href="service.html">Services</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <div class="clear"></div> </section> <div class="clear"></div> </header> </div>   <div id="outerafterheader"> <div id="afterheader"> <section id="aftertheheader"> âThis can be your tagline or something you want...â? </section> </div> </div>   <div id="outerbeforecontent" class="inner"> <div id="beforecontent"> <section id="beforethecontent"> <h1 class="pagetitle">Element <span class="colortext">Typography.</span></h1> <div class="pagedesc">Fusce at sapien sit amet mauris auctor ultricies nec et dui. Donec fermentum viverra tincidunt. Sed ut posuere enim. Suspendisse lacus urna, ultrices quis dapibus adipiscing, mattis sed velit. Nunc volutpat dapibus eros at vulputate. Praesent eleifend tincidunt pellentesque.</div> </section> </div> </div>   <div id="outermain"> <section id="maincontent"> <div class="one_half firstcols"> <h4>Images in Paragraph</h4> <p><img src="images/content/s1.jpg" class="alignleft" alt="" />Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt.</p> <p>Morbi a eros sed nisi laoreet.Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt.Morbi a eros sed nisi laoreet molestie. Sed placerat libero quis metus malesuada venenatis. Proin vulputate, ligula id pellentesque laoreet, arcu odio tincidunt nunc, in dictum leo dui sed sapien. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. </p> <p>Nulla facilisi. Duis condimentum molestie lacus ac tincidunt. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> </div> <div class="one_half lastcols"> <h4>Tables</h4> <table> <tbody> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr class="even"> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr class="even"> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr>