藍色簡潔風格的數字網絡設備生產整站網站源碼下載



3 9 4



模板描述:藍色簡潔風格 數字網絡 設備生產 整站網站,藍色簡潔風格的數字網絡設備生產整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css' />
<link href="css/JiSlider.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/JiSlider.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

	<!-- header -->
	<div class="header">
		<div class="container-fluid">
			<div class="header-grid">
				<div class="header-grid-left">
					<ul>
						<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">cityline.com</a></li>
						<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 892</li>
						<li><i class="glyphicon glyphicon-log-in" aria-hidden="true"></i><a href="#" class="login" data-toggle="modal" data-target="#myModal4">Login</a></li>
						<li><i class="glyphicon glyphicon-book" aria-hidden="true"></i><a href="#" class="login reg"  data-toggle="modal" data-target="#myModal5">Register</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="logo-nav">
				<div class="logo-nav-left">
					<h1><a href="index.html">City Line<span>digital networks</span></a></h1>
				</div>
				<div class="logo-nav-left1">
					<nav class="navbar navbar-default">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">Menu
							<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="bs-megadropdown-tabs">
							<ul class="nav navbar-nav">
								<li class="active"><a href="index.html">Home</a></li>
								<li class="agileits dropdown">
									<a href="#" data-toggle="dropdown" aria-expanded="true">about</a>
									<ul class="dropdown-menu agile_short_dropdown">
										<li><a href="about.html">about us</a></li>
										<li><a href="app.html">mobile app</a></li>
										<li><a href="testimonials.html">testimonials</a></li>
									</ul>
								</li>
								<li><a href="bbhome.html">Broadband</a></li>
								<li class="agileits dropdown">
									<a href="#" data-toggle="dropdown" aria-expanded="true">Digital Cable TV</a>
									<ul class="dropdown-menu agile_short_dropdown">
										<li><a href="products.html">Products</a></li>
										<li><a href="packs.html">Channel & Packs</a></li>
										<li><a href="pay.html">Quick Pay</a></li>
									</ul>
								</li>
								<li class="agileits dropdown">
									<a href="#" data-toggle="dropdown" aria-expanded="true">quick recharge</a>
									<ul class="dropdown-menu agile_short_dropdown">
										<li><a href="pay.html">Digital TV</a></li>
										<li><a href="pay.html">Broadband</a></li>
									</ul>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="report.html">Report Issues</a></li>
								<li><a href="contact.html">contact us</a></li>
							</ul>
						</div>
					</nav>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //header -->
	<div class="general_social_icons">
		<nav class="wthree-social">
			<ul>
				<li class="w3_facebook"><a href="#"> <i class="fa fa-facebook"></i>Facebook</a></li>
				<li class="w3_twitter"><a href="#"><i class="fa fa-twitter"></i>Twitter </a></li>
				<li class="w3_dribbble"><a href="#"> <i class="fa fa-dribbble"></i>Dribbble</a></li>
				<li class="w3_g_plus"><a href="#"><i class="fa fa-google-plus"></i>Google+ </a></li>				  
			</ul>
		</nav>
	</div>
	<!-- banner -->
	<!-- banner -->
	<div class="banner-silder">
		<div id="JiSlider" class="jislider">
			<ul>
				<li>
					<div class="w3layouts-banner-top">
						<div class="container">
							<div class="agileits-banner-info">
								<h3>Welcome to cityline</h3>
								<p>Sit amet neque semper euismod.</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="w3layouts-banner-top w3layouts-banner-top1">
						<div class="container">
							<div class="agileits-banner-info">
								<h3>Time to go Digital</h3>
								<p>Amet sit neque semper euismod.</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="w3layouts-banner-top w3layouts-banner-top2">
						<div class="container">
							<div class="agileits-banner-info">
								<h3>Enjoy free live TV</h3>
								<p>Neque amet sit semper euismod.</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="w3layouts-banner-top w3layouts-banner-top3">
						<div class="container">
							<div class="agileits-banner-info">
								<h3>Exclusive Digital services</h3>
								<p>Semper neque amet sit euismod.</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- //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 -->
	<div class="container">
		<!-- services section -->
		<div class="w3ls-section w3_agileits-services" id="services">
			<h2 class="agileits-title">welcome to cityline</h2>
			<h4 class="wthree">Phasellus dapibus felis elit accumsan arcu vitae.</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor.
				Integer laoreet placerat suscipit.</p>
			<div class="agileinfo-about-main">
				<div class="col-md-8 demo">
					<div id="verticalTab">
						<ul class="resp-tabs-list">
							<li>
								<div class="tab1">
									<h3>investors</h3>
								</div>
							</li>
							<li>
								<div class="tab1">
									<h3>partners</h3>
								</div>
							</li>
							<li>
								<div class="tab1">
									<h3>vision</h3>
								</div>
							</li>
							<li>
								<div class="tab1">
									<h3>mision</h3>
								</div>
							</li>
							<li>
								<div class="tab1">
									<h3>management</h3>
								</div>
							</li>
						</ul>
						<div class="resp-tabs-container">
							<div class="tabs-right1">
								<h6>Aliquam donec id urna</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<p class="agile-tab-txt">scelerisque commodo.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur
									nibh quis urna gravida mollis.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<div class="button">
									<a href="about.html">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
								</div>
							</div>
							<div class="tabs-right1">
								<h6>Aliquam donec id urna</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<p class="agile-tab-txt">scelerisque commodo.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur
									nibh quis urna gravida mollis.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<div class="button">
									<a href="about.html">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
								</div>
							</div>
							<div class="tabs-right1">
								<h6>Aliquam donec id urna</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<p class="agile-tab-txt">scelerisque commodo.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur
									nibh quis urna gravida mollis.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<div class="button">
									<a href="about.html">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
								</div>
							</div>
							<div class="tabs-right1">
								<h6>Aliquam donec id urna</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<p class="agile-tab-txt">scelerisque commodo.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur
									nibh quis urna gravida mollis.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<div class="button">
									<a href="about.html">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
								</div>
							</div>
							<div class="tabs-right1">
								<h6>Aliquam donec id urna</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<p class="agile-tab-txt">scelerisque commodo.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur
									nibh quis urna gravida mollis.Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel
									tortor. Integer laoreet placerat suscipit.</p>
								<div class="button">
									<a href="about.html">Get More<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a>
								</div>
							</div>
						</div>
					</div>
					<div style="height: 30px; clear: both"></div>
				</div>
				<div class="col-md-4 w3ls-about-right">
					<img src="images/home.png" class="img-responsive" alt="" />
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<script>
			$(document).ready(function () {
				$('#horizontalTab').easyResponsiveTabs({
					type: 'default', //Types: default, vertical, accordion           
					width: 'auto', //auto or any width like 600px
					fit: true, // 100% fit in a container
					closed: 'accordion', // Start closed if in accordion view
					activate: function (event) { // Callback function if tab is switched
						var $tab = $(this);
						var $info = $('#tabInfo');
						var $name = $('span', $info);
						$name.text($tab.text());
						$info.show();
					}
				});
				$('#verticalTab').easyResponsiveTabs({
					type: 'vertical',
					width: 'auto',
					fit: true
				});
			});
		</script>
		<!-- //agents section -->
		<!-- markets -->
		<div class="w3ls-section markets" id="markets">
			<div class="markets-grids">
				<div class="col-md-3 col-sm-6 col-xs-6 w3ls-markets-grid text-center">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-wifi" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Suspendisse</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 w3ls-markets-grid text-center">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-cog" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Aliquam</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 w3ls-markets-grid text-center">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-television" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Consectetur</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 w3ls-markets-grid text-center">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-tasks" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Bibendum</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- //markets -->
		<!-- offers -->
		<div class="w3ls-section offers">
			<div class="offers-grids">
				<div class="wthree-offers-right">
					<div class="col-md-7  col-sm-8 col-xs-8 wthree-offers1-right">
						<h4>CityLine | Digital Networks Broadband</h4>
						<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
						<ul>
							<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Phasellus sem leo, interdum quis risus</a></li>
							<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Nullam egestas nisi id malesuada aliquet </a></li>
							<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Donec condimentum purus urna venenatis</a></li>
							<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Ut congue, nisl id tincidunt lobor mollis</a></li>
							<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> Cum sociis natoque penatibus et magnis</a></li>
						</ul>
					</div>
					<div class="col-md-5 col-sm-4  col-xs-4 wthree-offers1">
						<img src="images/bg.jpg" alt="" class="img-responsive" />
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="w3ls-offers-main">
					<div class="col-md-5  col-sm-4 col-xs-4 wthree-offers1">
						<img src="images/sat.png" alt="" class="img-responsive" />
					</div>
					<div class="col-md-7  col-sm-8 col-xs-8 wthree-offers-left">
						<div class="offers-left-heading">
							<h4>CityLine | Digital Networks DTH</h4>
							<h5>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</h5>
						</div>
						<div class="offers-left-grids">
							<div class="offers-number">
								<p>1</p>
							</div>
							<div class="offers-text">
								<p>Integer egestas non lorem eget aliquet. Nulla egestas felis et maximus elementum. Morbi a dui ac nunc mollis rhoncus.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="offers-left-grids offers-left-middle">
							<div class="offers-number">
								<p>2</p>
							</div>
							<div class="offers-text">
								<p>Integer egestas non lorem eget aliquet. Nulla egestas felis et maximus elementum. Morbi a dui ac nunc mollis rhoncus.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="offers-left-grids">
							<div class="offers-number">
								<p>3</p>
							</div>
							<div class="offers-text">
								<p>Integer egestas non lorem eget aliquet. Nulla egestas felis et maximus elementum. Morbi a dui ac nunc mollis rhoncus.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<!-- offers -->
		<div class="service-bottom">
				<div class="services-w3ls-row agileits-w3layouts">
					<div class="col-md-3 col-sm-3 col-xs-6 services-grid agileits-w3layouts text-center">
						<i class="fa fa-envelope-o" aria-hidden="true"></i>
						<h5>Inquiry</h5>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 services-grid agileits-w3layouts text-center">
						<i class="fa fa-comments" aria-hidden="true"></i>
						<h5>24/7 Support</h5>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 services-grid agileits-w3layouts text-center">
						<i class="fa fa-question" aria-hidden="true"></i>
						<h5>faqs</h5>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6 services-grid agileits-w3layouts text-center">
						<i class="fa fa-list-alt" aria-hidden="true"></i>
						<h5>quick pay bill</h5>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
	<!-- footer -->
	<div class="footer">
		<div class="w3layouts-main-footer">
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>Quick links</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="about.html">About us</a></li>
					<li><a href="media.html">media</a></li>
					<li><a href="contact.html">support</a></li>
					<li><a href="privacy.html">privacy policy</a></li>
				</ul>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>Digital TV</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="packs.html">DTH Packs</a></li>
					<li><a href="faq.html">FAQ</a></li>
					<li><a href="cabletv.html">contact</a></li>
					<li><a href="pay.html">quick pay</a></li>
					<li><a href="media.html">support</a></li>
				</ul>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>Broad Band</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="bbhome.html">Plans</a></li>
					<li><a href="faq.html">FAQ</a></li>
					<li><a href="broadband.html">contact</a></li>
					<li><a href="pay.html">quick pay</a></li>
					<li><a href="media.html">support</a></li>
				</ul>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>Advertise</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="media.html">Media</a></li>
					<li><a href="faq.html">FAQ</a></li>
					<li><a href="contact.html">contact</a></li>
					<li><a href="pay.html">quick pay</a></li>
					<li><a href="media.html">support</a></li>
				</ul>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>policy info</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="faq.html">FAQ</a></li>
					<li><a href="privacy.html">privacy policy</a></li>
					<li><a href="terms.html">terms of use</a></li>
				</ul>
			</div>
			<div class="col-md-2 col-sm-4 col-xs-6 w3_footer_grid">
				<h3>Support</h3>
				<ul class="w3_footer_grid_list">
					<li><a href="contact.html">support</a></li>
					<li><a href="privacy.html">privacy policy</a></li>
					<li><a href="faq.html">FAQ</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
	</div>	
		<div class="agile_footer_grids">
			<div class="col-md-4 col-sm-4 col-xs-4 w3_footer_grid agile_footer_grids_w3_footer">
				<div class="w3_footer_grid_bottom contact">
					<h3>Contact Info</h3>
					<ul>
						<li><span class="fa fa-map-marker" aria-hidden="true"></span><p>1234k Avenue, 4th block,New York City.</p></li>
						<li><span class="fa fa-envelope-o" aria-hidden="true"></span><a href="mailto:[email protected]">[email protected]</a></li>
						<li><span class="fa fa-phone" aria-hidden="true"></span><p>+1234 567 567</p></li>
					</ul>
				</div>
			</div>
			<div class="col-md-4 col-sm-4  col-xs-4 w3_footer_grid agile_footer_grids_w3_footer">
				<div class="w3_footer_grid_bottom">
					<h3>Legal</h3>
					<ul class="w3_footer_grid_list">
						<li><a href="terms.html">Terms & Conditions</a></li>
						<li><a href="privacy.html">Privacy Policy</a></li>
						<li><a href="terms.html">Disclaimer</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-4 col-sm-4  col-xs-4 w3_footer_grid agile_footer_grids_w3_footer">
				<div class="w3_footer_grid_bottom contact">
					<h3>our branches</h3>
					<img src="images/map.jpg" class="img-responsive" alt=""/>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="wthree_footer_copy">
			<p>? 2017 CityLine. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
		</div>
	</div>
	<!-- //footer -->
	  <!-- Modal1 -->
					<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" >
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Login</h4>
										<div class="login-form">
											<form action="#" method="post">
												<input type="email" name="email" placeholder="E-mail" required="">
												<input type="password" name="password" placeholder="Password" required="">
												<div class="tp">
													<input type="submit" value="LOGIN NOW">
												</div>
												<div class="forgot-grid">
												       <div class="log-check">
														<label class="checkbox"><input type="checkbox" name="checkbox">Remember me</label>
														</div>
														<div class="forgot">
															<a href="#" data-toggle="modal" data-target="#myModal2">Forgot Password?</a>
														</div>
														<div class="clearfix"></div>
													</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
				<!-- //Modal1 -->
				  <!-- Modal1 -->
					<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" >
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Register</h4>
										<div class="login-form">
											<form action="#" method="post">
											    <input type="text" name="name" placeholder="Name" required="">
												<input type="email" name="email" placeholder="E-mail" required="">
												<input type="password" name="password" placeholder="Password" required="" id="password1">
												<input type="password" name="conform password" placeholder="Confirm Password" required="" id="password2">
												<div class="signin-rit">
													<span class="agree-checkbox">
														<label class="checkbox"><input type="checkbox" name="checkbox">I agree to your <a class="w3layouts-t" href="terms.html">Terms of Use</a> and <a class="w3layouts-t" href="privacy.html" target="_blank">Privacy Policy</a></label>
													</span>
												</div>
												<div class="tp">
													<input type="submit" value="REGISTER NOW">
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
				<!-- //Modal1 -->
				<script type="text/javascript">
					window.onload = function () {
						document.getElementById("password1").onchange = validatePassword;
						document.getElementById("password2").onchange = validatePassword;
					}
					function validatePassword(){
						var pass2=document.getElementById("password2").value;
						var pass1=document.getElementById("password1").value;
						if(pass1!=pass2)
							document.getElementById("password2").setCustomValidity("Passwords Don't Match");
						else
							document.getElementById("password2").setCustomValidity('');	 
							//empty string means no validation error
					}
			</script>
	<!-- //js -->
	<script>
		$(window).load(function () {
			$('#JiSlider').JiSlider({
				color: '#fff',
				start:1,
				reverse: false
			}).addClass('ff')
		})
	</script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-36251023-1']);
		_gaq.push(['_setDomainName', 'jqueryscript.net']);
		_gaq.push(['_trackPageview']);
		(function () {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 設備 機械 設備廠 機械廠
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子