131国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip

共46个文件

jpg：21个

js：7个

css：5个

网站模板

前端源码

css样式

js效果

124 浏览量 2023-08-03 11:14:51 上传评论收藏 1.15MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

131国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip （46个子文件）

131

modernizr.custom.79639.js 5KB

responsiveslides.min.js 3KB

jquery.chocolat.js 10KB

easing.js 5KB

jquery-1.11.0.min.js 94KB

move-top.js 1KB

owl.carousel.js 37KB

css

style.css 26KB

owl.carousel.css 8KB

common.css 310B

bootstrap.css 138KB

chocolat.css 2KB

index.html 15KB

images

slide-6.jpg 35KB

n-3.jpg 18KB

n-2.jpg 16KB

slide-3.jpg 28KB

tst-2.jpg 11KB

banner.jpg 163KB

right.gif 67B

t-1.jpg 143KB

logo.png 8KB

slide-1.jpg 27KB

tst-1.jpg 18KB

slide-8.jpg 24KB

t-3.jpg 53KB

left.gif 68B

slide-7.jpg 20KB

slide-4.jpg 28KB

footer-banner.jpg 51KB

slide-5.jpg 19KB

slide-9.jpg 25KB

slide-2.jpg 27KB

n-1.jpg 22KB

s-1.png 81KB

t-2.jpg 122KB

n-4.jpg 28KB

w-1.png 5KB

tst-3.jpg 16KB

top-arrow.png 3KB

nav-icon.png 3KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

<!DOCTYPE html> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Sayohat Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> <link href="css/style.css" rel='stylesheet' type='text/css' /> <script src="js/jquery-1.11.0.min.js"></script> <link href='http://fonts.useso.com/css?family=Dosis:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>  <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); }); }); </script>  </head> <body>  <div class="banner" id="home"> <div class="container"> <div class="header"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt=""></a> </div> <div class="navigation"> <span class="menu"></span> <ul class="navig"> <li><a href="index.html" class="active scroll">Home</a></li> <li><a href="#about" class="scroll">About</a></li> <li><a href="#services" class="scroll">Services</a></li> <li><a href="#news" class="scroll">News</a></li> <li><a href="#testimonials" class="scroll">Testimonials</a></li> <li><a href="#contact" class="scroll">Contact</a></li> </ul> </div> <div class="clearfix"></div> </div> <div class="banner-bottom"> <ul> <li> <div class="travel-one travel"> <h1>JUST A CLICK AWAY</h1> <p>Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio gravida at cursus nec luctus a lorem. </p> <div class="b-btn"> <a href="#">Read More</a> </div> </div> </li> <li> <div class="travel-one travel-two"> <h1>DESTINATION OF YOUR DREAM</h1> <p>Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio gravida at cursus nec luctus a lorem. </p> <div class="b-btn"> <a href="#">Read More</a> </div> </div> </li> <div class="clearfix"></div> </ul> </div> </div> </div>  <script> $("span.menu").click(function(){ $(" ul.navig").slideToggle("slow" , function(){ }); }); </script>    <link href="css/owl.carousel.css" rel="stylesheet"> <script src="js/owl.carousel.js"></script> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 5, lazyLoad : true, autoPlay : true, pagination : false, }); }); </script>   <script src="js/jquery.chocolat.js"></script> <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />  <script type="text/javascript" charset="utf-8"> $(function() { $('#example1 a').Chocolat(); }); </script>  <div class="project"> <div id="example1"> <div id="owl-demo" class="owl-carousel text-center"> <div class="item"> <a href="images/slide-1.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-1.jpg" alt="name"> </a> <div class="project-name"> <p>Nunc felis mauris</p> </div> </div> <div class="item"> <a href="images/slide-2.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-2.jpg" alt="name"> </a> <div class="project-name"> <p>Nunc placerat</p> </div> </div> <div class="item"> <a href="images/slide-3.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-3.jpg" alt="name"> </a> <div class="project-name"> <p>Aenean sit amet</p> </div> </div> <div class="item"> <a href="images/slide-4.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-4.jpg" alt="name"> </a> <div class="project-name"> <p>Nam eu laoreet</p> </div> </div> <div class="item"> <a href="images/slide-5.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-5.jpg" alt="name"> </a> <div class="project-name"> <p>Duis risus ante</p> </div> </div> <div class="item"> <a href="images/slide-8.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-8.jpg" alt="name"> </a> <div class="project-name"> <p> Nunc erat nulla</p> </div> </div> <div class="item"> <a href="images/slide-7.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-7.jpg" alt="name"> </a> <div class="project-name"> <p>Quisque at eros</p> </div> </div> <div class="item"> <a href="images/slide-8.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-8.jpg" alt="name"> </a> <div class="project-name"> <p>Donec in mollis</p> </div> </div> <div class="item"> <a href="images/slide-9.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-9.jpg" alt="name"> </a> <div class="project-name"> <p>Morbi eu augue</p> </div> </div> <div class="item"> <a href="images/slide-8.jpg" title="Home" rel="title1"> <img class="lazyOwl" data-src="images/slide-8.jpg" alt="name"> </a> <div class="project-name"> <p>Nulla risus arcu</p> </div> </div> </div> </div> </div>   <div class="welcome" id="about"> <div class="container"> <div class="welcome-top heading"> <h3>WELCOME</h3> <p>Vivamus nec egestas sem. Duis libero diam, vulputate eget leo sed, pharetra placerat orci. Duis massa turpis, dictum sit amet gravida at, hendrerit a tortor. </p> </div> <div class="welcome-bottom"> <div class="col-md-4 welcome-left"> <span class="ship"></span> <h4>Quisque magna purus</h4> <p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p> </div> <div class="col-md-4 welcome-left"> <span class="air"></span> <h4>Integer quis ante</h4> <p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p> </div> <div class="col-md-4 welcome-left"> <span class="bus"></span> <h4>Mauris eget molestie</h4> <p>Phasellus posuere metus finibus nulla feugiat, at ultricies risus rhoncus. Sed et eros tellus. Aenean finibus sem rutrum.</p> </div> <div class="clearfix"></div> </div

评论收藏

内容反馈