黃色簡潔風格的地產企業網站源碼下載



8 28 10



模板描述:黃色簡潔風格 地產 企業網站,黃色簡潔風格的地產企業網站源碼下載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/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="//fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

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

3. HTML代碼

<!-- banner -->
	<div class="banner">
			<!-- header -->
	<div class="w3_navigation">
		<div class="container">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-5" id="cl-effect-5">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html"><span data-hover="Home">Home</span></a></li>
							<li><a href="about.html"><span data-hover="About Us">About Us</span></a></li>
							<li><a href="gallery.html"><span data-hover="Gallery">Gallery</span></a></li>
							<li><a href="icons.html"><span data-hover="Icons">Icons</span></a></li>
							<li><a href="contact.html"><span data-hover="Contact">Contact</span></a></li>
						</ul>
					</nav>
				</div>
			</nav>	
			<div class="w3_navigation_pos">
				<h1><a href="index.html">Apartment</a></h1>
			</div>
		</div>
	</div>
<!-- //header -->
		<div class="banner-info">
			<div class="container">
				<div class="flexslider-info">
						<section class="slider">
							<div class="flexslider">
								<ul class="slides">
									<li>
									<div class="w3l-info">
										<h3>Apartments <br>on Sydney City</br></h3>
									</div>
									</li>
									<li>
									<div class="w3l-info">
										<h3>Apartments <br>on Melbourne City</br></h3>
									</div>
									</li>
									<li>
									<div class="w3l-info">
										<h3>Apartments <br>on Perth City</br></h3>
									</div>
									</li>
									<li>
									<div class="w3l-info">
										<h3>Apartments <br>on Sydney City</br></h3>
									</div>
									</li>
									<li>
									<div class="w3l-info">
										<h3>Apartments <br>on Melbourne City</br></h3>
									</div>
									</li>
								</ul>
							</div>
						</section>
					</div>
					<div class="wthree-ban">
						<div class="w3l-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>
							</ul>
						</div>
						<div class="agileinfo-news-button">
							<a href="#" class="hvr-shutter-in-horizontal" data-toggle="modal" data-target="#myModal"> Read More</a>
						</div>
						<div class="clearfix"></div>
					</div>
			</div>
		</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 -->
<!-- tabs -->
<div class="tabs">
		<div class="container">
		<h3>Welcome</h3>
			<div class="tabs-left">
				<div class="col-xs-2 tab-grid-left"> <!-- required for floating -->
					<!-- Nav tabs -->
					 <ul class="nav nav-tabs">
						<li class="active"><a href="#Tab1" data-toggle="tab" aria-expanded="false">Tab1</a></li>
						<li class=""><a href="#Tab2" data-toggle="tab" aria-expanded="false">Tab2</a></li>
						<li class=""><a href="#Tab3" data-toggle="tab" aria-expanded="false">Tab3</a></li>
						<li class=""><a href="#Tab4" data-toggle="tab" aria-expanded="false">Tab4</a></li>
						<li class=""><a href="#Tab5" data-toggle="tab" aria-expanded="true">Tab5</a></li>
					</ul>
				</div>
				<div class="col-xs-10 tab-grid-right">
					<!-- Tab panes -->
					<div class="tab-content">
						<div class="tab-pane active" id="Tab1">
							<div class="w3-text">
								<img src="images/t1.jpg" class="img-responsive" alt="">
							</div>
						</div>
						<div class="tab-pane" id="Tab2">
							<div class="w3-text">
								<img src="images/t2.jpg" class="img-responsive" alt="">
							</div>
						</div>
						<div class="tab-pane" id="Tab3">
							<div class="w3-text">
								<img src="images/t3.jpg" class="img-responsive" alt="">
							</div>
						</div>
						<div class="tab-pane" id="Tab4">
							<div class="w3-text">
								<img src="images/t1.jpg" class="img-responsive" alt="">
							</div>
						</div>
						<div class="tab-pane" id="Tab5">
							<div class="w3-text">
								<img src="images/t2.jpg" class="img-responsive" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //tabs -->
	<!-- services -->
	<div class="w3agile-ser">
		<div class="container">
		<h3>Services</h3>
			<div class="col-md-4 w3agile-ser-left">
				<div class="w3agile-ser-top">
					<div class="ser-lft">
						<h4>01</h4>
					</div>
					<div class="ser-rgt">
						<h5>Lorem</h5>
					</div>
					<div class="clearfix"> </div>
				</div>
				<p>Curabitur ac auctor nunc. Praesent vitae tortor ac leo commodo laoreet nec non nisi. Fusce ornare, augue tristique ornare dictum, elit magna viverra elit Qapiente itaque earum rerum hic tenetur a delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At accusamus et.</p>
			</div>
			<div class="col-md-4 w3agile-ser-left">
				<div class="w3agile-ser-top">
					<div class="ser-lft">
						<h4>02</h4>
					</div>
					<div class="ser-rgt">
						<h5>Lorem</h5>
					</div>
					<div class="clearfix"> </div>
				</div>
				<p>Curabitur ac auctor nunc. Praesent vitae tortor ac leo commodo laoreet nec non nisi. Fusce ornare, augue tristique ornare dictum, elit magna viverra elit Qapiente itaque earum rerum hic tenetur a delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At vero.</p>
			</div>
			<div class="col-md-4 w3agile-ser-left">
				<div class="w3agile-ser-top">
					<div class="ser-lft">
						<h4>03</h4>
					</div>
					<div class="ser-rgt">
						<h5>Lorem</h5>
					</div>
					<div class="clearfix"> </div>
				</div>
				<p>Curabitur ac auctor nunc. Praesent vitae tortor ac leo commodo laoreet nec non nisi. Fusce ornare, augue tristique ornare dictum, elit magna viverra elit Qapiente itaque earum rerum hic tenetur a delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At vero et.</p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //services -->
	<!-- features -->
	<div class="features-w3">
				<div class="container">
					<h3 class="tittle">Our Best Features</h3>
					<div class="w3layouts-grids">
						<div class="col-md-6 feat-grid multi-gd-text">
							<div class="feat-top">
								<div class="col-md-6 feat-left">
									<a href="#"><img src="images/f1.jpg" class="img-responsive" alt=""></a>
								</div>
								<div class="col-md-6 feat-right">
									<a href="#"><img src="images/f2.jpg" class="img-responsive" alt=""></a>
									<a href="#"><img src="images/f3.jpg" class="img-responsive im" alt=""></a>
								</div>
								<div class="clearfix"></div>
							</div>
							<h4>Sed tristique purus vitae volutpat</h4>
							<p>Integer tincidunt ligula id lacinia placerat. Etiam rutrum fermentum tortor. Nunc tempor dui nec tincidunt eleifend. Phasellus lacinia gravida mollis. Curabitur laoreet ligula tempus, elementum dui quis, malesuada velit. Nullam cursus a magna vitae vestibulum.</p>
						</div>
						<div class="col-md-6 feat-grid multi-gd-text">
							<a href="#"><img src="images/f4.jpg" class="img-responsive" alt=""></a>
							<h4>Lorem Ipsum is not simply random</h4>
							<p>Integer tincidunt ligula id lacinia placerat. Etiam rutrum fermentum tortor. Nunc tempor dui nec tincidunt eleifend. Phasellus lacinia gravida mollis. Curabitur laoreet ligula tempus, elementum dui quis, malesuada velit. Nullam cursus a magna vitae vestibulum.</p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
	<!-- //features -->
	<!-- newsletter -->
	<div class="newsletter">
		<div class="container">
			<div class="col-md-6 agileinfo_newsletter_left">
				<h3>Subscribe to Newsletter</h3>
				<p>Donec porta lacus vitae urna placerat, vitae dapibus nulla eleifend. 
					Donec aliquam neque quis felis viverra pulvinar. Aliquam erat volutpat. 
					Nam enim metus, faucibus non porttitor id, laoreet quis sapien.</p>
			</div>
			<div class="col-md-6 agileinfo_newsletter_right">
				<form action="#" method="post">
					<input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
					<input type="submit" value="Subscribe">
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //newsletter -->
	<!-- footer -->
	<div class="agile-footer">
		<div class="container">
			<div class="aglie-info-logo">
				<h2><a href="index.html">Apartment</a></h2>
			</div>
			<ul class="aglieits-nav">
				<li><a href="index.html">Home</a><i>|</i></li>
				<li><a href="about.html">About Us</a><i>|</i></li>
				<li><a href="gallery.html">Gallery</a><i>|</i></li>
				<li><a href="icons.html">Icons</a><i>|</i></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
			<div class="w3layouts_mail_grid">
				<div class="col-md-3 w3layouts_mail_grid_left">
					<div class="w3layouts_mail_grid_left1">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
					</div>
					<div class="w3layouts_mail_grid_left2">
						<h3>Mail Us</h3>
						<a href="mailto:[email protected]">[email protected]</a>
					</div>
				</div>
				<div class="col-md-3 w3layouts_mail_grid_left">
					<div class="w3layouts_mail_grid_left1">
						<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
					</div>
					<div class="w3layouts_mail_grid_left2">
						<h3>Address</h3>
						<p>PO Box 8568954 Melbourne, Australia</p>
					</div>
				</div>
				<div class="col-md-3 w3layouts_mail_grid_left">
					<div class="w3layouts_mail_grid_left1">
						<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
					</div>
					<div class="w3layouts_mail_grid_left2">
						<h3>Phone</h3>
						<p>+(0121) 121 121</p>
					</div>
				</div>
				<div class="col-md-3 w3layouts_mail_grid_left">
					<div class="w3layouts_mail_grid_left1">
						<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
					</div>
					<div class="w3layouts_mail_grid_left2">
						<h3>Fax</h3>
						<p>+(0121) 121 121</p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="copy-right">
				<p>? 2017 Apartment. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
			</div>
		</div>
	</div>
	<!-- //footer -->
	<!-- modal -->
				<div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header"> 
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
								<h4 class="modal-title">Apartment</h4>
							</div> 
							<div class="modal-body">
								<div class="agileits-w3layouts-info">
									<img src="images/t1.jpg" class="img-responsive" alt="" />
									<p>Duis venenatis, turpis eu bibendum porttitor, sapien quam ultricies tellus, ac rhoncus risus odio eget nunc. Pellentesque ac fermentum diam. Integer eu facilisis nunc, a iaculis felis. Pellentesque pellentesque tempor enim, in dapibus turpis porttitor quis. Suspendisse ultrices hendrerit massa. Nam id metus id tellus ultrices ullamcorper.  Cras tempor massa luctus, varius lacus sit amet, blandit lorem. Duis auctor in tortor sed tristique. Proin sed finibus sem.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //modal -->  
<!-- for bootstrap working -->
<!-- //for bootstrap working -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子