前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
【静态网页模板源码】000062 响应式深蓝黑大气网站网站-响应式 (附源码)
目录
📚一、效果展示
网站介绍：
上，色彩的呈现始终保持鲜明、和谐，字体大小和样式也能自适应调整，保证清晰易读。
在导航功能方面，响应式导航菜单非常便捷。在桌面端，菜单可能是横向展开的完整菜单，当切换到移动设备时，菜单会自动折叠成易于点击的汉堡菜单或者侧边栏菜单。用户可以轻松地在企业概况、产品服务、新闻资讯、客户案例、联系我们等板块之间自由切换。
对于产品和服务展示，这个模板提供了多样化的展示形式。图片库支持高清大图展示，产品细节能够通过缩放功能查看。服务介绍可以用图文并茂或者视频的方式生动呈现，吸引用户深入了解。
交互性也是该模板的一大亮点。表单功能强大，无论是客户咨询、订单提交还是招聘应聘的表单，都能流畅运行并准确收集信息。同时，它还支持在线客服功能，访客可以随时与企业人员进行交流沟通。
📘电脑端，共计6个页面
只展示3个页面，完整效果，请查运行全部代码
🔖首页-页面
🔖关于-页面
🔖联系我们-页面
📘平板端(和电脑端类似，此处省略展示)
📘手机端，共计6个页面
- 只展示3个页面，完整效果，请查运行全部代码
- 手机端截图略有失真，完整效果，请运行代码
🔖首页-页面
🔖关于-页面
🔖联系我们-页面
📚二、首页源码展示
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http//fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!---strat-slider---->
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
<!---//strat-slider---->
<!-- start top_js_button -->
<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},1200);
});
});
</script>
</head>
<body>
<!-- start header -->
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=""/> </a>
</div>
<div class="social-icons">
<ul>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- start header -->
<div class="header_btm">
<div class="wrap">
<div class="header_sub">
<div class="h_menu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="index.html">Pages</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
<div class="h_search">
<form>
<input type="text" value="" placeholder="search something...">
<input type="submit" value="">
</form>
</div>
<div class="menu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="index.html">Pages</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
<div class="search">
<form action="/iphone/search.html">
<input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}" class="text">
</form>
</div>
<div class="sub-head">
<ul>
<li><a href="#" id="menu">Menu <span></span></a></li>
<li><a href="#" id="search">Search <span></span></a></li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(".menu,.search").hide();
$("#menu").click(function(){
$(".menu").toggle();
$(".search").hide();
$("#search").removeClass("active");
$("#menu").toggleClass("active");
});
$("#search").click(function(){
$(".search").toggle();
$(".menu").hide();
$("#menu").removeClass("active");
$("#search").toggleClass("active");
$(".text").focus();
});
</script>
<script type="text/javascript" src="js/script.js"></script>
<div class="clear"></div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- start slider -->
<div class="slider_bg">
<div class="wrap">
<div class="slider">
<!---start-da-slider----->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Welcome to our website</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="da-slide">
<h2>Clean & Flat Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="da-slide">
<h2>Clean & Flat Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="da-slide">
<h2>Welcome to our website</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
<!---//End-da-slider----->
</div>
</div>
</div>
<!-- start main -->
<div class="wrap">
<div class="main">
<div class="main_text">
<h2>Lorem Ipsum is <span>simply dummy </span> text of the printing.</h2>
<p class="para">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<!-- start grids_of_3 -->
<div class="grids_of_3">
<div class="grid1_of_3">
<img src="images/icon1.png" alt=""/>
<h3><a href="#">Lorem Ipsum is <span> simply </span> </a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="grid1_of_3">
<img src="images/icon2.png" alt=""/>
<h3><a href="#">Lorem Ipsum is <span> simply </span> </a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="grid1_of_3">
<img src="images/icon3.png" alt=""/>
<h3><a href="#">Lorem Ipsum is <span> simply </span> </a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="clear"></div>
</div>
<!-- end grids_of_3 -->
</div>
</div>
<!-- start main_bg -->
<div class="main_bg">
<div class="wrap">
<div class="main content_top">
<!-- start span_of_3 -->
<div class="span_of_3">
<div class="span1_of_3">
<a href="details.html"><img src="images/pic1.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="span1_of_3">
<a href="details.html"><img src="images/pic2.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="span1_of_3">
<a href="details.html"><img src="images/pic3.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="clear"></div>
</div>
<!-- -->
<div class="span_of_3">
<div class="span1_of_3">
<a href="details.html"><img src="images/pic4.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="span1_of_3">
<a href="details.html"><img src="images/pic5.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="span1_of_3">
<a href="details.html"><img src="images/pic6.jpg" alt=""/></a>
<div class="span1_of_3_text">
<h3><a href="details.html">Lorem Ipsum is simply text</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
<div class="clear"></div>
</div>
<!-- end grids_of_3 -->
</div>
</div>
</div>
<div class="wrap">
<ul id="flexiselDemo3">
<li><img src="images/client1.jpg" /></li>
<li><img src="images/client6.jpg" /></li>
<li><img src="images/client2.jpg" /></li>
<li><img src="images/client5.jpg" /></li>
<li><img src="images/client4.jpg" /></li>
<li><img src="images/client3.jpg" /></li>
<li><img src="images/client4.jpg" /></li>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel();
$("#flexiselDemo2").flexisel({
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
$("#flexiselDemo3").flexisel({
visibleItems: 5,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
</div>
<!-- start footer -->
<div class="footer_bg">
<div class="wrap">
<div class="footer">
<!-- start span_of_4 -->
<div class="span_of_4">
<div class="span1_of_4">
<h4>popular post</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="f_nav1">
<li class="timer"><a href="#">25-september 2013 </a></li>
</ul>
<p class="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul class="f_nav1">
<li class="timer"><a href="#">25-september 2013 </a></li>
</ul>
</div>
<div class="span1_of_4">
<h4>tags</h4>
<p>It is a long established fact that a reader will be distracted by the<big>readable</big> content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal <big>blog</big> Many desktop publishing packages and web page editors now use Lorem.</p>
</div>
<div class="span1_of_4">
<h4>a little about us</h4>
<p class="btm">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<p>It is a long established fact that a reader will be of a page when looking at its layout.</p>
</div>
<div class="span1_of_4">
<h4>get in touch</h4>
<p class="btm">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</p>
<p class="btm1 pin">Texas, US</p>
<p class="btm1 mail"><a href="mailto:info@mycompany.com">info(at)mycompany.com </a></p>
<p class="call">01234 444 777</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start footer -->
<div class="footer_bg1">
<div class="wrap">
<div class="footer1">
<!-- scroll_top_btn -->
<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
<!--end scroll_top_btn -->
<div class="social-icons">
<ul>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
</ul>
</div>
|
<div class="clear"></div>
</div>
</div>
</div>
<div style="display:none"><script src='https://blog.csdn.net/qq_33650655/category_12849415' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
📚三、全部源码领取
📘领取全部代码地址👉：https://download.csdn.net/download/qq_33650655/90135770
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作
扫一扫
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
