模板描述：蓝色 宽屏样式 物流运输。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果，鼠标移动上之后，停止移动和滚动效果。适用物流运输等行业。同时兼容手机端和电脑网页端。
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">
2. 引入JS
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="js/custom.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="js/custom.js"></script>
3. HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>ogistic</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<!-- style css -->
<!-- Responsive-->
<!-- fevicon -->
<link rel="icon" href="images/fevicon.png" type="image/gif" />
<!-- Scrollbar Custom CSS -->
<!-- Tweaks for older IEs-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout">
<!-- loader -->
<div class="loader_bg">
<div class="loader"><img src="images/loading.gif" alt="#" /></div>
</div>
<!-- end loader -->
<div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home </a>
<a href="#about">About</a>
<a href="#service">Services </a>
<a href="#vehicles">Our Vehicles</a>
<a href="#testimonial">Testimonial</a>
<a href="#contact">Contact</a>
</div>
<!-- header -->
<header>
<!-- header inner -->
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="#" /></a>
</div>
</div>
<div class="col-md-8 col-sm-8">
<div class="right_bottun">
<ul class="conat_info d_none ">
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
<button class="openbtn" onclick="openNav()"><img src="images/menu_icon.png" alt="#"/> </button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- end header inner -->
<!-- end header -->
<!-- banner -->
<section class="banner_main">
<div id="banner1" class="carousel slide banner_slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#banner1" data-slide-to="0" class="active"></li>
<li data-target="#banner1" data-slide-to="1"></li>
<li data-target="#banner1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container-fluid">
<div class="carousel-caption">
<div class="row">
<div class="col-md-7 col-lg-5">
<div class="text-bg">
<h1>Best Logistic Company</h1>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has i</span>
<a class="read_more" href="#">Contact Us</a>
</div>
</div>
<div class="col-md-12 col-lg-7">
<div class="row">
<div class="col-md-6">
<div class="ban_track">
<figure><img src="images/track.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<form class="transfot">
<div class="col-md-12">
<span>Professional Services</span>
<h3>Get your transport quote</h3>
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Location" type="text" name="Location">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="To destination" type="text" name="To destination">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Email" type="text" name="Email">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Contact Number" type="text" name="Contact Number">
</div>
<div class="col-md-12">
<button class="get_now">Get Now quote</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid">
<div class="carousel-caption">
<div class="row">
<div class="col-md-7 col-lg-5">
<div class="text-bg">
<h1>Best Logistic Company</h1>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has i</span>
<a class="read_more" href="#">Contact Us</a>
</div>
</div>
<div class="col-md-12 col-lg-7">
<div class="row">
<div class="col-md-6">
<div class="ban_track">
<figure><img src="images/track.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<form class="transfot">
<div class="col-md-12">
<span>Professional Services</span>
<h3>Get your transport quote</h3>
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Location" type="text" name="Location">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="To destination" type="text" name="To destination">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Email" type="text" name="Email">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Contact Number" type="text" name="Contact Number">
</div>
<div class="col-md-12">
<button class="get_now">Get Now quote</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid">
<div class="carousel-caption">
<div class="row">
<div class="col-md-7 col-lg-5">
<div class="text-bg">
<h1>Best Logistic Company</h1>
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has i</span>
<a class="read_more" href="#">Contact Us</a>
</div>
</div>
<div class="col-md-12 col-lg-7">
<div class="row">
<div class="col-md-6">
<div class="ban_track">
<figure><img src="images/track.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<form class="transfot">
<div class="col-md-12">
<span>Professional Services</span>
<h3>Get your transport quote</h3>
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Location" type="text" name="Location">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="To destination" type="text" name="To destination">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Email" type="text" name="Email">
</div>
<div class="col-md-12">
<input class="transfot_form" placeholder="Contact Number" type="text" name="Contact Number">
</div>
<div class="col-md-12">
<button class="get_now">Get Now quote</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#banner1" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<a class="carousel-control-next" href="#banner1" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</section>
<!-- end banner -->
<!-- about section -->
<div id="about" class="about ">
<div class="container">
<div class="row d_flex">
<div class="col-md-6">
<div class="about_right">
<figure><img src="images/about.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-6">
<div class="titlepage">
<h2>About Us</h2>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, There
</p>
<a class="read_more" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- about section -->
<!-- service section -->
<div id="service" class="service">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="titlepage">
<h2>Our Services</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, There </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="service_main">
<div class="service_box blu_colo">
<i><img src="images/ser1.png" alt="#"/></i>
<h4>FLY ANYWHERE</h4>
</div>
<div class="service_box yelldark_colo">
<i><img src="images/ser2.png" alt="#"/></i>
<h4>Cargo service</h4>
</div>
<div class="service_box yell_colo">
<i><img src="images/ser3.png" alt="#"/></i>
<h4> COURIER SERVICES</h4>
</div>
<div class="service_box yelldark_colo">
<i><img src="images/ser4.png" alt="#"/></i>
<h4>BOX STORAGE</h4>
</div>
<div class="service_box yell_colo">
<i><img src="images/ser5.png" alt="#"/></i>
<h4>100% safe</h4>
</div>
</div>
</div>
<div class="col-md-12">
<a class="read_more" href="#">Read More</a>
</div>
</div>
</div>
</div>
<!-- end service section -->
<!-- vehicles section -->
<section id="vehicles" class="vehicles">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Our Vehicles</h2>
<p>nternet. It uses a dictionary of over 200 Latin words, combined with .</p>
</div>
</div>
</div>
</div>
<div id="veh" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#veh" data-slide-to="0" class="active"></li>
<li data-target="#veh" data-slide-to="1"></li>
<li data-target="#veh" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc1.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc2.png" alt="#"/></figure>
</div>
<h3 class="blac_co">Truck</h3>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc3.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc1.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc2.png" alt="#"/></figure>
</div>
<h3 class="blac_co">Truck</h3>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc3.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc1.png" alt="#"/></figure>
</div>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc2.png" alt="#"/></figure>
</div>
<h3 class="blac_co">Truck</h3>
</div>
<div class="col-md-4">
<div class="vehicles_truck">
<figure><img src="images/truc3.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#veh" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<a class="carousel-control-next" href="#veh" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<a class="read_more" href="#">Read More</a>
</div>
</div>
</div>
</section>
<!-- end vehicles section -->
<!-- testimonial section -->
<div id="testimonial" class="testimonial bottom_cross bottom_cross2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Testimonials</h2>
<p>nternet. It uses a dictionary of over 200 Latin words, combined with .</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide testimonial_Carousel " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption ">
<div class="row">
<div class="col-md-12">
<div class="testimonial_box">
<figure><img src="images/our.png" alt="#"/></figure>
<h3>Luda Johnson <br><span class="kisu">( Ceo)</span></h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 year</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-12">
<div class="testimonial_box">
<figure><img src="images/our.png" alt="#"/></figure>
<h3>Luda Johnson <br><span class="kisu">( Ceo)</span></h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 year</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-12">
<div class="full cross_layout">
<div class="testimonial_box">
<figure><img src="images/our.png" alt="#"/></figure>
<h3>Luda Johnson <br><span class="kisu">( Ceo)</span></h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 year</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<i class="fa fa-caret-left" aria-hidden="true"></i>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="read_more" href="#">Read More</a>
</div>
</div>
</div>
</div>
<!-- end testimonial section -->
<!-- choose section -->
<div class="choose">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Why Choose Us</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="choose_box">
<i><img src="images/why1.png" alt="#"/></i>
<h3>Our Vission</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,</p>
<a class="read_more" href="#">Read More</a>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="choose_box">
<i><img src="images/why2.png" alt="#"/></i>
<h3>Estimate Shipping</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,</p>
<a class="read_more" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- end choose section -->
<!-- contact section -->
<div id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Requst A call for You</h2>
</div>
</div>
</div>
</div>
<div class="con_bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<form id="request" class="main_form">
<div class="row">
<div class="col-md-12 ">
<input class="contactus" placeholder="Name" type="type" name="Name">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Email" type="type" name="Email">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Phone Number" type="type" name="Phone Number">
</div>
<div class="col-md-12">
<input class="contactusmess" placeholder="Message" type="type" Message="Name">
</div>
<div class="col-md-12">
<button class="send_btn">Send</button>
</div>
</div>
</form>
</div>
<div class="col-md-7">
<div class="co_tru">
<figure><img src="images/truc4.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end contact section -->
<!-- footer -->
<footer>
<div class="footer bottom_cross1">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="location_icon">
<li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i></a> Address : Lorem Ipsum <br> is simply dummy
</li>
<li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i></a>Phone : +(1234) 567 890</li>
<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>Email : [email protected]</li>
</ul>
<form class="bottom_form">
<h3>Newsletter</h3>
<input class="enter" placeholder="Enter your email" type="text" name="Enter your email">
<button class="sub_btn">subscribe</button>
</form>
</div>
<div class="col-md-8">
<div class="map">
<figure><img src="images/map.png" alt="#"/></figure>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright © 2020.Company name All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- end footer -->
<!-- Javascript files-->
<!-- sidebar -->
<script>
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
</script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
Collect from <a href="http://www.51qianduan.com/" title="网站模板">模板之家</a>
<a href="https://www.51qianduan.com/" title="查字典">查字典</a>
</div>
</body>
</html>
