蓝色欧美风格的无法访问错误提示页源码下载



11 43 15



模板描述:蓝色欧美风格 无法访问 错误提示页,蓝色欧美风格的无法访问错误提示页源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bars.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

2. 引入JS

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/bars.js"></script>

3. HTML代码

<!-- /banner -->
<section class="error-page" id="home">
	<div class="container">
		<header class="heading-1">
			<h1>Static error page</h1>
			<div class="icon">
				<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
			</div>
			<h2>
				404! Page Not Found
			</h2>
			<p>The server indicates that you did a
				mistake of misspelling the URL or 
				requesting for a page that is no longer 
				available.</p>
		</header>
		<!-- navigation -->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
					<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="myNavbar">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="#about" class="scroll">About</a></li>
						<li><a href="#team" class="scroll">Team</a></li>
						<li><a href="#services" class="scroll">Services</a></li>
						<li><a href="#contact" class="scroll">Contact</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- //navigation -->
	</div>
</section>
<!-- //banner -->
<!-- ad -->
<div class="container">
<!-- 自适应广告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
<!-- about -->
<section class="about" id="about">
	<div class="container">
		<div class="w3ls-head">
			<h3>Who we are</h3>
			<h4>About</h4>
		</div>
		<div class="about-para">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis. Sed sit amet augue sit amet mauris gravida interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis. Sed sit amet augue sit amet mauris gravida interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis.</p>
		</div>
		<div class='bar'>
			<div class="col-md-6 group">
				<div class='bar_left'>
					<div class='bar_group'>
						<div class='bar_group__bar thin' label='Javascript' show_values='true' value='343'></div>
						<div class='bar_group__bar thin' label='HTML5' show_values='true' value='235'></div>
						<div class='bar_group__bar thin' label='CSS3' show_values='true' value='675'></div>
						<div class='bar_group__bar thin' label='Bootstrap' show_values='true' value='245'></div>
					</div>
				</div>
			</div>
			<div class="col-md-6 group">
				<div class='bar_right'>
					<div class='bar_group'>
						<div class='bar_group__bar thin' label='PHP' show_values='true' value='675'></div>
						<div class='bar_group__bar thin' label='jQuery' show_values='true' value='343'></div>
						<div class='bar_group__bar thin' label='SASS' show_values='true' value='456'></div>
						<div class='bar_group__bar thin' label='HAML' show_values='true' value='245'></div>
					</div>
				</div>
			</div>
			<div class='clearfix'></div>
		</div>
	</div>
</section>
<!-- //about -->
<!-- team -->
<section class="team" id="team">
		<div class="container">
			<div class="w3ls-head w3-color">
				<h3>we are the one</h3>
				<h4>Our Team</h4>
			</div>
			<div class="para">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis. Sed sit amet augue sit amet mauris gravida interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut risus eget libero finibus facilisis. Phasellus tempus hendrerit sem ut iaculis. Sed sit amet augue sit amet mauris gravida interdum.Sed sit amet augue sit amet mauris gravida interdum.</p>
			</div>
			<div class="agileits-team-grids">
				<div class="col-md-4 agileits-team-grid">
					<div class="team-info">
						<img src="images/1.jpg" alt="" />
						<div class="team-caption"> 
							<h4>Lorem ipsum</h4>
							<p>Fusce laoreet</p>
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-4 agileits-team-grid">
					<div class="team-info">
						<img src="images/2.jpg" alt="" />
						<div class="team-caption"> 
							<h4>Lorem ipsum</h4>
							<p>Fusce laoreet</p>
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-4 agileits-team-grid">
					<div class="team-info">
						<img src="images/3.jpg" alt="" />
						<div class="team-caption"> 
							<h4>Lorem ipsum</h4>
							<p>Fusce laoreet</p>
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
</section>
<!-- //team -->
<!-- services -->
<section class="services" id="services">
	<div class="container">
		<div class="w3ls-head">
			<h3>what we do</h3>
			<h4>Services</h4>
		</div>
		<div class="service-grids">
			<div class="service-grid-top">
				<div class="col-md-4 grid-1">
					<i class="fa fa-book" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem ut iaculis Phasellus tempus</p>
				</div>
				<div class="col-md-4 grid-2">
					<i class="fa fa-clone" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem ut iaculis Phasellus tempus</p>
				</div>
				<div class="col-md-4 grid-3">
					<i class="fa fa-picture-o" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem ut iaculis Phasellus tempus</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="service-grid-bottom">
				<div class="col-md-4 grid-4">
					<i class="fa fa-cog" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem ut iaculis Phasellus tempus</p>
				</div>
				<div class="col-md-4 grid-5">
					<i class="fa fa-folder-open" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem  ut iaculis Phasellus tempus</p>
				</div>
				<div class="col-md-4 grid-6">
				<i class="fa fa-database" aria-hidden="true"></i>
					<h5>Lorem ipsum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus tempus hendrerit sem hendrerit sem ut iaculis Phasellus tempus</p>
				</div>
				<div class="clearfix"></div>
			</div>
		<div class="clearfix"></div>
		</div>
	</div>
</section>
<!-- //services -->
<!-- subscribe -->
<section class="subscribe" id="subscribe">
	<div class="container">
		<div class="w3ls-head w3-color">
			<h3>our News letter</h3>
			<h4>subscribe us</h4>
		</div>
		<div class="form">
			<form action="#" method="post">
				<input type="email" placeholder="Enter Email Address" required="">
				<input type="submit" value="Subscribe">
			</form>
		</div>
	</div>
</section>
<!-- //subscribe -->
<!-- contact -->
<section class="contact" id="contact">
	<div class="container">
		<div class="w3ls-head">
			<h3>get in touch</h3>
			<h4>Contact us</h4>
		</div>
		<div class="form">
			<form action="#">
				<input type="text" placeholder="Enter Your name" required="">
				<input type="email" placeholder="Enter Email Address" required="">
				<input type="text" placeholder="Subject" required="">
				<textarea placeholder="Message"></textarea>
				<input type="submit" value="Send Message">
			</form>
		</div>
	</div>
</section>
<!-- //contact -->
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="agileinfo-grids">
			<div class="agile-grid-left agile-grid-right">
				<h4>Keep Updated</h4>
				<div class="social">
					<ul>
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-rss"></i></a></li>
						<li><a href="#"><i class="fa fa-vk"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="agile-nav">
			<ul>
				<li><a href="#home" class="scroll">Home</a></li>
				<li><a href="#about" class="scroll">About</a></li>
				<li><a href="#team" class="scroll">Our Team</a></li>
				<li><a href="#services" class="scroll">Services</a></li>
				<li><a href="#contact" class="scroll">Contact us</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- //footer -->
<!-- copyright -->
<div class="copyright">
	<div class="container">
		<p>© 2017 Static Error Page. All Rights Reserved | Design by <a href="http://www.51qianduan.com//"> xmoban.cn</a> </p>
	</div>
</div>
<!-- //copyright -->
<!-- Default-JavaScript-File -->
<!-- //Default-JavaScript-File -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- js files -->
<!-- //js files -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 扁平化 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 其他页 其他站

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到