黑色簡潔風格的衣物清潔店整站網站源碼下載



9 32 11



模板描述:黑色簡潔風格 衣物清潔店 整站網站,黑色簡潔風格的衣物清潔店整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代碼

	<!--start-header-->
					<div class="header" id="home">
						<div class="container">
							<div class="logo">
								<a href="index.html"><img src="images/logo.png" alt=""></a>  
							</div>
							<!--start-top-nav-->
							 <nav class="top-nav">
								<ul class="top-nav">
									<li><a href="index.html" class="active">Home</a></li>&nbsp;/
									<li><a href="about-us.html">About Us</a></li>&nbsp;/
									<li><a href="about-us.html">Profile</a></li>&nbsp;/
									<li><a href="services.html">Services</a></li>&nbsp;/
									<li><a href="clients.html">Clients</a></li>&nbsp;/
									<li><a href="404.html">Careers</a></li>&nbsp;/
									<li><a href="contact.html">Contact</a></li>
								</ul>
								<a href="#" id="pull"><img src="images/menu-icon.png" title="menu" /></a>
							</nav>
							<div class="clearfix"> </div>
						</div>
				</div>
		<!--End-header-->	
		<!--start-search-->
			<div class="search">
				<div class="container">
					<div class="search-main">
						<ul>
							<li>
								<div class="login">
									<a href="login.html">Login</a>&nbsp;&nbsp;/&nbsp;&nbsp;<a href="register.html">Register</a>
								</div>
							</li>	
							<li>
								<div class="search-top">
									<input type="text"  value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
									<input type="submit" value="Search">
								</div>
							</li>
						</ul>
						<span></span>
					</div>
				</div>
			</div>
		<!--End-search-->	
		<!--start-banner-->	
		<div class="banner">
			<div class="container">
				<div class="banner-top">
					<h2>-Welcome To-</h2>
					<h1>Lorem ipsum dolor sit amet</h1>
				</div>
				<div class="banner-bottom">
					<div  id="top" class="callbacks_container">
			      		<ul class="rslides" id="slider4">
			        	<li>
							<img src="images/banner-1.jpg" alt="" />
						</li>
						<li>
							<img src="images/banner-2.jpg" alt="" />
						</li>
						<li>
							<img src="images/banner-3.jpg" alt="" />
						</li>
						<li>
							<img src="images/banner-4.jpg" alt="" />
						</li>
						<li>
							<img src="images/banner-5.jpg" alt="" />
						</li>
			      		</ul>
			    	</div>
			    <div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<!--End-banner-->
		<!--Slider-Starts-Here-->
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			    });
			  </script>
			<!--End-slider-script-->	
	<!--start-lorem-->
	<div class="lorem">
		<div class="container">
			<div class="lorem-main">
				<div class="lorem-left">
					<img src="images/i.png" alt="">
				</div>
				<div class="lorem-right">
					<h3>Lorem ipsum dolor sit amet neredmet ongole sufilguda.</h3>
					<p>Donec commodo mauris in nunc scelerisque non viverra nibh suscipit ivamus eget elit at mi euismod facilisis sed.</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="lorem-top">
				<div class="col-md-4 lorem-top-one">
					<div class="lorem-top-left">
						<h3>Short About Us</h3>
						<img src="images/abt.jpg" alt="">
						<h4>United IT Solutions Inc,</h4>
						<p>was created with an aim of providing quality services and developing Applications and solutions in the area of information technology catering to.</p>
						<div class="tool">
							<a class="tooltips" href="single.html">
								<span>Read More</span></a>
						</div>
					</div>
				</div>
				<div class="col-md-4 lorem-top-one">
					<div class="lorem-top-left">
						<h3>Our Services</h3>
						<img src="images/svr.jpg" alt="">
						<h4>United IT Solutions Inc,</h4>
						<p>was created with an aim of providing quality services and developing Applications and solutions in the area of information technology catering to.</p>
						<div class="tool">
							<a class="tooltips" href="single.html">
								<span>Read More</span></a>
						</div>
					</div>
				</div>
				<div class="col-md-4 lorem-top-one">
					<div class="lorem-top-left">
						<h3>Our Support</h3>
						<img src="images/sup.jpg" alt="">
						<h4>United IT Solutions Inc,</h4>
						<p>was created with an aim of providing quality services and developing Applications and solutions in the area of information technology catering to.</p>
						<div class="tool">
							<a class="tooltips" href="single.html">
								<span>Read More</span></a>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="lorem-middle">
				<div class="lorem-middle-top">
					<h3>Lorem ipsum dolor sit amet neredmet ongole sufilguda.</h3>
					<p>Donec commodo mauris in nunc scelerisque non viverra nibh suscipit ivamus eget elit at mi euismod facilisis sed.</p>
				</div>
				<div class="lorem-middle-bottom">
					<div class="col-md-6 lorem-middle-left">
						<h4>United IT Solutions Inc,</h4>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean molestie lobortis felis, vestibulum egestas dolor sagittis nec. Mauris ultricies dignissim. <a href="single.html">/ more info /</a></p>
					</div>
					<div class="col-md-6 lorem-middle-left">
						<h4>United IT Solutions Inc,</h4>
						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean molestie lobortis felis, vestibulum egestas dolor sagittis nec. Mauris ultricies dignissim. <a href="single.html">/ more info /</a></p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="lorem-bottom">
				<div class="lorem-bottom-top">
					<h3>Lorem ipsum dolor sit amet neredmet ongole sufilguda.</h3>
					<p>Donec commodo mauris in nunc scelerisque non viverra nibh suscipit ivamus eget elit at mi euismod facilisis sed.</p>
				</div>
				<div class="lorem-bottom-btm">
					<h4>United IT Solutions Inc,</h4>
					<p>Donec fringilla odio ut nunc lacinia sollicitudin eu id nulla. Ut vestibulum auctor odio ac lobortis. Pellentesque ac neque sed enim pulvinar tempus. Pellentesque et metus ut dolor egestas semper vel eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Donec consectetur, justo venenatis vulputate convallis, turpis velit egestas eros, nec molestie tellus dui nec nulla.</p>
					<div class="tool btm-tool">
							<a class="tooltips btm-tooltips" href="#">
							<span>Read More</span></a>
					</div>
				</div>
			</div>
		</div>
	</div>	
	<!--End-lorem-->
	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-main">
				<div class="col-md-8 footer-left">
					<ul>
						<li><a href="index.html" class="active">Home</a></li>&nbsp;/
						<li><a href="about-us.html">About Us</a></li>&nbsp;/
						<li><a href="about-us.html">Profile</a></li>&nbsp;/
						<li><a href="services.html">Services</a></li>&nbsp;/
						<li><a href="clients.html">Clients</a></li>&nbsp;/
						<li><a href="404.html">Careers</a></li>&nbsp;/
						<li><a href="contact.html">Contact</a></li>
					</ul>
					<p>Template By<a href="http://w3layouts.com/"> W3layouts</a></p>
				</div>
				<div class="col-md-2 footer-middle">
					<h3>Contact Us</h3>
					<p><a href="mailto:[email protected]">[email protected]</a></p>
				</div>
				<div class="col-md-2 footer-right">
					<h3>Follow Us On...</h3>
					<ul>
						<li><a href="#"><span class="twit"> </span></a></li>
						<li><a href="#"><span class="fb"> </span></a></li>
						<li><a href="#"><span class="in"> </span></a></li>
						<li><a href="#"><span class="o"> </span></a></li>
						<li><a href="#"><span class="v"> </span></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<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="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--End-footer-->			



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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