黃色簡潔風格的商務貿易企業網站模板下載



9 35 12



模板描述:黃色簡潔風格 商務貿易 企業網站,黃色簡潔風格的商務貿易企業網站模板下載

代碼結構

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=Source+Sans+Pro:200,300,400,600,700,900' rel='stylesheet' type='text/css'>

2. 引入JS

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

3. HTML代碼

<!-- header -->
 <div class="container">
	<div class="header">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
			</div>
			<div class="nav-top">
				<div class="head-nav">
					<span class="menu"> </span>
						<ul class="cl-effect-16">
						<li><a href="index.html"  data-hover="HOME">HOME</a></li>
							<li><a href="about.html"  data-hover="ABOUT">ABOUT</a></li>
							<li><a href="services.html"  data-hover="SERVICES">SERVICES</a></li>
							<li><a href="404.html"  data-hover="SOLUTIONS">SOLUTIONS</a></li>
							<li><a href="contact.html"  data-hover="CONTACT">CONTACT</a></li>
								<div class="clearfix"> </div>
						</ul>
				</div>
			</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 --> 					
			</div> 
	</div> 
	<div class="banner">
		<div class="container">
			<div class="banner-info">
				<h1>Proin Doia  Morash Diam Sedon!</h1>
				<a href="#" class="btn  btn-1c btn1 btn-1d">Read More</a>
			</div>
		</div>
	</div>
<!-- header -->
	<div class="container">
	<div class="content-top">
		<div class="content">	
			<div class="col-md-3 lente">
				<h4>Lentesque risusur</h4>
				<h6>Dictum facilisis mauris integer sit amet justo sem.</h6>
					<ul>
						<li><a href="#"><span> </span>Nam at urna quis lacus utre </a></li>
						<li><a href="#"><span> </span>Posuere justo velitet laotinoc </a></li>
						<li><a href="#"><span> </span>Donec egestas diam sed odioti</a></li>
						<li><a href="#"><span> </span>Integer eu nibh vitae massa</a></li>
						<li><a href="#"><span> </span>Cras vehicula nunc sed umb</a></li>
						<li><a href="#"><span> </span>Quisque non risus dui, vel pos</a></li>
						<li><a href="#"><span> </span>Aenean nec diam libero, sum</a></li>
					</ul>
					<div class="sti">
						<h4>Stibulum eu velit</h4>
						<img src="images/img1.jpg" class="img-responsive" alt="" />
						<p>Temporibus autem quibusdam et aut officiis debitis aut rerum </p>
						<p>Necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
						<a href="#" class="link">Read More</a>
					</div>
			</div>
			<div class="col-md-8 sedtell">
				<h3><a href="#">Sed tellus diam consectetur vitae tristique id varius</a></h3>
				<h5>Fusce dictum pretium turpis sed pharetra odio semper id sit amet </h5>
				<div class="sedtell-top">
					<div class="sedtell-left">
						<img src="images/img2.jpg" class="img-responsive" alt="" />
					</div>
					<div class="sedtell-right">
						<p>Nullam in tortor vitae magna ornare lacinia. In vel quam eu quam ultricies cursus nec et orci. </p>
						<p>Duis felis ligula, consectetur in posuere vitae, tincidunt sit amet ante. Suspendisse nec diam justo. Nullam varius semper vestibulum.  Integer sit amet justo sem.</p>
						<p>Donec sodales vulputate mi, sed laoreet sem fringilla et. Nulla laoreet nisi rhoncus orci tempor ut aliquam turpis rutrum.lorem ipsum dolor sit amet</p>
						<a href="#" class="link">Read More</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="sedtell-bottom">
					<div class="sedtell-left1">
						<div class="left-top">
							<div class="top1">
								<i class="umber"></i>
							</div>
							<div class="top2">
								<h3><a href="#">Ornaeget mole</a></h3>
								<h5>Rattortor odio vel aliq nul </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<img src="images/img3.jpg" class="img-responsive" alt="" />
						<p>Rices lacinia. Curabitur a arcu ut metus tristique rutrum sit amet non urna. Donec iaculis pretium diam eu aliquam.  </p>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
						<a href="#" class="link">Read More</a>
					</div>
					<div class="sedtell-right1">
						<div class="left-top">
							<div class="top1">
								<i class="bell"></i>
							</div>
							<div class="top2">
								<h3><a href="#">Ranare eget</a></h3>
								<h5>Rattortor odio vel aliq </h5>
							</div>
							<div class="clearfix"> </div>
						</div>
						<img src="images/img4.jpg" class="img-responsive" alt="" />
						<p>Rices lacinia. Curabitur a arcu ut metus tristique rutrum sit amet non urna. Donec iaculis pretium diam eu aliquam.  </p>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
						<a href="#" class="link">Read More</a>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
				<div class="clearfix"> </div>
		</div>
		</div>
	</div>
<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>Copyrights ? 2015 bizname All rights reserved | Template by <a href="http://w3layouts.com/">W3layouts</a></p>
		</div>
	</div>
<!-- footer -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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