响应式彩色清晰_HTML手机电脑网站_网页源码移动端前端js效果_H5模板

共64个文件

jpg：15个

png：14个

js：13个

网页模板

前端源码

140 浏览量 2023-08-03 11:23:18 上传评论收藏 822KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

响应式彩色清晰_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip （64个子文件）

响应式彩色清晰

index-1.html 7KB

PIE.htc 40KB

TMForm.js 31KB

jquery.flexslider-min.js 16KB

kwiks.js 5KB

html5shiv.js 2KB

superfish.js 7KB

owl.carousel.js 28KB

jquery.mobilemenu.js 5KB

jquery.easing.1.3.js 8KB

jquery.equalheights.js 1KB

jquery.js 91KB

jquery-migrate-1.1.1.js 17KB

jquery.ui.totop.js 2KB

script.js 1KB

bat

index-3.html 7KB

css

style.css 15KB

superfish.css 4KB

skeleton.css 9KB

owl.carousel.css 2KB

font-awesome.css 21KB

reset.css 771B

slider.css 3KB

form.css 4KB

ie.css 346B

index-4.html 7KB

index-2.html 8KB

index.html 10KB

images

page3_img3.jpg 46KB

magnify.png 3KB

page1_img1.jpg 66KB

cal_icon.png 1KB

totop.png 7KB

page4_img1.jpg 47KB

page1_img4.jpg 18KB

page1_img8.jpg 18KB

memb_icon.png 1KB

page3_img1.jpg 36KB

logo.png 4KB

page1_img3.jpg 52KB

last.png 2KB

page3_img4.jpg 8KB

marker1.png 1KB

arrows.png 3KB

camera-loader.gif 9KB

comment_icon.png 1KB

page1_img2.jpg 42KB

page1_img5.jpg 19KB

arrowws.png 2KB

page3_img6.jpg 8KB

page1_img7.jpg 20KB

marker.png 1KB

user_icon.png 1KB

page3_img2.jpg 25KB

preloader.gif 9KB

bg_body.png 10KB

page3_img5.jpg 7KB

prevnext.png 4KB

page1_img6.jpg 19KB

fonts

FontAwesome.otf 61KB

fontawesome-webfont.eot 37KB

fontawesome-webfont.woff 43KB

fontawesome-webfont.svg 197KB

fontawesome-webfont.ttf 79KB

<!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta charset="utf-8"> <meta name = "format-detection" content = "telephone=no" /> <link rel="icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/slider.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.1.1.js"></script> <script src="js/script.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.equalheights.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/owl.carousel.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script src="js/kwiks.js"></script> <script> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutQuart' }); var owl = $("#owl"); owl.owlCarousel({ items : 4, //10 items above 1000px browser width itemsDesktop : [995,3], //5 items between 1000px and 901px itemsDesktopSmall : [767, 2], // betweem 900px and 601px itemsTablet: [700, 2], //2 items between 600 and 0 itemsMobile : [479, 1], // itemsMobile disabled - inherit from itemsTablet option navigation : true, }); }) var Main = Main || {}; jQuery(window).load(function() { window.responsiveFlag = jQuery('#responsiveFlag').css('display'); Main.gallery = new Gallery(); jQuery(window).resize(function() { Main.gallery.update(); }); }); function Gallery(){ var self = this, container = jQuery('.flexslider'), clone = container.clone( false ); this.init = function (){ if( responsiveFlag == 'block' ){ var slides = container.find('.slides'); slides.kwicks({ max : 500, spacing : 0 }).find('li > a').click(function (){ return false; }); } else { container.flexslider(); } } this.update = function () { var currentState = jQuery('#responsiveFlag').css('display'); if(responsiveFlag != currentState) { responsiveFlag = currentState; container.replaceWith(clone); container = clone; clone = container.clone( false ); this.init(); } } this.init(); } </script>   </head> <body class="page1" id="top">  <header> <div class="clear"></div> <div class="container_12"> <div class="grid_12"> <h1> <a href="index.html"> <img src="images/logo.png" alt="Your Happy Family"> </a> </h1> <div class="menu_block"> <nav class="horizontal-nav full-width horizontalNav-notprocessed"> <ul class="sf-menu"> <li class="current"><a href="index.html">Home</a> <ul> <li><a href="#">history</a></li> <li><a href="#">offers</a></li> <li><a href="#">news</a> <ul> <li><a href="#">fresh </a></li> <li><a href="#">archive</a></li> </ul> </ul> </li> <li><a href="index-1.html">Videos </a></li> <li><a href="index-2.html">Campaigns</a></li> <li><a href="index-3.html">Volunteer </a></li> <li><a href="index-4.html">Contacts</a></li> </ul> </nav> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> </header> <div class="main">  <div class="content"><div class="ic">More Website Templates @ TemplateMonster.com - December 16, 2013!</div> <div class="container_12"> <div class="grid_8"> <div class="flexslider"> <ul class="slides"> <li> <img src="images/page1_img1.jpg" alt=""> <div class="flex-caption"> <p>Hope</p> </div> </li> <li> <img src="images/page1_img2.jpg" alt=""> <div class="flex-caption c2"> <p>Save</p> </div> </li> <li> <img src="images/page1_img3.jpg" alt=""> <div class="flex-caption"> <p>Help</p> </div> </li> </ul> </div> <span id="responsiveFlag"></span> </div> <div class="grid_4"> <a href="#" class="donate">Donate</a> <div class="text1">We can change the life of those who have no hope</div> <p>Etiam dui eros, laoreet sit amet est vel,modo venenatis eros. Fusce adipiscing quam id riss sagittis, non consequat lacus interdum. Proin tincidunt nulla, eu sodales arcu.</p> Quisquerra nulla nunc, eu ultrices libero ultricies eget. Phasellus accumsan justo vitae feugiat placerat. Praesent vel ultrices velit. Suspendisse risus justo, lacinia vitae eleifend </div> <div class="clear"></div> <div class="grid_3"> <div class="block2 maxheight"> <div class="title">our Mission</div> <div class="pad"> Faert sit amet est l,mmodo venenatis eros. Kusce ng quam id risus sagittisnel consequat lacusut tinn sodales arcuisqum.<div class="alright"><a href="#" class="btn">Read More</a></div> </div> </div> </div> <div class="grid_3"> <div class="block2 maxheight"> <div class="title">Latest Projects</div> <div class="pad"> Keet sit amet est el,mmodo venenatis eros. Fusce ng quam id risus sagittisnel consequat lacusut tinn sodales arcuisque.<div class="alright"><a href="#" class="btn">Read More</a></div> </div> </div> </div> <div class="grid_3"> <div class="block2 maxheight"> <div class="title">publications</div> <div class="pad"> Boetosit amet est el,mmodo venenatis eros. Musce ng quam id risus sagittisnel monsequat lacusut tinn sodales arcuisqut <div class="alright"><a href="#" class="btn">Read More</a></div> </div> </div> </div> <div class="grid_3"> <div class="block2 maxheight"> <div class="title">Participate</div> <div class="pad">Holot sit amet est el,mmodo venenatis eros. Jolosceng huam id risus sagittisnel consequat lacusut tinn sodales arcuisqmol.<div class="alright"><a href="#" class="btn">Read More</a></div></div> </div> </div> <div class="clear"></div> <div class="grid_12"> <h2>You can help Them</h2> <div id="owl"> <div class="item"> <a href="#"><img src="images/page1_img4.jpg" alt="">Jim <br> 8 years</a> </div> <div class="item it1"> <a href="#"><img src="images/page1_img5.jpg" alt="">Ann <br> 3 years</a> </div> <div class="item it2"> <a href="#"><img src="images/page1_img6.jpg" alt="">Linda <br> 5 years</a> </div> <div class="item it3"> <a href="#"><img src="images/page1_img7.jpg" alt="">Mark <br> 6 years</a> </div> <div class="item"> <a href="#"><img src="imag

评论收藏

内容反馈