网站模板-智能产品响应式网页模板-适配移动端界面-HTML源码.zip资源-CSDN文库

共55个文件

png：31个

js：10个

css：6个

版权申诉

HTML源码

适配移动端

JavaScript

网站源码

178 浏览量 2024-03-25 08:46:27 上传评论收藏 610KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

网站模板-智能产品响应式网页模板-适配移动端界面-HTML源码.zip （55个子文件）

网站模板-智能产品响应式网页模板-适配移动端界面-HTML源码

html

mobile

css

style.css 8KB

index.html 6KB

images

header-banner.jpg 49KB

Thumbs.db 32KB

02.png 3KB

menu.png 403B

04.png 3KB

01.png 2KB

03.png 2KB

line.png 3KB

men.png 12KB

to-top.png 1KB

rounded-2.png 5KB

rounded.png 5KB

line-1.png 3KB

widows.png 9KB

smartphone

circles.js 7KB

easing.js 5KB

move-top.js 1KB

owl.carousel.js 37KB

jquery.min.js 82KB

css

style.css 11KB

owl.carousel.css 8KB

index.html 11KB

images

header-banner.jpg 49KB

Thumbs.db 24KB

menu.png 403B

line.png 3KB

men.png 25KB

to-top.png 1KB

rounded-2.png 6KB

img-sprite.png 15KB

rounded.png 6KB

line-1.png 3KB

widows.png 20KB

web

circles.js 7KB

easing.js 5KB

move-top.js 1KB

owl.carousel.js 37KB

jquery.min.js 82KB

css

style.css 13KB

owl.carousel.css 8KB

bootstrap.css 118KB

index.html 11KB

images

header-banner.jpg 130KB

menu.png 403B

line.png 3KB

men.png 30KB

to-top.png 1KB

rounded-2.png 6KB

img-sprite.png 11KB

rounded.png 6KB

line-2.png 3KB

line-1.png 3KB

widows.png 74KB

<!DOCTYPE html> <html> <head> <title>SITE NAME Bootstarp Website Template | Home :: w3layouts</title>  <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />   <link rel="stylesheet" href="./css/style.css" type="text/css" media="all" />   <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,400italic,700italic' rel='stylesheet' type='text/css'>   <script src="./js/jquery.min.js"></script>   <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="header"> <div class="higher"> <div class="container"> <div class="header-info"> <div class="logo"> <h1><a href="#"><span>SITE</span>NAME</a></h1> </div> <div class="header-right"> <div class="navigation"> <span class="menu"> </span> <ul> <li><a class="scroll" href="#HOME" title="HOME"><span>HOME</span></a></li> <li><a class="scroll" href="#PRICING " title="PRICING"><span>PRICING </span></a></li> <li><a class="scroll" href="#FAQ" title="FAQ"><span>FAQ</span></a></li> <li><a class="scroll" href="#CONTACT" title="CONTACT"><span>CONTACT</span></a></li> </ul> <div class="clearfix"> </div> </div>  <script> $(document).ready(function(){ $("span.menu").click(function(){ $(".navigation ul").slideToggle(200); }); }); </script>  </div> <div class="clearfix"> </div> </div> </div> </div> <div id="HOME" class="header-down"> <div class="container"> <div class=" col-md-4 vivamus"> <p>Vivamus vestibulum nulla nec ante<br>Integer vitae libero ac</p> <a href="#" class="btn1 btn-1 btn1-1b">READ MORE</a> </div> <div class=" col-md-8 header-web"> <a href="#"><img src="./images/widows.png" class="img-responsive" alt=""/></a> </div> </div> </div> </div>   <div id="PRICING" class="pricing"> <div class="container"> <div class="pricing-info"> <h2>DONEC ODIO</h2> <P>Integer vitae libero ac risus egestas placerat</P> </div> <div class="services-word"> <a href="#"><img src="./images/line.png" class="img-responsive" alt=""/></a> </div> <div class="grids"> <div class="col-md-3 grid"> <span class="icon1"></span> <h2>PRAESENT</h2> <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra .</p> </div> <div class="col-md-3 grid"> <span class="icon2"></span> <h2>VIVAMUS</h2> <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu .</p> </div> <div class="col-md-3 grid"> <span class="icon3"></span> <h2>ALIQUAM</h2> <p>Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida.</p> </div> <div class="col-md-3 grid"> <span class="icon4"></span> <h2>DIGNISSIM</h2> <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod.</p> </div> <div class="clearfix"></div> </div> </div> </div>   <div class="eros"> <div class="container"> <div class="col-md-4 man"> <a href="#"><img src="./images/men.png" class="img-responsive" alt=""/></a> </div> <div class="col-md-8 msg"> <h3>Lorem ipsum dolor sit</h3> <h4>QUISQUE VOLUTPAT MATTIS EROS</h4> <a href="#"><img src="./images/line-1.png" class="img-responsive" alt=""/></a> <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus sectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</p> </div> </div> </div>   <div id="FAQ" class="sracels"> <div class="container"> <div id="canvas"> <div class="row skill-grids text-center"> <div class="col-md-3"> <div class="skill-grid"> <div class="circle" id="circles-1"></div> <h5 class="web"><p>Phasellus ultrices nulla </p></h5> </div> </div> <div class="col-md-3"> <div class="skill-grid"> <div class="circle" id="circles-2"></div> <h5 class="web"><p>Donec conse ctetuer ligu</p></h5> </div> </div> <div class="col-md-3"> <div class="skill-grid"> <div class="circle" id="circles-3"></div> <h5 class="web"><p>Nunc tellus ante lorem</p></h5> </div> </div> <div class="col-md-3"> <div class="skill-grid"> <div class="circle" id="circles-4"></div> <h5 class="web"><p>Donec conse ctetuer ligu<p></h5> </div> </div> <div class="clearfix"> </div> </div> <script type="text/javascript" src="./js/circles.js"></script> <script> var colors = [ ['#F0F0F0', '#0DBAE4'], ['#F0F0F0', '#0DBAE4'], ['#F0F0F0', '#0DBAE4'], ['#0DBAE4', '#0DBAE4'] ]; for (var i = 1; i <= 6; i++) { var child = document.getElementById('circles-' + i), percentage = 50 + (i * 10); Circles.create({ id: child.id, percentage: percentage, radius: 80, width: 5, number: percentage / 10, text: '%', colors: colors[i - 1] }); } </script>  </div> </div> </div> <div class="un-line"> <a href="#"><img src="./images/line-2.png" class="img-responsive" alt=""/></a> </div>   <div id="CONTACT" class="contact-us"> <div class="container"> <div class="contact-intro"> <div class="col-md-6 clients"> <div class="clients-info"> <h4>Our Clients</h4> <h3>TESTIMONIALS</h3> </div> <div class="johey"> <div class="rounded"> <a href="#"><img src="./images/rounded.png" class="img-responsive" alt=""/></a> </div> <div class="lectue"> <h3>Johny Doe</h3> </div> <div class="gallery-cursual">  <link href="./css/owl.carousel.css" rel="stylesheet"> <script src="./js/owl.carousel.js"></script> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 1, lazyLoad : true, autoPlay : true, pagination : true, }); }); </script>   <div id="owl-demo" class="owl-carousel text-center"> <div class="item"> <p>"Sed egestas, ante et vulput

评论收藏

内容反馈

版权申诉