黑色簡潔風格的紡織工業整站網站源碼下載



9 33 12



模板描述:黑色簡潔風格 紡織工業 整站網站,黑色簡潔風格的紡織工業整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Istok+Web:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>

3. HTML代碼

<!-- header -->
	<div class="header-top">
		<div class="container">
			<div class="phone">
				<h3><span>Phone</span> : +1 234 567 8907</h3>
			</div>
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
			</div>
			<div class="location">
				<h3><span>Location</span> : 10-344 Ng-Park,London</h3>
			</div>
				<div class="clearfix"> </div>
		</div>
	</div>
	<div class="banner">
		<div class="container">
			<div class="head-nav">
				<span class="menu"> </span>
				<ul>
					<li class="active"><a href="index.html">HOME</a></li>
					<li><a href="about.html">ABOUT</a></li>
					<li><a href="services.html">SERVICES</a></li>
					<li><a href="404.html">PRODUCTS</a></li>
					<li><a href="blog.html">BLOG</a></li>
					<li><a href="contact.html">CONTACTS</a></li>
					<div class="clearfix"> </div>
				</ul>
				</div>
						<div class="clearfix"> </div>
					<!-- script-for-nav -->
					<script>
						$( "span.menu" ).click(function() {
						  $( ".head-nav ul" ).slideToggle(300, function() {
							// Animation complete.
						  });
						});
					</script>
				<!-- script-for-nav -->
				<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<div class="banner-info">
										<h1>Cum sociis natoque penatibus et magnis dis parturient montes.</h1>
										<p>Duis eget metus nunc. Donec at mollis magna, at faucibus magna. Nunc eget metus purus. Integer id molestie nunc. Nunc vulputate imperdiet arcu, at vulputate lectus congue eget. Duis rutrum ut velit eu pharetra. Vestibulum a lectus metus. Sed venenatis a turpis non lobortis.</p>	
									</div>
								</li>
								<li>
									<div class="banner-info">
										<h1>Cum sociis natoque penatibus et magnis dis parturient montes.</h1>
										<p>Duis eget metus nunc. Donec at mollis magna, at faucibus magna. Nunc eget metus purus. Integer id molestie nunc. Nunc vulputate imperdiet arcu, at vulputate lectus congue eget. Duis rutrum ut velit eu pharetra. Vestibulum a lectus metus. Sed venenatis a turpis non lobortis.</p>	
									</div>
								</li>
								<li>	
									<div class="banner-info">
										<h1>Cum sociis natoque penatibus et magnis dis parturient montes.</h1>
										<p>Duis eget metus nunc. Donec at mollis magna, at faucibus magna. Nunc eget metus purus. Integer id molestie nunc. Nunc vulputate imperdiet arcu, at vulputate lectus congue eget. Duis rutrum ut velit eu pharetra. Vestibulum a lectus metus. Sed venenatis a turpis non lobortis.</p>	
									</div>
									<div class="clearfix"> </div>
								</li>
							</ul>
						</div>
					</section>
						<!-- FlexSlider -->
							  <script type="text/javascript">
								$(function(){
								  SyntaxHighlighter.all();
								});
								$(window).load(function(){
								  $('.flexslider').flexslider({
									animation: "slide",
									start: function(slider){
									  $('body').removeClass('loading');
									}
								  });
								});
							  </script>
						<!-- FlexSlider -->
			</div>
		</div>	
<!-- header -->
<!-- phase -->
	<div class="phase">
		<div class="container">
			<div class="col-md-9 phase-left">
				<h2>Phasellus vitae blandit felis non ultricies nis !</h2>
				<p>sociosqu ad litora torquent per conubia nostra</p>
			</div>
			<div class="col-md-3 phase-right">
				<a href="#" class="btn  btn-1c btn1 btn-1d">Learn More</a>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- phase -->
<!-- products -->
	<div class="products">
		<div class="container">
			<h3><span>Products		|</span>Pellentesque rutrum, libero eget semper volutpat,</h3>
			<div class="products-top">
				<div class="col-md-3 prod">
					<img src="images/img1.jpg" class="img-responsive" alt="" />
				</div>
				<div class="col-md-3 prod-1">
					<h4>Cras mattis hendrerit</h4>
					<p>Vestibulum ullamcorper odio at elit tempor, vel scelerisque neque convallis. Aenean leo enim, fermentum dapibus </p>
					<a class="read" href="#">More</a>
				</div>
				<div class="col-md-3 prod">
					<img src="images/img2.jpg" class="img-responsive" alt="" />
				</div>
				<div class="col-md-3 prod-1">
					<h4>Cras mattis hendrerit</h4>
					<p>Vestibulum ullamcorper odio at elit tempor, vel scelerisque neque convallis. Aenean leo enim, fermentum dapibus </p>
					<a class="read" href="#">More</a>
				</div>
				<div class="clearfix"> </div>
				<div class="col-md-3 prod-1">
					<h4>Cras mattis hendrerit</h4>
					<p>Vestibulum ullamcorper odio at elit tempor, vel scelerisque neque convallis. Aenean leo enim, fermentum dapibus </p>
					<a class="read" href="#">More</a>
				</div>
				<div class="col-md-3 prod">
					<img src="images/img3.jpg" class="img-responsive" alt="" />
				</div>
				<div class="col-md-3 prod-1">
					<h4>Cras mattis hendrerit</h4>
					<p>Vestibulum ullamcorper odio at elit tempor, vel scelerisque neque convallis. Aenean leo enim, fermentum dapibus </p>
					<a class="read" href="#">More</a>
				</div>
				<div class="col-md-3 prod">
					<img src="images/img4.jpg" class="img-responsive" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
			<h3><span>History		|</span>Pellentesque rutrum, libero eget semper volutpat,</h3>
		</div>
	</div>
<!-- products -->
<!-- phase-bottom -->
<div class="phase-bottom">
		<div class="container">
			<div class="col-md-9 phase-bottom-left">
				<h2>Phasellus vitae blandit felis non ultricies nis !</h2>
				<p>sociosqu ad litora torquent per conubia nostra sociosqu ad litora torquent per conubia nostra sociosqu ad litora torquent per conubia nostra</p>
			</div>
			<div class="col-md-3 phase-bottom-right">
				<a href="#" class="btn  btn-1c btn1 btn-1d">Learn More</a>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- phase-bottom -->
<!-- news -->
	<div class="news">
		<div class="container">
			<h3><span>News		|</span>Pellentesque rutrum, libero eget semper volutpat,</h3>
			<div class="news-top">
			<div class="col-md-4 news-1">
				<h5>Vivamus ante lorem lacinia ut bibend</h5>
				<h6>10:00 to 11:00	|	Jan 09,2014</h6>
				<p>Praesent tincidunt quam purus, quis tincidunt magna iaculis vitae. In fermentum dui lectus, eu cursus tellus pulvinar sed. Duis a eros at sapien vestibulum.</p>
				<a class="read" href="#">More</a>
			</div>
			<div class="col-md-4 news-1">
				<h5>Vivamus ante lorem lacinia ut bibend</h5>
				<h6>10:00 to 11:00	|	Jan 09,2014</h6>
				<p>Praesent tincidunt quam purus, quis tincidunt magna iaculis vitae. In fermentum dui lectus, eu cursus tellus pulvinar sed. Duis a eros at sapien vestibulum.</p>
				<a class="read" href="#">More</a>
			</div>
			<div class="col-md-4 news-1">
				<h5>Vivamus ante lorem lacinia ut bibend</h5>
				<h6>10:00 to 11:00	|	Jan 09,2014</h6>
				<p>Praesent tincidunt quam purus, quis tincidunt magna iaculis vitae. In fermentum dui lectus, eu cursus tellus pulvinar sed. Duis a eros at sapien vestibulum.</p>
				<a class="read" href="#">More</a>
			</div>
			<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- news -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-4 keep">
				<h4>Keep connected</h4>
				<div class="social">
						<ul>
							<li><a href="#"><i class="facebok"> </i></a></li>
							<li><a href="#"><i class="twiter"> </i></a></li>
							<li><a href="#"><i class="drible"> </i></a></li>
							<li><a href="#"><i class="in"> </i></a></li>
								<div class="clearfix"></div>	
						</ul>
					</div>
			</div>
			<div class="col-md-4 say">
				<h4>Say hello</h4>	
				  <form>
					 <div class="form_details">
		                <input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
						<input type="text" class="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
						<textarea value="Message:" onfocus="if(this.value == 'Message') this.value='';" onblur="if(this.value == '') this.value='Message';">Message</textarea>
						<input type="submit" value="submit">
			          </div>
			       </form>
			</div>
			<div class="col-md-4 our">
				<h4>Our office</h4>
					<div class="ic-da">
						<div class="icon">
							<i class="mob"> </i>
						</div>
						<div class="data">
							<p>+(123) 456-789-1234</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<h6>E-mail: <a href="#">[email protected]</a></h6>
					<h5>2nd Floor MNB Bulding, NG rood street, London1234.</h5>
			</div>
				<div class="clearfix"> </div>
			<div class="bottom">
				<p>? 2015 All rights reserved | Design by <a href="http://w3layouts.com/">W3layouts</a></p>
			</div>
		</div>
	</div>
<!-- footer -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表